前端模块化探索（jQuery篇）

YUI是针对与企业级的js框架，在模块化上做的还是比较靠前的，相比之下，jQuery是比较轻量级的库，jQuery中的模块更可以说是jQuery插件模块，但是再jQuery中的插件模块系统有一些缺陷：

一）、没有所谓的命名空间机制，覆盖重名的风险问题

二）、插件机制的方法($.fn)或是全局方法($)都是直接插入全局的命名空间jQuery下，其中fn方法是完全挂靠在jQuery对象上，每一次的$操作会new出一个jQuery对象，庞大的jQuery对象会使内存耗损会很严重。

三）、插件模块还是需要通过merge或是脚本引入按依赖顺序加载进来

 

对于企业级协同前端开发，无命名空间是非常危险的。所以jQuery被业界称为只适合小型网站前端架设。但事实真的是这样的吗？jQuery也可以用于企业级协同开发！！

 

第一要解决它没有命名空间的问题，jQuery是无架构的库，如何使用命名空间呢？

一种比较靠谱的解决方案是自己再提供一个全局命名空间，将jQuery只是当做YUI中的DOM操作的plugin：

 

('doSomething' in FLOWG.op.widget) ||
(function($, C){

    var doSomething = function(node, activityId, config){
        this._init(node, activityId, config);
    }
	
	//TODO
	
    C.doSomething = doSomething;
	
})(jQuery,FLOWG.op.widget.doSomething);

 

这样做的好处有了自己的命名空间并降低了代码污染级别，其中不能写诸如$.fn,$.extend等挂靠在jQuery对象中的方法与属性，因为这样做会造成jQuery对象过于庞大，不好维护；缺陷很明显：没有jQuery特色的插件机制，只是把jQuery当成YUI2.8的DOM Query的工具，没有完全发挥jQuery的强大链式优势。

 

jQuery没有命名空间的概念，那如何拥有jQuery自己的命名空间呢？

以前也有几种模拟的hack：

一）、jQuery.fn.op.doSomething 通过加对象的方式

二）、jQuery.fn.op_doSomething 下划线风格

显而易见，两种方式完全不靠谱。虽然建立了所谓的命名空间，但是并没有解决上面的问题，全局jQuery对象还是随着插件的增多日益庞大，另外会造成方法的冗长不易记忆。显然不靠谱。。。

 

那入如何hack出jQuery的命名空间？

 

第二种解决方案是比较好的，就是使用$.sub这个方法克隆出一个jQuery对象，它拥有jQuery对象的一切方法属性；我们可以把不同的插件挂靠在这个克隆体下，因为不是全局jQuery对象，所以一定程度上保证了jQuery对象的大小。

 

 

var event = $.sub();

event.fn.doSomething = function(){  
      //TODO  
}  
  
event.otherDo = function(){  
      //TODO  
} 

  这样的话就克隆出了一个jQuery对象，保证了对象的体积；

event('#node').doSomething(//TODO);

event.otherDO();

  上面就能使用刚才克隆出来的jQuery对象Query DOM Node了，并在上面做链式操作。

对于jQuery的链式操作算是保住了；下面要解决模块载入问题，用YUI3可以载入jQuery，YUI3是一个可以兼容其他库的框架。

 

YUI({  
    modules: {  
        'jQuery': {  
            fullpath: 'jquery.js',  
        }  
    }  
}).use('jQuery',function(Y){  
    //TODO  
});  

 

借助于YUI3的强大的动态载入机制我们可以轻松载入jQuery框架，这样结合上面的克隆对象就能打造比较靠谱的模块载入机制。