JS模块化开发规范

JS模块化开发规范，如下介绍三种

commonJS规范（Nodejs模块系统遵循此规范，适用于服务端）

 

一、 规范定义

CommonJS规范规定，一个文件就是一个模块，用module变量表明当前模块。 Node在其内部提供一个Module的构建函数。全部模块都是Module的实例

 

2、 module.exports属性定义模块

module.exports属性表示当前模块对外输出的接口，其余文件加载该模块，实际上就是读取module.exports变量。

//moduleA.js

module.exports.funcA= function(){

  console.log('This is moduleA!');

}

 

3、模块引用

require函数的基本功能是，读入并执行一个JavaScript文件，而后返回该模块的exports对象。在moduleB模块中加载引入moduleA模块，即可以使用funA方法了，示例代码以下：

//moduleB.js

var a = require('./moduleA');

a.funcA();//打印'This is moduleA!'

 

AMD规范（RequireJs  JS模块加载器遵循此规范，适用于浏览器）

 

一、定义模块：define方法   define(id?, [deps,]?, factory);

l  第一个参数，id（名字），是个字符串。它指的是定义中模块的名字，这个参数是可选的。若是没有提供该参数，模块的名字应该默认为模块加载器请求的指定脚本的名字。若是提供了该参数，模块名必须是“顶级”的和绝对的（不容许相对名字）。

l  第二个参数，dependencies（依赖），是个定义中模块所依赖模块的数组。依赖模块必须根据模块的工厂方法优先级执行，而且执行的结果应该按照依赖数组中的位置顺序以参数的形式传入（定义中模块的）工厂方法中。

l  第三个参数，factory（工厂方法），为模块初始化要执行的函数或对象。若是为函数，它应该只被执行一次。若是是对象，此对象应该为模块的输出值。

 

二、require方法：加载模块require([module], callback);

第一个参数[module]，是一个数组，里面的成员就是要加载的模块；第二个参数callback，则是加载成功以后的回调函数。若是将前面的代码改写成AMD形式，就是下面这样：

require(['a'], function (a) {

　　　　a.FuncA();

});

 

 

 

//js/index.js(requirejs的使用)

 <script data-main="js/ctr/index" src="js/lib/require.js" type="text/javascript"></script>

require.config({

//baseUrl——用于加载模块的根路径。

//paths——用于映射不存在根路径下面的模块路径。

//shims——配置在脚本/模块外面并无使用RequireJS的函数依赖而且初始化函数。

//deps——加载依赖关系数组

baseUrl : "js",         

paths: {

                 'jquery': '../lib/jquery'

          },

shim: {//加载非AMD规范的模块

           "underscore" : {

             exports : "_";

         },

"jquery.form" : {

             deps : ["jquery"],//deps数组，代表该模块的依赖性

         exports: 'jqueryForm'

         }

 

    }

 

});

require(['jquery'], function($) {

         $(document).on('click', '#clickBtn', function() {

                 $('#showMsg').html('看看jquery加载进来了没有');

         });

});

 

CMD规范（seaJS 模块加载器）

 

1、规范定义

CMD是国内大牛玉伯在开发SeaJS的时候提出来的，属于CommonJS的一种规范，根据浏览器的异步环境作了本身的实现。它和 AMD 很类似，尽可能保持简单，并与 CommonJS 和 Node.js 的 Modules 规范保持了很大的兼容性。

 

2、define方法：定义模块   define( id?, [deps,]?, factory );  前两个参数项可选

define('hello', ['jquery'], function(require, exports, module) {

  // 模块代码

});

 

三、require方法：加载模块

1.require 是同步往下执行，require.async 则是异步回调执行。require.async 通常用来加载可延迟异步加载的模块。

2.除了给 exports 对象增长成员，还可使用 return 直接向外提供接口

3.module.exports 的赋值须要同步执行，不能放在回调函数里。

4.exports 是 module.exports 的一个引用

 

define(function(require, exports, module) {

// 错误用法,对 module.exports 的赋值须要同步执行，不能放在回调函数里。

setTimeout(function() {

    module.exports = { a: "hello" };

}, 0);

 

// 异步加载模块，在加载完成时，执行回调

  require.async(['./c', './d'], function(c, d) {

    c.doSomething();

    d.doSomething();

  });

 

//向外暴露接口的方法3种

// 1.给 module.exports 赋值

module.exports = new SomeClass();

// 2.给 exports 对象增长成员

exports.doSomething = function() {};

// 3.经过 return 直接提供接口

   return {

     foo: 'bar',

     doSomething: function() {}

   };

});

 

 

//js/index.js(seajs的使用)

define(function(require, exports, module) {

       // var $ = require("$");

        module.exports= {  

            init: function() {

                console.log('index.js is loaded!');

            }

        };

});

seajs.config({

    base: "./js/lib/",// Sea.js 的基础路径

      alias: {// 别名配置

        '$':'jquery/1.12.3/jquery-1.12.3',

        'jquery':'jquery/1.12.3/jquery-1.12.3',

      },

    paths: {// 路径配置

        'basePath': './js/lib/'

    },

    vars: {// 变量配置

        'jquery_version': 'jquery-1.12.3'

    },

    map: [// 映射配置

        [ '.js', '-debug.js' ]

    ],

    preload: ['$'], //预加载项'$'

    debug: true,// 调试模式

    charset: 'utf-8'// 文件编码

});

seajs.use(['$','./js/ctr/index.js'], function($,index) {
　　$(document).ready(function(){
　　　　index.init();
　　});    　　

});