JS模块化规范CMD之SeaJS

 

1. 在接触规范以前，咱们用模块化来封装代码大多为以下：

;(function (形参模块名, 依赖项, 依赖项) {
  // 经过 形参模块名 修改模块

  window.模块名 = 形参模块名
 })(window.模块名 || {}, 依赖项, 依赖项)

1. 分号是什么做用？

   答：为了防止前面的代码没有添加分号形成语法解析错误，也可能会是 "!"， "+" 等

2. 为何要将代码放入一个自执行函数中

   答：为了不全局命名空间污染，核心就是利用函数的私有做用域

3. 为何将依赖项做为参数传进来

   答：为了减小做用域查找机制

2. 常见的 JavaScript 模块化规范

规范其实就是这些库在推广的过程当中逐渐造成的一套规则。

所谓的规范也就是：

定义了模块的书写格式

以及模块之间的交互规则

Node 环境

CommonJS

浏览器环境

AMD

    RequireJS
CMD Common Module Definition

    CMD 就是 SeaJS 这个模块加载器在推广的过程当中定义的一个模块规范
ECMAScript

    ECMAScript 6

CMD、AMD、CommonJS 都是社区制定出来的模块规范，他们的目的都是为了解决 JavaScript 没有模块化系统的问题。 他们都有如何定义模块成员，以及模块成员之间如何进行通讯交互的规则。

1.SeaJS基本介绍

1. 在SeaJS中，一个js脚本文件就是一个模块

   模块具备两个特性：

   1. 模块要有一个私有做用域：避免全局命名空间污染
   2. 模块能够向外导出内部成员，供别的模块加载和使用

   因此：只要使用了SeaJS，那全部的js文件都经过define函数去定义该模块,而且将全部的模块代码写到 define 定义的回调函数中

   define 方法的回调函数中分别传递三个固定参数：

   1. require：
   2. exports
   3. module

2. 每个模块中有一个require函数能够用来加载指定模块，须要接收一个模块路径

   1. 加载指定模块而且执行该模块中的代码
   2. 获得该模块中的暴露的接口对象：module.exports

3. 模块的做用域和导出

   模块天生就是一个私有做用域，在该模块内部定义的全部成员

   若是模块内部的成员想要被外部所访问:

   必须经过使用 module.exports(exports) 对象向外暴露

   require 函数加载模块的时候，会自动拿到模块内部的 module.exports 对象

2.SeaJS详细介绍

1. 使用

index.html

    <script src="./js/sea.js"></script>
    <script>

      seajs.use('./js/main');
    </script>

main.js

    define(function (require, exports, module) {

      var moduleA = require('add.js')

      console.log(moduleA.add(10,20))
    })

add.js

    define(function (require, exports, module) {

      //隐性:var exports = module.exports  

      function add(a, b){
        return +a + +b;
      }

      module.exports.add = add;

      //隐性:return module.exports  
    })

exports 和 module.exports 的区别：如下事例只能用module.exports

    define(function (require, exports, module) {

      //隐性:var exports = module.exports  

      module.exports= function(){

      }

      //隐性:return module.exports  
    })

2. 配置（多放在入口文件中）

seajs.config({

      // 别名配置
      alias: {
        'es5-safe': 'gallery/es5-safe/0.9.3/es5-safe',
        'json': 'gallery/json/1.0.2/json',
        'jquery': 'jquery/jquery/1.10.1/jquery'
      },

      // 路径配置
      paths: {
        'gallery': 'https://a.alipayobjects.com/gallery'
      },

      // Sea.js 的基础路径
      base: 'http://example.com/path/to/base/',

    });

3. API 详解

1. seajs.use

   加载模块，启动模块系统。

   加载一个模块 seajs.use('id')
   
       加载一个模块，在加载完成时，执行回调 seajs.use('id', callback)
   
       加载多个模块，加载完成时，执行回调 seajs.use(['id1','id2',...],callback)
   
   **注意**：
   
       在调用 seajs.use 以前，须要先引入 sea.js 文件
   
       seajs.use 与 DOM ready 事件没有任何关系。若是某些操做要确保在 DOM ready 后执行，须要使用 jquery 等类库来保证
   
       seajs.use 理论上只用于加载启动，不该该出如今 define 中的模块代码里

2. define(factory)

   define 是一个全局函数，用来定义模块。

   define 接受 factory 参数，factory 能够是一个函数，也能够是一个对象或字符串。
   
       factory 为对象、字符串时，表示模块的接口就是该对象、字符串。
   
       factory 是一个对象时
   
       define({})
       factory 是一个字符串时
   
       define('hello')
       factory 是一个函数时
   
       define(function(require, exports, module){})

3. require

   require 用来加载一个 js 文件模块， require 用来获取指定模块的接口对象 module.exports。

   require 在加载和执行的时候，js 会按照同步的方式和执行。

   使用注意：

   正确拼写
   
       模块 factory 构造方法的第一个参数 必须 命名为 require
   
   不要修改
   
       不要重命名 require 函数，或在任何做用域中给 require 从新赋值
   
   使用字符串直接量
   
       require 的参数值 必须 是字符串直接量

   Tips: 把 require 看作是语法关键字就好啦

4. 模块标识

   模块标识是一个字符串，用来标识模块。

   模块标识能够不包含文件后缀名，好比 .js
   
   seajs 推荐不加 .js 文件模块后缀
   
   模块标识能够是 相对 或 顶级 标识

   相对标识

   相对标识以 . 开头，永远相对于当前模块所处的路径来解析。

   顶级标识

   顶级标识不以 . 或 / 开始，会相对模块系统的基础路径（base路径，默认是 sea.js 文件所属的路径）。 能够手动配置 base 路径。
   
   seajs.config({
     base: './js'
   })

   普通路径

   除了相对和顶级标识以外的标识都是普通路径。 普通路径的解析规则，会相对当前页面解析。

   // 假设当前页面是 http://example.com/path/to/page/index.html
   
   // 绝对路径是普通路径：
   require.resolve('http://cdn.com/js/a');
   // => http://cdn.com/js/a.js
   
   // 根路径是普通路径：
   require.resolve('/js/b');
   // => http://example.com/js/b.js
   
   // use 中的相对路径始终是普通路径：
   seajs.use('./c');
     // => 加载的是 http://example.com/path/to/page/c.js
   
   seajs.use('../d');
     // => 加载的是 http://example.com/path/to/d.js

   Tips:

   顶级标识始终相对 base 基础路径解析。

   若是不设置，base 路径默认就是 sea.js 库文件所属的路径
   
       能够经过 seajs.config({ base: '基础路径' }) 来配置基础路径
   
       绝对路径和根路径始终相对当前页面解析。
   
       相对标识永远相对于当前文件
   
       seajs.use 中的相对路径始终相对当前页面来解析。

5. module

   module 是一个对象，上面存储了与当前模块相关联的一些属性和方法。

   module.id
   模块的惟一标识，能够经过 define 方法的第一个参数来指定，默认为该模块文件的绝对路径
   
   module.uri
   模块的绝对路径
   
   module.dependencies
   dependencies 是一个数组，表示当前模块的依赖
   
   module.exports
   当前模块对外提供的接口对象
   
   至关于每一个模块内部最终都执行了这么一句话：return module.exports

   模块与模块之间的通讯接口

6. exports

   exports 仅仅是 module.exports 的一个引用。 也就是说修改了 exports 就至关于修改了 module.exports。

   可是一旦在 factory 内部给 exports 从新赋值，并不会改变 module.exports 的值。 所以给 exports 赋值是无效的。

   exports 和 module.exports 的区别：

   每一个模块内部对外处处的接口对象始终都是 module.exports
   
   能够经过修改 module.exports 或给它赋值改变模块接口对象
   
   exports 是 module.exports 的一个引用，就比如在每个模块定义最开始的地方写了这么一句代码：var exports = module.exports
   
   关于这俩哥们儿的区别请分析一下代码：
   
   var module = {
     exports: {}
   }
   
   function changeExports (exports, module) {
     // var exports = module.exports
        exports.foo = 'bar'
   
        // 这里赋值拿不到，不要使用使用
        // exports = function () {}
        return module.exports
   }
   
   changeExports(module.exports, module)

   那为啥要有 exports ？

   为了开发体验，API更友好，使用 exports 的时候，能够少写一个点儿。

   若是你实在分不清楚 exports 和 module.exports 之间的区别，就只记得 module.exports 就能够了。

4. 如何将一个普通的模块文件改造为兼容 CMD 规范的模块

if (typeof define === "function" && define.cmd) {

         // 有 Sea.js 等 CMD 模块加载器存在
         define(function (require, exports, module) {
           // 使用 module.exports 向外暴露接口对象
      })
    }