当前位置:首页>开发>正文

如何模块化写jQuery sea.js如何模块化jquery.js

2023-07-04 07:55:15 互联网 未知 开发

 如何模块化写jQuery sea.js如何模块化jquery.js

如何模块化写jQuery

Base做的事情包括:
给模块增加自定义事件支持
给模块增加set和get方法
设置一些默认执行的方法,比如_init
提供模块的构建功能
提供模块的扩展功能
自定义事件
自定义事件模式是非常实用的,自定义事件用比较专业的词语描述的话,可以称为观察者模式,这种模式背后的主要动机就是促进形成松散耦合。在这种模式中,并不是一个对象调用另外一个对象的方法,而是一个对象订阅另外一个对象的特定活动并在状态改变后等到通知。这意味着我们在做一些事情的时候,不需要关注另外事情的进展,让另外一件事情来监听进展,然后做出对应的处理即可。这样的话,不同的事情之间就不会存在太多的关联,从而降低开发的复杂度。
set和get方法
为了保护和更好地稳定模块的执行,需要对模块参数的修改做一些限制和处理。所以需要提供set和get方法(现在的Base还没有在get的时候做一些处理),set可以用于在设置模块属性的时候,做一些过滤和处理,保证设置值的正确性,而且更重要的是,可以在set中触发一个属性修改的事件,从而可以做到修改属性的时候触发一些其他的变化。get则可以用于在访问属性的时候,对返回的属性做一些处理。对于模块内部而言,还需要有一个私有的_set和_get属性,从而可以和外部对模块的访问进行区分。
一些默认执行的方法
默认执行的方法会在两个地方存放,一个是在构造函数中,还有一个是在模块原型上的initliazer方法中。构造函数内主要处理模块间和实例的关系,这些处理是会继承到子模块中的,而在initliazer中主要处理模块真正相关的要执行的一些实例化方法,这样能保证模块在被继承的时候,自有的一些初始化方法不会被继承下去。而initliazer方法是由_init方法调用的,_init方法是模块实例化的时候必定会执行的方法,而initliazer是一个可选的初始化方法。
模块的构建和扩展
Base核心部分就是对模块的构建和扩展。先上代码
Base._build = function (moduleName, superModule, prototypeMethod, attrMember, staticMember, curConstructor) {
//使用prototype方式继承
var Module = function () {
Module.superclass.constructor.apply(this, arguments)
//保存对实例的引用
Module._instances[$.zid(this)] = this
}
if(curConstructor){
Module = curConstructor
}
//如果给定了构造函数,就在给定的构造函数上进行扩展,否则试用默认的构造函数
return Base._handlerClass(moduleName, Module, superModule, prototypeMethod, attrMember, staticMember)
}
Base._handlerClass = function (moduleName, module, superModule, prototypeMethod, attrMember, staticMember) {
var tempFn = function () {
},
o = {
name:moduleName,
value:module
}
//创建对象来保存实例的引用
module._instances = {}
//模块NAME
if (moduleName) {
module.NAME = moduleName
}
/*Module.toString = function(){
return moduleName
}*/
//如果没有传入要继承的对象,则默认为Base
superModule = superModule || Base
attrMember = attrMember || {}
staticMember = staticMember || {}
prototypeMethod = prototypeMethod || {}
//挂载ATTRS属性
//如果是继承于另外一个模块,则需要将ATTRS进行合并处理
if (superModule.NAME !== BASE) {
$.extend(attrMember, superModule.ATTRS)
}
//@20120830修复构造函数自带ATTRS时对应的处理方式
module.ATTRS = module.ATTRS || {}
$.extend(module.ATTRS, attrMember)
//挂在静态属性
$.extend(module, staticMember)
//拷贝一份prototype,防止构造函数直接执行
tempFn.prototype = superModule.prototype
module.prototype = new tempFn()
//把方法添加到Module的原型上
$.extend(module.prototype, prototypeMethod)
//修改构造器,防止回溯失败
module.prototype.constructor = module
//保存对超类的引用
module.superclass = superModule.prototype
if (superModule.prototype.constructor == Object.prototype.constructor) {
superModule.prototype.constructor = superModule
}
//保存生成的对象
Base.classList.push(o)
return module
}

代码细节都有注释,就不多说,主要还是把具体做的事情描述下
确定构造函数。
创建一个空对象来保存实例的引用。
确定模块名。
确定是否继承于其他模块。
拷贝参数的策略(ATTRS)和静态成员
创建原型并拷贝实例成员(原型上的成员)
修复创建原型后构造器指向不对的问题
创建对超类的引用,从而可以手动访问超类
保存生存的对象引用
返回改造完成后的模块
注:以上构造模块的思路主要参考自YUI3的Base模块。
在下一篇中,将用这个Base模块来构建一个tab组件

sea.js如何模块化jquery.js

....我服了你了,玉伯那个seajs上面又讨论区的,就是他的github地址
另外说下,你的jquery根本没引用到啊
//jquery模块jquery.js
define(function(require, exports, module){
    /*! jQuery v1.11.3 | (c) 2005, 2015 jQuery Foundation, Inc. | jquery.org/license */
   [省略,这里全是jqueryv1.11.3的代码,代码完成后接下一句]
    return $.noConflict(true)
})这样试试

最新文章