• 编写面向对象的JS代码


    现在虽然Js的使用率依然很高,但是感觉他也会慢慢被其他前端框架所代替,相比于Typescript等直接面向对象的客户端语言,它显得比较繁琐和麻烦。

    但是由于工作地缘故,对于js的使用率还是居高不下,这期间了解了一些编写优雅js代码的方法,放在这里慢慢积累,慢慢补充。

    1.尽量使用对象,不要使用单独的方法

    因为当方法多了的时候,就会显得很混乱,方法之间调用的关系也不易显示出来。

    function EventBind() {
        this.init = function () {
            domInitChange();
        }
    
        // 页面初始化阶段Dom变化引起的事件
        var domInitChange = function () {
    
        }
    }
    View Code

    在EventBind构造方法中,this.init相当于的public方法,而var domInitChange相当于私有方法,调用的时候使用

    new EventBind().init();

    2.使用对象的继承

    // 对象继承
    function extend(Child, Parent) {
        var F = function () { };
        F.prototype = new Parent();
        Child.prototype = new F();
        Child.prototype.constructor = Child;
        Child.uber = Parent.prototype;
    }
    View Code

    使用extend可以使Child继承Parent的成员,使用该方法就不需要频繁去操作原型链prototype了,比较方便

    使用方法如下

    function A (){
        this.fun2 = function(){
            this.fun1();
        }
    }
    
    function B (){
        this.fun1 = function(){
        }
    }
    
    extend(A,B);
    var a = new A();
    a.fun1();
    a.fun2();
    View Code

     详情可以参考阮一峰的博客 跳转

    3.使用单例模式来实现命名空间

    JS是没有命名空间功能的,但是使用一定的技巧可以模拟出这种功能

    var namespace1 = (function(){
        function A(){
            this.fun1 = function(){}
        }
    
        return {
            AObj:new A()
        }
    })();
    namespace1.AObj.fun1();
    View Code
  • 相关阅读:
    ElementInject/Provide调用组件中的方法
    CSS样式的继承
    CSS 背景图片
    CSS内外间距
    CSS列表属性
    CSS文件属性设置
    CSS文件属性的设置03
    CSS margin(外)间距案例
    CSS 清除float(浮动)属性案例Windows系统logo
    CSS伪类选择器扩展
  • 原文地址:https://www.cnblogs.com/gamov/p/10376003.html
Copyright © 2020-2023  润新知