【原创】backbone0.9.2源码解析之extend

最近看了一下backbone的源代码,总的来说,对于MVC而言,写的真的挺不错的,但是如果说企业应用呢?个人觉得维护成本比较高。

源码主要是是写了类,Model,View,Collection,Router,通过继承这些类,实现自己的应用需求,所以说对于继承这块,我将源代码解析出来。

1  Model.extend = Collection.extend = Router.extend = View.extend = extend;

依旧看一下结构图:

图中红色图块的child是继承后的子类(是一个构造器function),parent为父类(如:Backbone.Model),Surrogate为中间类(图中红色图块是它的实例,存放child的公用方法),

staticProps是child的静态属性(或者方法),protoProps是child所有实例的公用属性(或者方法)

以下是源代码(附中文注释):

 1   // Helpers
 2   // -------
 3 
 4   // Helper function to correctly set up the prototype chain, for subclasses.
 5   // Similar to `goog.inherits`, but uses a hash of prototype properties and
 6   // class properties to be extended.
 7   // extend用来实现继承,返回一个javascript类,也就是一个构造器function(父类叫做parent,子类叫做child)
 8   // 参数protoProps对象中的属性是所有child实例的公用方法
 9   // 参数staticProps对象中的属性是child类的静态属性
10   var extend = function(protoProps, staticProps) {
11     var parent = this;
12     var child;
13 
14     // The constructor function for the new subclass is either defined by you
15     // (the "constructor" property in your `extend` definition), or defaulted
16     // by us to simply call the parent's constructor.
17     // 如果定义了protoProps,且protoProps有constructor属性(function)
18     // 那么protoProps.constructor将作为子类的构造器
19     // 否则,会定义一个构造器,且构造器里调用了父类的构造函数
20     if (protoProps && _.has(protoProps, 'constructor')) {
21       child = protoProps.constructor;
22     } else {
23       child = function(){ parent.apply(this, arguments); };
24     }
25 
26     // Add static properties to the constructor function, if supplied.
27     // 将静态属性staticProps以及parent上的类属性添加到child上作为类属性
28     _.extend(child, parent, staticProps);
29 
30     // Set the prototype chain to inherit from `parent`, without calling
31     // `parent`'s constructor function.
32     // 通过中间函数Surrogate,将原型链连接起来
33     // this.constructor = child; 这一步很重要,用来说明之后child实例的构造器是谁?显然是child
34     var Surrogate = function(){ this.constructor = child; };
35     // 继承父类的所有公用方法
36     Surrogate.prototype = parent.prototype;
37     // 连接原型链
38     child.prototype = new Surrogate;
39 
40     // Add prototype properties (instance properties) to the subclass,
41     // if supplied.
42     // 将protoProps对象中的方法放入child.prototype中,作为所有child的实例的公用方法
43     if (protoProps) _.extend(child.prototype, protoProps);
44 
45     // Set a convenience property in case the parent's prototype is needed
46     // later.
47     // 指明child类的父类是谁?
48     child.__super__ = parent.prototype;
49 
50     // 返回生成的子类
51     return child;
52   };
原文地址:https://www.cnblogs.com/lovesueee/p/2790926.html