JS模块化方案(2)之CMD 模块(SeaJS)方案

一、 CMD

1、基本介绍
SeaJS 是一个适用于 Web 浏览器端的模块加载器。使用 SeaJS，可以更好地组织 JavaScript 代码。
2、实现库：seajs 1.3.1
Sea.js 手册与文档

3、CMD 模块定义规范:

二、基础语法：

1、模块定义
define
使用全局函数 define 来定义模块：

define(function(require, exports, module) {
  // The module code goes here  
});

require 函数用来访问其他模块提供的 API.
exports 用来向外提供模块的 API.
module 参数存储模块的元信息。
module.exports：
exports 对象由模块系统创建，这不能满足开发者的所有需求， 有时候会希望 exports 是某个类的实例。 这时可用 module.exports 来实现：

define(function(require, exports, module) {

   function common(){
      return "common";
   }

   // 对外提供接口
   //exports =common;
   module.exports = common;
})

2、如何依赖模块

//require函数的返回值：define中的module.exports
var common =  require('./common/common.js');

3、页面中加载模块

3.1、引用SeaJa库

<script src="https://cdn.bootcss.com/seajs/1.3.1/sea.min.js" type="text/javascript" charset="utf-8"></script>

3.2 使用模块

seajs.use(['./js/damu.js', './js/hsp.js'], function(damu, hsp) {
  damu.B();
  hsp.B();
});

3.3加载模块
加载单个入口模块
加载多个入口模块

 /* 加载单个入口模块
        * 注意：同时加载多个模块时，顺序无法控制
        * */
        /* seajs.use('./js/damu.js',function(damu){
            damu.A();
         })

         seajs.use('./js/hsp.js',function(hsp){
            hsp.A();
         })*/
        /* 加载多个入口模块
        注意：可以控制顺序
         */
         seajs.use(['./js/damu.js', './js/hsp.js'], function(damu, hsp) {
           damu.B();
           hsp.B();
         });

三、案例：

index.html

    <script src="https://cdn.bootcss.com/seajs/1.3.1/sea.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        /* 加载单个入口模块
        * 注意：同时加载多个模块时，顺序无法控制
        * */
        /* seajs.use('./js/damu.js',function(damu){
            damu.A();
         })

         seajs.use('./js/hsp.js',function(hsp){
            hsp.A();
         })*/
        /* 加载多个入口模块
        注意：可以控制顺序
         */
         seajs.use(['./js/damu.js', './js/hsp.js'], function(damu, hsp) {
           damu.B();
           hsp.B();
         });
</script>

common.js

define(function(require, exports, module) {

    function common(){
        return "common";
    }

    // 对外提供接口
    //exports =common;
    module.exports = common;
})

damu.js

define(function(require, exports, module) {

    function A(){
        //require函数的返回值：define中的module.exports
        var common =  require('./common/common.js');
        console.log("A from damu&"+ common());
    }

    function B(){
        var common =  require('./common/common.js');
        console.log("B from damu&"+ common());
    }

    function C(){
        var common =  require('./common/common.js');
        console.log("C from damu&"+ common());
    }

    exports.A =A;
    exports.B =B;
    exports.C =C
    /*
     * 天坑！！！
     * exports = {
        A:A,
        B:B,
        C:C
    }*/
    /*module.exports = {
        A:A,
        B:B,
        C:C
    }*/
})

hsp.js

define(function(require, exports, module) {

    function A(){
        //require函数的返回值：define中的module.exports
        var common =  require('./common/common.js');
        console.log("A from hsp&"+ common());
    }

    function B(){
        var common =  require('./common/common.js');
        console.log("B from hsp&"+ common());
    }

    function C(){
        var common =  require('./common/common.js');
        console.log("C from hsp&"+ common());
    }

    module.exports = {
        A:A,
        B:B,
        C:C
    }
})

tg.js

define(function(require, exports, module) {

    function A(){
        //require函数的返回值：define中的module.exports
        var common =  require('./common/common.js');
        console.log("A from tg&"+ common());
    }

    function B(){
        var common =  require('./common/common.js');
        console.log("B from tg&"+ common());
    }

    function C(){
        var common =  require('./common/common.js');
        console.log("C from tg&"+ common());
    }

    module.exports = {
        A:A,
        B:B,
        C:C
    }
})

四、使用细节和注意事项

1、路径问题：
模块内参照于当前模块；
业务代码参照于代码的调用位置。
如下：
'./js/damu.js' ：./ 参考代码运行位置
模块中 require('./common/common.js'); ：./ 参考当前模块

2、天坑：exports和module.exports的区别

• 模块对象永远是module.exports；
• require函数的返回值：define中的module.exports
• 默认情况下exports和module.exports指向同一个引用。

      向外暴露函数
         module.exports = function(){}
      向外暴露对象
         module.exports = {。。。}
         exports.a=a
         exports.b=b   ./才表示当前路径