JS模块化规范CMD之SeaJS

Posted 2020-08-17

 

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 向外暴露接口对象
      })
    }