js模块化开发

  JS模块化开发                

          Javascript社区做了很多努力，在现有的运行环境中，实现"模块"的效果。本文总结了当前＂Javascript模块化编程＂的最佳实践，说明如何投入实用。

一 js模块化原理

 

（1）原始写法 :相同功能的放到一起

          

function m1(){
     ...
}
function m2(){
     ...
}

 

 

（2）对象写法

 

var  model = new Object({
          _count : 1;
          m1 : function(){
             
           }
          m2 : function(){
         
         }
});

 

 

（3）立即执行函数写法

 

var model = (function(){
               var count = 1;
               var m1 = function(){
                      return count;
               };
               var m2 = function(aa){
                      count = aa;
               };
               return {
                      m1 : m1,          
                      m2 : m2
                      };
})();
//调用方式
model.count; //undefined
model.m1(); //1
model.m2("aa");
model.m1(); //aa

 

 

（4）放大模块

 

var model = (function(){
               var count = 1;
               var m1 = function(){
                      return count;
               };
               var m2 = function(aa){
                      count = aa;
               };
               return {
                      m1 : m1,          
                      m2 : m2};
})();
 var model = (function(mod){
              mod.m3 = function(){
                       mod.m2(mod.m1()+1);
             };
             return mod;
})(model);
//调用方式
model.m3();
model.m1();//2

 

 

（5）宽放大模块      // 函数立即执行 参数可以为空对象

 

 var cc = (function(mod){
              mod.m3 = function(){
                       alert("dd");
             };
              return mod;
})(cc||{});

 （6）将全局变量引入模块

 

 

var model = (function($){
               ....
})(jquery);

 二 、AMD /CMD的区别

 

   先说 RequireJS/seaJS 是一个前端的模块化管理的工具库

     AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。

    CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。

 1.模块化定义的规范不同，AMD推崇依赖前置，CMD推崇依赖就近。

2.虽然 AMD 也支持 CMD 的写法，同时还支持将 require 作为依赖项传递，但 RequireJS 的作者默认是最    喜欢上面的写法，也是官方文档里默认的模块定义写法。  

3. AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。比如 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每个 API 都简单纯粹。

AMD规范

requiredJs模块定义  

 

define('name',[ 'module1', 'module2' ], function(m1, m2){
    ...
});//模块的名字是文件的名字 也可以取名字 function 里的值对应前面的依赖返回

requiredJs调用：

 

require( ['foo', 'bar'], function( foo, bar ){
    foo.func();
    bar.func();
} );

 

CMD规范

seajs模块定义

 

define( 'module', ['module1', 'module2'], function( require, exports, module ){
    // 模块代码
} );  // 模块id,依赖模块，函数（require,输出，被扩展的）

require 是 factory 的第一个参数。  require( id ); 接受模块标识作为唯一的参数，用来获取其他模块提供的接口；equire.async( id, callback? );require是同步往下执行的，需要的异步加载模块可以使用 require.async 来进行加载；

 exports 是 factory 的第二个参数，用来向外提供模块接口。

module 是factory的第三个参数，为一个对象，上面存储了一些与当前模块相关联的属性与方法。

        module.id 为模块的唯一标识。

        module.uri 根据模块系统的路径解析规则得到模块的绝对路径。

        module.dependencies 表示模块的依赖。

        module.exports 当前模块对外提供的接口。

参考链接http://blog.chinaunix.net/uid-26672038-id-4112229.html