• Js组件的一些写法【转】


    首先看下Prototype里的写法: 

    复制代码
    var Class = { 
    create: function() { 
    return function() { this.init.apply(this, arguments); } 
    } 
    } 
    var A = Class.create(); 
    A.prototype = { 
    init: function(msg) { 
    this.msg = msg; 
    }, 
    fn: function() { 
    alert(this.msg); 
    } 
    } 
    var a = new A("myMsg"); 
    a.fn(); 
    复制代码

    如果你不喜欢上面这一大堆Class.create之类的,你也可以这样:

    复制代码
    function A() { } //var A = function(){} 
    A.prototype = { 
    init: function(msg) { 
    this.msg = msg; 
    }, 
    fn: function() { 
    alert(this.msg); 
    } 
    } 
    var a = new A(); 
    a.init("myMsg"); 
    a.fn(); 
    复制代码

    当然,也可以把this.msg的初始化放到function A(msg){this.msg=msg;}里。总之你会发现这样调用很麻烦,并且参数是固定对应好的。 
    你如果既不愿搞一大堆Class.create,也不愿调用不方便,那就把Prototype里的var Class = {...} 和 var A = Class.create();合并起来。得到: 

    复制代码
    function A() { 
    this.init.apply(this, arguments); 
    } 
    A.prototype = { 
    init: function(msg) { 
    this.msg = msg; 
    }, 
    fn: function() { 
    alert(this.msg); 
    } 
    } 
    var a = new A("myMsg"); 
    a.fn(); 
    复制代码

    看上去干净了许多,但是如果你的库里有很多组件,则每个组件都要写一遍this.init.apply(this, arguments); 如果用Class.create的话,则只要写一个Class,然后每个组件执行下Class.create()即可。当然,每个组件都写一遍this.init.apply(this, arguments);也没啥不好的,还是看个人喜好了。另外写原型方法是合在一起还是分开来写也是个人喜好,出于封装的角度,合一起好,但是分开有时候显的更清晰。譬如A.prototype.init=function(msg){...} A.prototype.fn=function(){...} 

    然后还有人喜欢这样去写组件: 

    复制代码
    var A = function(msg) { 
    this.msg = msg; 
    var _this = this; 
    var privateFn1 = function() { 
    alert(_this.msg); 
    } 
    var privateFn2 = function() { 
    alert(_this.msg); 
    } 
    return { fn1: privateFn1, fn2: privateFn2 }; 
    } 
    var a = new A("myMsg"); 
    a.fn1(); 
    复制代码

    这边一定要把A构造的对象this放到临时变量_this中哦,因为运行时,privateFn1的函数体内this实际是{fn1:...,fn2:...}这样的匿名对象,你可以用this.hasOwnProperty("fn1")去测试。this是在运行时才有意义的一个东西。另外这种方法每个对象都会有privateFn1 和 privateFn2的副本,这种方法不太好。

  • 相关阅读:
    C连载20-转换说明中的异常
    Android连载30-SharedPreference存储
    搭建一个开源项目12-Kubernetes集群部署(下)以及elasticsearch部署
    JavaScript连载29-元素类型获取、节点CD
    从零开始学VUE之模板语法(计算属性)
    从零开始学VUE之模板语法(绑定属性)
    从零开始学VUE之模板语法(插值操作)
    从零开始学VUE之Vue的生命周期
    从零开始学VUE之Vue创建时可以传入的Option属性
    从零开始学VUE之Vuejs初体验(DEMO)
  • 原文地址:https://www.cnblogs.com/sybboy/p/5088175.html
Copyright © 2020-2023  润新知