最近看了一下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 };