zoukankan      html  css  js  c++  java
  • 编写面向对象的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
  • 相关阅读:
    话说 SVN 与 Git 之间的区别
    CentOS 7 之安装 Oracle 11gR2
    @meda媒体查询
    为样式找到应用目标-CSS选择器
    JQuery和原生JavaScript实现网页定位导航特效
    CSS代码缩写
    认识CSS样式
    文档类型、DOCTYPE切换和浏览器模式
    MIME 参考手册
    微格式(microformat)
  • 原文地址:https://www.cnblogs.com/gamov/p/10376003.html
Copyright © 2011-2022 走看看