美文网首页
immy框架入门系列(2)——class

immy框架入门系列(2)——class

作者: NoteCode | 来源:发表于2016-06-25 17:43 被阅读29次

    上文谈了module,本文谈class。可以说,这两个东西是本框架的两个“基石”(至少对我这样没有在js中应用过OOP和“模块编程”的小白来说是)。module vs. class,两者是各自独立的技术点:我们可以只用module而不用class,同样也可以只用class而不用module。总之,他俩没有毛关系。也可以说,module是“文件”层面上的封装机制,class则是“代码”层面上封装机制。

    还是以“尽量排除干扰”的原则,本文将框架中纯class的内容摘出来,仅谈class,不谈module。

    js本没有class

    背景:ES5及以前的标准中,并没有class这个关键字。(ES6才开始有)教科书上教我们创建一个class并实例的方式如下:

    class定义及实例化
    
    // 定义
    function Dog(name) {
        this.name = name;
        this.foots = 4;
    }
    
    Dog.prototype.eat = function() {
        console.log('I like bone');
    }
    
    // 实例化
    var dog = new Dog('da-huang');
    dog.eat();
    

    potato.createClass

    zy框架下,随处可见这样的代码块(注释为我加):

     define(['some/base/module'],function(Base) {
        var Module = (function(){
            var CON = function(dom){  // CON: constructor
                Base.call(this, dom);
            }
            potato.createClass(CON, Base); // 实现继承
    
            // 在createClass之后,对prototype增加方法(必须如此?)
    
            CON.prototype.someMothed = function() {
                // do some thing
            }
            CON.prototype.someMothed2 = function() {
                // do some thing
            }
            // ....
    
            return CON;
        })();
    
        return Module;
    });
    

    我认为,potato.createClass 是需要理解的一个关键方法。其实现了类的继承。potato是一个基础库,其中createClass的定义为:

    var _pt = {
        "__CID__" : 0
    };
    var createClass = function (A, B) {
        _pt.__CID__++;
        var CID = "__"+_pt.__CID__+"__";
        A.__CID__ = CID;
        if(B){
            var fun = function(){this.constructor = A;};
            fun.prototype = B.prototype;
            A.prototype = new fun();
            A.prototype[CID] = B.prototype;
        }
        fun = null;
        return CID;
    };
    

    (为了简化,进行了些许修改)

    其中,CID应为 "class id" 之意,其作用不甚了了,待赵勇同学解惑。我不揣冒昧,将这段代码关键部分取出(如有谬误,请斧正):

    var createClass = function (A, B) {
        var fun = function() {}
        fun.prototype = B.prototype;
        A.prototype = new fun();
    };
    

    如有以下代码:

    function Base() {}
    // Base.prototype.xxx ....
    function Some() {}
    
    createClass(Some, Base);  
    // 此时,Some就继承了Base的prototype(方法们)
    

    周知,js的类及继承,是个不太好理解的问题。写过一篇文章 javascript prototype试图深入探讨,但写的也不好。如果尚不能真正理解,就先记住:createClass就是为了实现继承,然后按照范例来写新的类吧。

    web.git中有个demo:/m/src/demo/class,呈现的是本文的意思。

    相关文章

      网友评论

          本文标题:immy框架入门系列(2)——class

          本文链接:https://www.haomeiwen.com/subject/gddadttx.html