javascript框架设计之种子模块

种子模块也叫核心模块,是框架中最先执行的部分。即便像jQuery那样的单文件函数库,它的内部也分很多模块,必然有一些模块执行时在最前面立即执行,有一些模块只有用到才执行。有的模块可有可无,存在感比较弱,只有在特定的浏览器下才运行。

种子模块就是其中的先锋,它里边的方法不一定要求个个功能齐全,设计优良,但一定要极具扩展性,常用,稳定。

扩展性是指通过他们能给将其它模块包含进来;常用是指绝大多数的模块都能用到它们,防止做重复工作。稳定是指在版本迭代时不轻易被新方法替代。

参照许多框架和库的实现,我们认为种子模块包含如下功能:对象扩展,数组化,类型判定,简单的绑定与卸载,无冲突处理,模块的加载与domReady.本章学习的内容以mass Framework种子模块为范本。

https://github.com/RubyLouvre/mass-Framework

1.命名空间

种子模块作为一个框架最开始的部分,负责辅建全局的基础设施外。jQuery就有一个很好的开头,使用IIFE(立即调用函数表达式).

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; } })

参考:

但jQuery的noConflict只是对单文件的类库框架有用,像Ext就不能复制了。因此把命名空间改名后,将Ext置为null,然后通过动态加载的方法引入新的javascript文件中,该文件会以Ext调用,会导致报错。

2.对象扩展

我们需要一种机制,将新功能添加到我们的命名空间上来。这方法在javascript通常称作extend或mixin。javascript对象在属性描述符(Property Descriptor)没有诞生之前,是可以随意添加、更改、删除其成员的,因此,扩展一个对象非常便捷。一个简单的扩展方法实现是这样的。

function extend (destination,source){ for (var property in source) destination[property] = source[property]; return destination; }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgdfdp.html