种子模块也叫核心模块,是框架中最先执行的部分。即便像jQuery那样的单文件函数库,它的内部也分很多模块,必然有一些模块执行时在最前面立即执行,有一些模块只有用到才执行。有的模块可有可无,存在感比较弱,只有在特定的浏览器下才运行。
种子模块就是其中的先锋,它里边的方法不一定要求个个功能齐全,设计优良,但一定要极具扩展性,常用,稳定。
扩展性是指通过他们能给将其它模块包含进来;常用是指绝大多数的模块都能用到它们,防止做重复工作。稳定是指在版本迭代时不轻易被新方法替代。
参照许多框架和库的实现,我们认为种子模块包含如下功能:对象扩展,数组化,类型判定,简单的绑定与卸载,无冲突处理,模块的加载与domReady.本章学习的内容以mass Framework种子模块为范本。
https://github.com/RubyLouvre/mass-Framework
命名空间
种子模块作为一个框架最开始的部分,负责辅建全局的基础设施外。jQuery就有一个很好的开头,使用LIFE(立即调用函数表达式).
LIFE是现代javascript框架里最主要的基础设施,它就像细胞一样包裹自身,防止变量污染。就像一个立足点,这个就是命名空间,如prototype.js,mootools,它们让你感受不到框架的存在,它的意义深刻到javascript、DOM、BOM等整个执行环境的每个角落,对原生的对象原型就行扩展。由于道格拉斯(JSON作者)的极力反对,新的框架都在命名空间上构建了。
我们看怎么在javascript上模拟命名空间。javascript一切基于对象,但只有符合类型的对象才符合要求,比如function 、RegExp、Object,不过最常用的是object和function。我们往一个对象上添加一个属性,而这个属性又是一个对象,这个对象我们又可以为它添加一个对象,通过这种方法,我们就可以有条不紊的构建我们的框架。用户想调用某个方法,就以xxx.yyy.zzz()的形式调用。
if( typeof(Ten) === "undefined" ){ Ten = {}; Ten.Function = { /*略*/ } Ten.Array = { /*略*/ } Ten.Class = { /*略*/ } Ten.JSONP = new Ten.Class(/*略*/ ) Ten.XHR = new Ten.Class(/*略*/ ) }
纵观各大类库的实现,一开始基本都是定义一个全局变量作为命名空间,然后对它进行扩展,如Base2的Base,Ext的Ext,jQuery的jQuery,YUI的YUI,dojo的dojo,MochiKit的mochKit。从全局变量的污染程度来看,分为两类:
prototype.js和mootools与Base2归为一类,Prototype的哲学是对javascript的原生对象进行扩展。早些年,prototype差点称为事实的标准。因此没有考虑到与其它库共存的问题。基本Prototype,也发展出诸如script.aculo.us,rico,Plotr,protoChart,Script2等非常优秀的类库以一大类收费插件。而且,有些渊源的插件几乎都与Prototype有关,比如lightBox。mootools是prototype.js的升级版,更加OO,全面复制其API。Base2则是想修复IE的bug,让IE拥有标准浏览器的API,因此也把所有原生的对象污染一遍。
第二类是jQuery,YUI,EXT这些框架,YUI和Ext就是对象嵌套对象的方式构建的。jQuery则另辟蹊径,它是以选择器为导向的,因此它的命名空间是一个函数,方便用户将css表达器的字符串传进来。然后通过选择器进行查找,最后返回一个jQuery对象实例。
jQuery最开始也像Prototype使用$作为它的命名空间,因此,它实现了很多库的共存机制,在$和jQuery中任意切换,jQuery的多库共存原理很简单,因此后来也成为许多小库的标配。首先,把命名空间保存到一个临时变量中(注意,这时候这个对象并不是自己框架的东西,可能是prototype.js或者其他的),然后再使用个noConflict放回去。
//jQuery1.2 var _jQuery = window.jQury , _$ = window.$; //把可能存在同名变量先保存起来 jQury.extend({ noConflict : function(deep) { window.$ = _$; //这时再放回去 if (deep) //补充 if ( deep && window.jQuery === jQuery ) window.jQury = _jQuery; return jQury; } })
参考:http://zhidao.baidu.com/question/1239712776390687219.html
但jQuery的noConflict只是对单文件的类库框架有用,像Ext就不能复制了。因此把命名空间改名后,将Ext置为null,然后通过动态加载的方法引入新的javascript文件中,该文件会以Ext调用,会导致报错。
对象扩展
我们需要一种机制,将新功能添加到我们的命名空间上来。这方法在javascript通常称作extend或mixin。javascript对象在属性描述符(Property Descriptor)没有诞生之前,是可以随意添加、更改、删除其成员的,因此,扩展一个对象非常便捷。一个简单的扩展方法实现是这样的。
function extend (destination,source){ for (var property in source) destination[property] = source[property]; return destination; }
不过,旧版本IE在这里有个问题,它认为像Object的原型方法就是不应该被遍历出来,因此for in循环是无法遍历valueOf、toString的属性名。这导致,模拟Object.keys方法是现实时也遇到了这个问题。
Object.keys = Object.keys || function(obj){ var a = []; for(a[a.length] in obj); return a; }
在不同的框架,这个方法还有不同的实现,如Ext分别为apply与applyIf两个方法,前者会覆盖目标对象的同名属性,而后者不会。dojo允许多个对象合并在一起。jQuery还支持深拷贝。下面是mass Farmework的mix方法。支持多对象合并与选择是否覆写。
function mix(target,source){ //如果最后参数是布尔,判定是否覆盖同名属性 var args = [].slice.call(arguments), i = 1, key, ride = typeof args[args.length - 1] == "boolean" ? args.pop() : true; if (args.length === 1){ //处理$.mix(hash)的情形 target = !this.window ? this : {}; i = 0; } while ((source = args[i++])) { for (key in source){ //允许对象糅杂,用户保证都是对象 if (ride || !(key in target)) { target[key] = source[key]; } } } return target; }
(未完待续)
数组化
类型的判定
主流框架的引入机制-domReady
无冲突处理