如何模块化写jQuery
发布网友
共3个回答
热心网友
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 (moleName, superMole, prototypeMethod, attrMember, staticMember, curConstructor) {
//使用prototype方式继承
var Mole = function () {
Mole.superclass.constructor.apply(this, arguments);
//保存对实例的引用
Mole._instances[$.zid(this)] = this;
};
if(curConstructor){
Mole = curConstructor;
}
//如果给定了构造函数，就在给定的构造函数上进行扩展，否则试用默认的构造函数
return Base._handlerClass(moleName, Mole, superMole, prototypeMethod, attrMember, staticMember)
};
Base._handlerClass = function (moleName, mole, superMole, prototypeMethod, attrMember, staticMember) {
var tempFn = function () {
},
o = {
name:moleName,
value:mole
};
//创建对象来保存实例的引用
mole._instances = {};
//模块NAME
if (moleName) {
mole.NAME = moleName;
}
/*Mole.toString = function(){
return moleName;
};*/
//如果没有传入要继承的对象，则默认为Base
superMole = superMole || Base;
attrMember = attrMember || {};
staticMember = staticMember || {};
prototypeMethod = prototypeMethod || {};
//挂载ATTRS属性
//如果是继承于另外一个模块，则需要将ATTRS进行合并处理
if (superMole.NAME !== BASE) {
$.extend(attrMember, superMole.ATTRS);
}
//@20120830修复构造函数自带ATTRS时对应的处理方式
mole.ATTRS = mole.ATTRS || {};
$.extend(mole.ATTRS, attrMember);
//挂在静态属性
$.extend(mole, staticMember);
//拷贝一份prototype，防止构造函数直接执行
tempFn.prototype = superMole.prototype;
mole.prototype = new tempFn();
//把方法添加到Mole的原型上
$.extend(mole.prototype, prototypeMethod);
//修改构造器，防止回溯失败
mole.prototype.constructor = mole;
//保存对超类的引用
mole.superclass = superMole.prototype;
if (superMole.prototype.constructor == Object.prototype.constructor) {
superMole.prototype.constructor = superMole;
}
//保存生成的对象
Base.classList.push(o);
return mole;
};
代码细节都有注释，就不多说，主要还是把具体做的事情描述下
确定构造函数。
创建一个空对象来保存实例的引用。
确定模块名。
确定是否继承于其他模块。
拷贝参数的策略（ATTRS）和静态成员
创建原型并拷贝实例成员（原型上的成员）
修复创建原型后构造器指向不对的问题
创建对超类的引用，从而可以手动访问超类
保存生存的对象引用
返回改造完成后的模块
注：以上构造模块的思路主要参考自YUI3的Base模块。
在下一篇中，将用这个Base模块来构建一个tab组件
热心网友
看了你的天猫demo，是一般的面向过程的写法。你说的问题三应该说的就是jq插件吧？我jq插件也写过，如果结合sea.js模块化的插件也写过。jq插件主要是面向对象级别的写法，可以自定义参数，有利用重用~！
热心网友
如果不想像垒砖块一样，一个函数一个函数的那样写代码。如果想你说的模块化的话
你需要学习一下javascript的设计模式。这样才能更好的去构建一个低耦合的模块化代码。也就是根据功能需求，分模块设计。而个个模块之间关系一定要少，任何模块单独拿出来就可以应用到其他场景。
学习Javascript面向对象设计方法。推荐的一本教程《Javascript面向对象高级编程》..
希望可以帮助到您，谢谢
