Blog

懒癌晚期

Project maintained by VirusPC Hosted on GitHub Pages — Theme by mattgraham

Back Home

模块化

模块化是指将一个大的程序文件, 拆分成许多小的文件, 然后将小文件组合起来.

模块化的好处:

防止命名冲突
代码复用
高维护性

CommonJS 的 NodeJS 是针对服务器端的. CommonJS 的 Browserify, AMD, CMD 都是针对浏览器端的.

一个模块只能在另一个模块中被调用. 所有的模块需要汇总到一个主模块中, 然后在页面中加载主模块. (把模块看成c语言里的函数, 把主模块看成main函数, 页面加载主模块即执行main函数)

CommonJS

说明

http://wiki.commonjs.org/wiki/Modules
每个文件都可以当作一个模块
在服务器端: 模块的加载时运行时同步加载的.
在浏览器端: 模块需要提前编译打包处理.
暴露的模块到底是什么?
- 暴露的是moudule.exports这个对象.
exports和module.exports的区别?
- 加载模块后, module.exports和exports指向同一个内存地址.
- 最后暴露出来的始终是module.exports指向的内存地址对应的对象.(```module.exports的指向可能发生改变, 使得它和exports指向不同的内存地址).
- NodeJS开发者建议导出对象使用module.exports = {}, 导出多个方法和变量使用exports.xxx = value.

实现

服务器端实现
- Node.js
- http://nodejs.cn
浏览器端实现
- Browserify
- http://browserify.org
- 也称为CommonJS的浏览器端的打包工具
区别Node与Browerify

语法

定义暴露模块
- module.exports = value
- module.exports.xxx = value
- exports.xxx = value (上一条的简写)
引入使用模块
- let module2 = require(xxx)
- 第三方模块: xxx为模块名
- 自定义模块: xxx为模块文件路径
html页面直接加载模块
```
  <script src="module.js"></script>
```

例子

暴露一个对象

模块文件: modules/module1.js

  module.exports = {
      msg: 'module1',
      foo(){
          console.log(this.msg);
      }
  }

引用文件: index.js

  let module1 = require("./modules/module1");
  module1.foo();

暴露一个函数

模块文件: modules/module2.js

  module.exports = function(){
      console.log("module2");
  }

引用文件: index.js

  let module2 = require("./modules/module2");
  module2();

直接添加属性到exports对象

模块文件: modules/module3.js

  exports.foo = function(){  // module.exports.foo 省略 module 的简写
      console.log("foo() module3");
  }

  /**等价于**/
  /*
  module.exports.foo = function(){
      consojle.log("module3);
  }
  */

引用文件: index.js

  let module3 = require("./modules/module3");
  module3.foo();

模块文件为空

模块文件: modules/module3.js
```
  /* 空 */
```

引用文件: index.js

  let module4 = require("./modules/module4");
  console.log(module4);  // {}, module4是一个空对象

AMD

说明

Asychromous Module Definition(异步模块定义)
https://github.com/amdjs/amdjs-api/wiki/AMD
专门用于浏览器端, 模块的加载是异步的
AMD规范的作者亲自实现了符合AMD规范的requireJS
requireJS 需要有一个主模块, 并且在主模块中对其它所有相关模块的路径进行配置
定义有依赖的模块时: 显式声明, 依赖注入.
与 CommonJS 不同, 其 html 页面引入脚本时最终只引入主模块文件, 其它模块会根据主模块里的配置去找:
```
  <script data-main='index.js' src='lib/require.js'></script>
```
主模块不是 define 的而是个立即执行函数
配置paths时不要加.js文件后缀
有些非自定义模块可能不支持AMD, 或是需要增加其它配置(比如 angular )

实现(仅浏览器端)

Require.js
http://www.requirejs.cn/
http://www.ruanyifeng.com/blog/2012/11/require_js.html

语法(RequireJS)

定义暴露模块

定义没有依赖的模块

  // 定义没有依赖的模块
  define(function(){
      let module = {}
      return module;
  })

定义有依赖的模块

  define(['module1', 'module2'], function(m1, m2){
      let module ={};
      return module; 
  })

主模块引入使用其他模块

  (fucntion(){
        
      requirejs.config({
          baseUrl: './modules/',  // 基本路径
          paths: {  // 配置路径
              module1: './module1',  // 不要加js后缀
              module2: './module2',
              jquery: "../libs/jquery",  // jquery可以直接按自定义模块配置
              angular: '../libs/angular'
          },
          shim: {  // angular需要单独增加配置
              angular: {
                  exports: 'angular'
              }
          }
      })

      requirejs(['module1'], function(module1) {
          module1.doSomething();
      })

  })()

html页面直接加载主模块

  <script data-main="index.js" src="lib/require.js"></script>

例子

目录结构
requirejs
    |-js
        |-libs
            |-require.js
        |-modules
            |-alerter.js
            |-dataSercie.js
        |-main.js
    |-index.html

模块文件

  ```js
  // 定义无依赖的模块
  define(function () {
      let name = "dataService.js";
      function getName(){
          return name;
      }
      // 暴露模块
      return {getName}
  });

  ```js
  define(['dataService'], function(dataService){
      let msg = 'alerter.js';
      function showMsg(){
          console.log(msg, dataService.getName());
      }
      // 暴露模块
      return {showMsg};
  });

主模块引入其他模块

  ```js
  (function() {
      /* 配置模块 */
      requriejs.config({
          baseUrl: 'js',
          paths: {
              dataService: '.modules/dataService',
              alerter: './modules/alerter'
          }
      })

      /* 使用模块 */
      requriejs(['alerter'], function(alerter){
          alerter.showMsg();
      })
  })();

主页面引入主模块

  ```html
      <script data-main='js/main.js' src="js/require.js"> </script>

CMD

说明

https://github.com/seajs/seajs/issues/242
专门用于浏览器端, 模块的加载可以是同步, 也可以是异步的
模块使用时才会加载执行
CommonJS与AMD的结合体
阿里巴巴出品
相对另外三个不太重要(官网都出售了…)

实现

Sea.js
http://www.zhangxinxu.com/sp/seajs/

语法

定义暴露模块

定义没有依赖的模块

  define(function(require, exports, module){
      exports.xxx = value;
      module.exports = value;
  })

定义有依赖的模块

  define(function(require, exports, module){
      /* 引入依赖模块(同步) */
      let module2 = require('./module2');
      // 使用module2

      /* 引入依赖模块(异步) */
      require.async('./module3', function(m3){
          // 使用module3
      });

      /* 暴露模块 */
      exports.xxx = value;
  })

主模块引入使用其他模块

  define(function (require){
      let m1 = require("./module1");
      let m4 = require("./module4");
      m1.show();
      m2.show();
  })

html页面加载主模块

  <script type='text/javascript' src='js/libs/sea.js'></script>
  <script type='text/javascript'>
      seajs.use('./js/modules/main.js');  // 主模块路径
  </script>

例子

目录结构
CMD
    |-js
        |-libs
            |-sea.js
        |-modules
            |-module1.js
            |-module2.js
            |-module3.js
            |-module4.js
            |main.js
    |-index.html

模块文件

module1.js, 没有任何依赖关系

  define(function(require, exports, module){
      let msg = 'module1';
      function foo(){
          return msg;
      }
      module.exports = {foo};
  })

module2.js, 被module4依赖

  define(function(require, exports, module){
      let msg = 'module2';
      function bar(){
          return msg;
      }
      module.exports = bar;
  })

module3.js, 被module4依赖

  define(function(require, exports, module){
      let msg = 'module3';
      function fun(){
          return msg;
      }
      module.exports = {fun};
  })

module4.js, 依赖于module2和module3

  define(function(require, exports, module){
      let msg = 'module4';
      // 同步引入
      let module2 = require("./module2");
      module2();
      // 异步引入
      require.async("./module3", function(module3){
          module3.fun();
      })
      function fun2(){
          console.log("message");
      }
      exports.fun2 = fun2;
  })

主模块引入其他模块

  ```js
  define(function(require){
      let module1 = require('./module1');
      module1.foo();
      let module4 = require('./module4');
      module4.fun2();
  })

html页面直接引入主模块

  ```html
  <script type='text/javascript' src='js/libs/sea.js'></script>
  <script type='text/javascript'>
  seajs.use('./js/modules/main.js');
  </script>

控制台打印输出

  module1
  module2
  module4
  module3

ES6

说明

http://es6.ruanyifeng.com/#docs/module
依赖模块需要编译打包处理
最重要最常用的一个规范

实现

语法

暴露模块

分别暴露.

  export function foo(){}
  export let arr = [];

统一暴露.

  function foo(){}
  let arr = [];
  export {foo, arr}

默认暴露. 可以暴露任意数据类型. 暴露什么, 对面接收什么.
```
  export default () => {
      //
  }
```

引入模块

通用的引入方式.

模块为分别暴露或统一暴露

  import * as m1 from "./module1"
  m1.doSomething();

模块为默认暴露

  import * as m2 from "./module2"
  m2.default.doSomething();

解构赋值引入.

模块为分别暴露或统一暴露

  import {foo, bar as alias} from './module2'
  foo();

模块为默认暴露

  import {default as m3} from "./module2"
  m3.doSomething();

默认引入.
- 仅适用于默认暴露
```
  import m2 from "./module2"
```

html页面直接引入模块

正确做法

  <script type="module" src="./module">
      module.doSomething();
  </script>
  <script type="module">
      import module from "./module";
      module.doSomething();
  </script>

错误做法

  <script type="module">
      import module from "./module";
  </script>
  <script>
      module.doSomething();  // 取不到module对象, 必须在module脚本引入后立刻使用
  </script>

转换成ES5(浏览器兼容)

总体思路
1. 使用Babel将ES6编译为ES5代码
2. 使用Browerify编译打包js
具体步骤
1. 定义package.json文件
```
 {
     "name": "ex6-babel-browserify",
     "version": "1.0.0"
 }
```
2. 安装 babel-cli(babel命令行工具), babel-preset-es2015(将 es6 转换成 es5 的所有插件打包) 和browserify
  - npm install babel-cli browserify -g
  - npm install babel-preset-es2015 --save-dev
  - preset 预设(将 es6 转换成 es5 的所有插件打包)
3. 定义.babelrc文件. babel干活之前会先读这个配置文件, 读完之后才知道要去干什么. rc是run control的缩写.
```
 {
     "presets": ["es2015"]
 }
```
4. 编写遵循es6规范的代码
5. 编译
  - 使用 Babel 将 ES6 编译为 ES5 代码(但包含 CommonJS 语法):
    babel js/src -d js/lib
  - 使用 Browserify 编译 js:
    browserify js/lib/app.js -o js/lib/bundle.js

一些相关问题

为什么CommonJS不适用于浏览器端

假设有如下代码:

let math = require('math');
math.add(2, 3);

第二行math.add(2, 3)，在第一行require(‘math’)之后运行，因此必须等math.js加载完成。也就是说，如果加载时间很长，整个应用就会停在那里等。

这对服务器端不是一个问题，因为所有的模块都存放在本地硬盘，可以同步加载完成，等待时间就是硬盘的读取时间。但是，对于浏览器，这却是一个大问题，因为模块都放在服务器端，等待时间取决于网速的快慢，可能要等很长时间，浏览器处于”假死”状态。

因此，浏览器端的模块，不能采用”同步加载”（synchronous），只能采用”异步加载”（asynchronous）。这就是AMD规范诞生的背景。

AMD和CMD对比

适用于服务器端或浏览器端?
- 都适用于B(浏览器端).
产生原因
- AMD 是 RequireJS 在推广过程中对模块定义的规范化产出。
- CMD 是 SeaJS 在推广过程中对模块定义的规范化产出。
- 类似的还有 CommonJS Modules/2.0 规范，是 BravoJS 在推广过程中对模块定义的规范化产出。
依赖模块执行时间
- 对于依赖的模块，AMD 是提前执行，CMD 是延迟执行。不过 RequireJS 从 2.0 开始，也改成可以延迟执行（根据写法不同，处理方式不同）。CMD 推崇 as lazy as possible.
依赖模块引入位置
- CMD 推崇依赖就近. 用的时候再引入.
- AMD 推崇依赖前置. 在一开始就全部引入好.
其他
- https://github.com/seajs/seajs/issues/277

Blog

模块化

模块化相关规范

CommonJS

说明

实现

语法

例子

AMD

说明

实现(仅浏览器端)

语法(RequireJS)

例子

CMD

说明

实现

语法

例子

ES6

说明

实现

语法

转换成ES5(浏览器兼容)

一些相关问题

为什么CommonJS不适用于浏览器端

AMD和CMD对比

参考资料