前端工程师必备：前端的模块化

时间  2019-11-11
标签 前端 工程师 必备 模块化 繁體版
原文   原文链接

JS模块化

模块化的理解

  • 什么是模块？javascript

    • 将一个复杂的程序依据必定的规则(规范)封装成几个块(文件), 并进行组合在一块儿；
    • 块的内部数据/实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通讯；

  • 一个模块的组成css

    • 数据--->内部的属性；
    • 操做数据的行为--->内部的函数；
  • 模块化是指解决一个复杂的问题时自顶向下把系统划分红若干模块的过程，有多种属性，分别反映其内部特性；
  • 模块化编码：编码时是按照模块一个一个编码的, 整个项目就是一个模块化的项目；

非模块化的问题

  • 页面加载多个js的问题：
<script type="text/javascript" src="module1.js"></script>
<script type="text/javascript" src="module2.js"></script>
<script type="text/javascript" src="module3.js"></script>
<script type="text/javascript" src="module4.js"></script>

  • 发生问题：html

    • 难以维护 ；
    • 依赖模糊；
    • 请求过多；
  • 因此，这些问题能够经过现代模块化编码和项目构建来解决；

模块化的优势

  • 更好地分离：避免一个页面中放置多个script标签，而只需加载一个须要的总体模块便可，这样对于HTML和JavaScript分离颇有好处；
  • 更好的代码组织方式：有利于后期更好的维护代码；
  • 按需加载：提升使用性能，和下载速度，按需求加载须要的模块
  • 避免命名冲突：JavaScript自己是没有命名空间，常常会有命名冲突，模块化就能使模块内的任何形式的命名都不会再和其余模块有冲突。
  • 更好的依赖处理：使用模块化，只须要在模块内部申明好依赖的就行，增长删除都直接修改模块便可，在调用的时候也不用管该模块依赖了哪些其余模块。

模块化的发展历程

原始写法

  • 只是把不一样的函数简单地放在一块儿，就算一个模块；
function fun1(){
　　//...
}
function fun2(){
　　//...
}
//上面的函数fun1，fun2组成了一个模块，使用的时候直接调用某个函数就好了。

  • 缺点：java

    • "污染"了全局变量，没法保证不与其余模块发生变量名冲突；
    • 模块成员之间看不出直接关系。

对象写法

  • 为了解决污染全局变量的问题，能够把模块写成一个对象，全部的模块成员都放到这个对象里面。
　var module1 = new Object({
    count : 0,
    fun1 : function (){
　　　　　//...
　　  },
　　fun2 : function (){
　　　　　//...
　　　}
　});
　//这个里面的fun1和fun2都封装在一个赌侠宁里，能够经过对象.方法的形式进行调用；
　module1.fun1();

  • 优势：node

    • 减小了全局上的变量数目；

  • 缺点：jquery

    • 本质是对象，而这个对象会暴露全部模块成员，内部状态能够被外部改写。

当即执行函数(IIFE模式)

  • 避免暴露私有成员，因此使用当即执行函数（自调函数，IIFE）；
  • 做用: 数据是私有的, 外部只能经过暴露的方法操做
var module1 = (function(){
    var count = 0;
    var fun1 = function(){
        //...
    }
    var fun2 = function(){
        //...
    }
    //将想要暴露的内容放置到一个对象中，经过return返回到全局做用域。
    return{
        fun1:fun1,
        fun2:fun2
    }
})()
//这样的话只能在全局做用域中读到fun1和fun2，可是读不到变量count，也修改不了了。
//问题：当前这个模块依赖另外一个模块怎么办？

IIFE的加强（引入依赖）

  • 若是一个模块很大，必须分红几个部分，或者一个模块须要继承另外一个模块，这时就有必要采用"加强模式"；
  • IIFE模式加强：引入依赖；
  • 这就是现代模块实现的基石；
var module1 = (function (mod){
　　mod.fun3 = function () {
　　　//...
    };
    return mod;
})(module1);
//为module1模块添加了一个新方法fun3()，而后返回新的module1模块。

//引入jquery到项目中；
var Module = (function($){
    var _$body = $("body");     // we can use jQuery now!
    var foo = function(){
    console.log(_$body);    // 特权方法
    }
  // Revelation Pattern
      return {
          foo: foo
      }
})(jQuery)
Module.foo();

js模块化须要解决那些问题：

  • 1.如何安全的包装一个模块的代码？（不污染模块外的任何代码）
  • 2.如何惟一标识一个模块？
  • 3.如何优雅的把模块的API暴漏出去？（不能增长全局变量）
  • 4.如何方便的使用所依赖的模块？

模块化规范

  • Node: 服务器端
  • Browserify : 浏览器端

CommonJS：服务器端

  • 概述git

    • Node 应用由模块组成，采用 CommonJS 模块规范。
    • CommonJS规范规定，每一个模块内部，module变量表明当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，实际上是加载该模块的module.exports属性。

  • 特色es6

    • 全部代码都运行在模块做用域，不会污染全局做用域。
    • 模块能够屡次加载，可是只会在第一次加载时运行一次，而后运行结果就被缓存了，之后再加载，就直接读取缓存结果。要想让模块再次运行，必须清除缓存。
    • 模块加载的顺序，按照其在代码中出现的顺序。

  • 基本语法:github

    • 定义暴露模块 : exports
    exports.xxx = value
// 经过module.exports指定暴露的对象value
module.exports = value
    • 引入模块 : require
    var module = require('模块相对路径')

  • 引入模块发生在何时?express

    • Node：运行时, 动态同步引入；
    • Browserify：在运行前对模块进行编译/转译/打包的处理(已经将依赖的模块包含进来了), 运行的是打包生成的js, 运行时不须要再从远程引入依赖模块；

CommonJS通用的模块规范（同步）

  • Node内部提供一个Module构建函数。全部模块都是Module的实例。
  • 每一个模块内部，都有一个module对象，表明当前模块。
  • module.exports属性表示当前模块对外输出的接口，其余文件加载该模块，实际上就是读取module.exports变量。
  • Node为每一个模块提供一个exports变量，指向module.exports。
  • 若是一个模块的对外接口，就是一个单一的值，不能使用exports输出，只能使用module.exports输出。

  • Modules/1.0规范包含内容：

    1. 模块的标识应遵循的规则（书写规范）
    2. 定义全局函数require，经过传入模块标识来引入其余模块，执行的结果即为模块暴露出来的API；
    3. 若是被require函数引入的模块中也包含依赖，那么依次加载这些依赖；
    4. 若是引入模块失败，那么require函数应该报一个异常；
    5. 模块经过变量exports来向外暴露API，exports赋值暴露的只能是一个对象exports = {Obj}，暴露的API须做为此对象的属性。exports本质是引入了module.exports的对象。不能直接将exports变量指向一个值，由于这样等于切断了exports与module.exports的联系。
    6. 若是暴露的不是变量exports，而是module.exports。module变量表明当前模块，这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，实际上是加载该模块的module.exports属性。exports=module.exports={Obj}
node中的commonJS教程
  • 1.安装node.js;
  • 2.建立项目结构
//结构以下
|-modules
    |-module1.js//待引入模块1
    |-module2.js//待引入模块2
    |-module3.js//待引入模块3
|-app.js//主模块
|-package.json
    {
      "name": "commonjsnode",
      "version": "1.0.0"
    }

  • 3.下载第三方模块：举例express

    npm i express --save
  • 4.模块化编码
// module1 
// 使用module.exports = value向外暴露一个对象
module.exports = {
    name: 'this is module1',
    foo(){
        console.log('module1 foo()');
    }
}
// module2 
// 使用module.exports = value向外暴露一个函数 
module.exports = function () {
    console.log('module2()');
}
// module3 
// 使用exports.xxx = value向外暴露一个对象
 exports.foo = function () {
     console.log('module3 foo()');
 };
 exports.bar = function () {
     console.log('module3 bar()');
 };
 exports.name = 'this is module3'

//app.js文件
var uniq = require('uniq');
//引用模块
let module1 = require('./modules/module1');
let module2 = require('./modules/module2');
let module3 = require('./modules/module3');
//使用模块
module1.foo();
module2();
module3.foo();
module3.bar();
module3.name;

  • 5.经过node运行app.js

    • 命令：node.app.js
    • 工具：右键-->运行
浏览器中的commonJS教程
  • 借助Browserify

  • 步骤

    1. 建立项目结构
    |-js
     |-dist //打包生成文件的目录
     |-src //源码所在的目录
           |-module1.js
           |-module2.js
           |-module3.js
           |-app.js //应用主源文件
|-index.html //浏览器上的页面
|-package.json
    {
       "name": "browserify-test",
       "version": "1.0.0"
    }

    1. 下载browserify

      • 全局: npm install browserify -g
      • 局部: npm install browserify --save-dev
    2. 定义模块代码：index.html文件要运行在浏览器上，须要借助browserify将app.js文件打包编译，若是直接在index.html引入app.js就会报错。
    3. 打包处理js：根目录下运行browserify js/src/app.js -o js/dist/bundle.js
    4. 页面使用引入:
    <script type="text/javascript" src="js/dist/bundle.js"></script>

AMD : 浏览器端

  • CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操做。
  • AMD规范则是非同步加载模块，容许指定回调函数，能够实现异步加载依赖模块，而且会提早加载；
  • 因为Node.js主要用于服务器编程，模块文件通常都已经存在于本地硬盘，因此加载起来比较快，不用考虑非同步加载的方式，因此CommonJS规范比较适用。
  • 若是是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，所以浏览器端通常采用AMD规范。

语法

AMD规范基本语法
  • 定义暴露模块: define([依赖模块名], function(){return 模块对象})
  • 引入模块: require(['模块1', '模块2', '模块3'], function(m1, m2){//使用模块对象})
兼容CommonJS规范的输出模块
define(function (require, exports, module) { 
    var reqModule = require("./someModule");
    requModule.test();
    exports.asplode = function () {
        //someing
    }
});

AMD：异步模块定义规范（预加载）

  • AMD规范：https://github.com/amdjs/amdj...
  • AMD是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。
  • 它采用异步方式加载模块，模块的加载不影响它后面语句的运行。全部依赖这个模块的语句，都定义在一个回调函数中，等到加载完成以后，这个回调函数才会运行。

  • AMD也采用require()语句加载模块，可是不一样于CommonJS，它要求两个参数：

    require([module], callback);
    • 第一个参数[module]，是一个数组，里面的成员就是要加载的模块；
    • 第二个参数callback，则是加载成功以后的回调函数。
  • 目前，主要有两个Javascript库实现了AMD规范：RequireJS和curl.js。

RequireJS

  • 优势

    • 实现js文件的异步加载，避免网页失去响应；
    • 管理模块之间的依赖性，便于代码的编写和维护。
require.js使用教程

  1. 下载require.js, 并引入

  2. 建立项目结构
|-js
  |-libs
    |-require.js // 引入的require.js
  |-modules
    |-alerter.js
    |-dataService.js
  |-main.js
|-index.html

  1. 定义require.js的模块代码

    • require.js加载的模块，采用AMD规范。也就是说，模块必须按照AMD的规定来写。

    • 具体来讲，就是模块必须采用特定的define()函数来定义；

      • 若是一个模块不依赖其余模块，那么能够直接定义在define()函数之中。
define(['myLib'], function(myLib){
　 function foo(){
　　　　myLib.doSomething();
　　}
　　// 暴露模块
　　return {foo : foo};
});
//当require()函数加载上面这个模块的时候，就会先加载myLib.js文件。
- 若是这个模块还依赖其余模块，那么define()函数的第一个参数，必须是一个数组，指明该模块的依赖性；

    ```
    // dataService.js
    define(function () {
      let msg = 'this is dataService'
      function getMsg() {
        return msg.toUpperCase()
      }
      return {getMsg}
    })
    
    // alerter.js
    define(['dataService', 'jquery'], function (dataService, $) {
      let name = 'Tom2'
      function showMsg() {
        $('body').css('background', 'gray')
        alert(dataService.getMsg() + ', ' + name)
      }
      return {showMsg}
    })
    ```

  1. 应用主(入口)js: main.js

    • 使用require.config()方法，咱们能够对模块的加载行为进行自定义。require.config()就写在主模块main.js的头部，参数就是一个对象，这个对象的paths属性指定各个模块的加载路径。
    (function () {
    //配置
    require.config({
      //基本路径
      baseUrl: "js/",
      //模块标识名与模块路径映射
      paths: {
        "alerter": "modules/alerter",//此处不能写成alerter.js,会报错
        "dataService": "modules/dataService",
      }
    })
    
    //引入使用模块
    require( ['alerter'], function(alerter) {
      alerter.showMsg()
    })
  })()
  2. 页面使用模块:
<script data-main="js/main" src="js/libs/require.js"></script>
定义模块
  • require.config()接受一个配置对象，这个对象除了有前面说过的paths属性以外，还有一个shim属性，专门用来配置不兼容的模块。

  • 具体来讲，每一个模块要定义：

    • 一、exports值（输出的变量名），代表这个模块外部调用时的名称；
    • 二、deps数组，代表该模块的依赖性。

  • 支持的配置项：

    • baseUrl ：全部模块的查找根路径。

      • 当加载纯.js文件(依赖字串以/开头，或者以.js结尾，或者含有协议)，不会使用baseUrl。
      • 如未显式设置baseUrl，则默认值是加载require.js的HTML所处的位置。若是用了data-main属性，则该路径就变成baseUrl。
      • baseUrl可跟require.js页面处于不一样的域下，RequireJS脚本的加载是跨域的。惟一的限制是使用text! plugins加载文本内容时，这些路径应跟页面同域，至少在开发时应这样。优化工具会将text! plugin资源内联，所以在使用优化工具以后你可使用跨域引用text! plugin资源的那些资源。

    • paths：path映射那些不直接放置于baseUrl下的模块名。

      • 设置path时起始位置是相对于baseUrl的，除非该path设置以"/"开头或含有URL协议（如http:）。
      • 用于模块名的path不该含有.js后缀，由于一个path有可能映射到一个目录。路径解析机制会自动在映射模块名到path时添加上.js后缀。在文本模版之类的场景中使用require.toUrl()时它也会添加合适的后缀。
      • 在浏览器中运行时，可指定路径的备选(fallbacks)，以实现诸如首先指定了从CDN中加载，一旦CDN加载失败则从本地位置中加载这类的机制；
    • shim: 为那些没有使用define()来声明依赖关系、设置模块的"浏览器全局变量注入"型脚本作依赖和导出配置。
使用第三方基于require.js的框架(jquery)
  • 将jquery的库文件导入到项目: js/libs/jquery-1.10.1.js
  • 在main.js中配置jquery路径
paths: {
   'jquery': 'libs/jquery-1.10.1'
}
  • 在alerter.js中使用jquery
define(['dataService', 'jquery'], function (dataService, \$) {
     var name = 'xfzhang'
     function showMsg() {
         $('body').css({background : 'red'})
         alert(name + ' '+dataService.getMsg())
     }
     return {showMsg}
 })
使用第三方不基于require.js的框架(angular)

  • 将angular.js导入项目：js/libs/angular.js

    • 流行的函数库（好比jQuery）符合AMD规范，更多的库并不符合。这样的模块在用require()加载以前，要先用require.config()方法，定义它们的一些特征。
// main.js中配置
(function () {
 //配置
 require.config({
   //基本路径
   baseUrl: "js/",
   //模块标识名与模块路径映射
   paths: {
     //第三方库做为模块
     'jquery' : './libs/jquery-1.10.1',
     'angular' : './libs/angular',
     //自定义模块
     "alerter": "./modules/alerter",
     "dataService": "./modules/dataService"
   },
   /*
    配置不兼容AMD的模块
    exports : 指定与相对应的模块名对应的模块对象
    */
   shim: {
     'angular' : {
       exports : 'angular'
     }
   }
 })
 //引入使用模块
 require( ['alerter', 'angular'], function(alerter, angular) {
     alerter.showMsg()
     console.log(angular);
 })
})()

CMD : 浏览器端

  • CMD规范：https://github.com/seajs/seaj...
  • CMD规范专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行。
  • CMD规范整合了CommonJS和AMD规范的特色。
  • 在 Sea.js 中，全部 JavaScript 模块都遵循 CMD模块定义规范

  • 基本语法

    • 定义暴露模块:

      // 没有依赖的模块
define(function(require, module, exports){
   let value = 'xxx';
   //经过require引入依赖模块
   //经过module.exports/exports来暴露模块
   exports.xxx = value
   module.exports = value
})
// 有依赖的模块
define(function(require, exports, module){
   //引入依赖模块(同步)
   var module2 = require('./module2')
   //引入依赖模块(异步)
   require.async('./module3', function (m3) {
       ......
   })
   //暴露模块
   exports.xxx = value
})
    • 使用模块seajs.use(['模块1', '模块2'])

sea.js简单使用教程

  1. 下载sea.js, 并引入

    define()
exports
module.exports
    • 如何依赖模块：require()
    • 如何使用模块： seajs.use()
  2. 建立项目结构
|-js
  |-libs
    |-sea.js
  |-modules
    |-module1.js
    |-module2.js
    |-module3.js
    |-module4.js
    |-main.js
|-index.html

  1. 定义sea.js的模块代码

    • module1.js

      define(function (require, exports, module) {
  //内部变量数据
  var data = 'this is module1'
  //内部函数
  function show() {
    console.log('module1 show() ' + data)
  }
  //向外暴露
  exports.show = show
})

    • module2.js

      define(function (require, exports, module) {
  module.exports = {
    msg: 'I Will Back'
  }
})

    • module3.js

      define(function (require, exports, module) {
 const API_KEY = 'abc123'
 exports.API_KEY = API_KEY
})

    • module4.js

      define(function (require, exports, module) {
 //引入依赖模块(同步)
 var module2 = require('./module2')；
 function show() {
   console.log('module4 show() ' + module2.msg)
 }
 exports.show = show
 //引入依赖模块(异步)
 require.async('./module3', function (m3) {
   console.log('异步引入依赖模块3  ' + m3.API_KEY)
 })
})
    • main.js : 主(入口)模块
define(function (require) {
  var m1 = require('./module1')
  var m4 = require('./module4')
  m1.show()
  m4.show()
})
  1. index.html:
<script type="text/javascript" src="js/libs/sea.js"></script>
<script type="text/javascript">
  seajs.use('./js/modules/main')
</script>

ES6模块化

  • 模块化的规范：CommonJS和AMD两种。前者用于服务器，后者用于浏览器。
  • 而ES6 中提供了简单的模块系统，彻底能够取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。
  • ES6 模块的设计思想，是尽可能的静态化，使得编译时就能肯定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时肯定这些东西。

基本用法

  • es6 中新增了两个命令 export 和 import ；

    • export 命令用于规定模块的对外接口；
    • import 命令用于输入其余模块提供的功能。
    • 一个模块就是一个独立的文件。该文件内部的全部变量，外部没法获取。
    • 若是你但愿外部可以读取模块内部的某个变量，就必须使用export关键字输出该变量。
    • 下面是一个JS文件，里面使用export命令输出变量。
    // math.js
export const add = function (a, b) {
    return a + b
}
export const subtract = function (a, b) {
    return a - b
}
    • 使用export命令定义了模块的对外接口之后，其余JS文件就能够经过import命令加载这个模块（文件）。
    // main.js
import { add, subtract } from './math.js'
add(1, 2)
substract(3, 2)

  • 定义暴露模块 : export

    • 暴露一个对象:

      • 默认暴露，暴露任意数据类型，暴露什么数据类型，接收什么数据类型
      export default 对象

    • 暴露多个:

      • 常规暴露，暴露的本质是对象，接收的时候只能以对象的解构赋值的方式来接收值
      export var xxx = value1
export let yyy = value2
// 暴露一个对象
var xxx = value1
let yyy = value2
export {xxx, yyy}

  • 引入使用模块 : import

    • default模块:
    import xxx  from '模块路径/模块名'
    • 其它模块
    import {xxx, yyy} from '模块路径/模块名'
import * as module1 from '模块路径/模块名'

export 详细用法

  • export不止能够导出函数，还能够导出，对象、类、字符串等等；

  • 暴露多个：

    1. 分别暴露
    export const obj = {test1: ''}
export const test = ''
export class Test {
   constuctor() {
   }
}
// 或者，直接在暴露的地方定义导出函数或者变量
export let foo = ()=>{console.log('fnFoo');return "foo"},bar="stringBar"
    1. 一块儿暴露，推荐使用这种写法，这样能够写在脚本尾部，一眼就看清楚输出了哪些变量。
    let a=1
let b=2
let c=3
export { a,b,c }
    1. 还能够经过as改变输出名称
    // test.js
let a = 1
let b = 2
let c = 3
export {
    a as test,
    b,
    c
};
import { test, b, c } from './test.js' // 改变命名后只能写 as 后的命名
    1. 经过通配符暴露其余引入的模块
    // test.js
let a = 1
let b = 2
let c = 3
export {
    a as test,
    b,
    c
};
// lib.js引入test.js的内容
export * from './test.js'
// 引入
import {test,b,c} from './lib.js'

  • 暴露一个对象，默认暴露

    • export default指定默认输出，import无需知道变量名就能够直接使用
    // test.js
export default function () {
    console.log('hello world')
}
//引入
import say from './test.js' // 这里能够指定任意变量名
say() // hello world
    • 经常使用的模块
    import $ from 'jQuery'   // 加载jQuery 库
import _ from 'lodash'   // 加载 lodash
import moment from 'moment' // 加载 moment

import详细用法

  • import 为加载模块的命令，基础使用方式和以前同样
// main.js
import { add, subtract } from './test'

// 对于export default 导出的
import say from './test'
  • 经过 as 命令修改导入的变量名
import {add as sum, subtract} from './test'
sum (1, 2)
  • 加载模块的所有，除了指定输出变量名或者 export.default 定义的导入， 还能够经过 * 号加载模块的所有。
// math.js
export const add = function (a, b) {
    return a + b
}
export const subtract = function (a, b) {
    return a - b
}

//引入
import * as math from './test.js'
math.add(1, 2)
math.subtract(1, 2)

ES6-Babel-Browserify使用教程

  • 问题: 全部浏览器还不能直接识别ES6模块化的语法

  • 解决:

    • 使用Babel将ES6--->ES5(使用了CommonJS) ----浏览器还不能直接执行；
    • 使用Browserify--->打包处理js----浏览器能够运行
  1. 定义package.json文件
{
  "name" : "es6-babel-browserify",
  "version" : "1.0.0"
}
  1. 安装babel-cli, babel-preset-es2015和browserify
npm install babel-cli browserify -g
npm install babel-preset-es2015 --save-dev
  1. 定义.babelrc文件，这是一个babel的设置文件
{
   "presets": ["es2015"]
 }
  1. 编码
// js/src/module1.js
export function foo() {
     console.log('module1 foo()');
};
export let bar = function () {
     console.log('module1 bar()');
};
export const DATA_ARR = [1, 3, 5, 1];

// js/src/module2.js
let data = 'module2 data'; 
function fun1() {
    console.log('module2 fun1() ' + data);
};
function fun2() {
    console.log('module2 fun2() ' + data);
};
export {fun1, fun2};

// js/src/module3.js
export default {
  name: 'Tom',
  setName: function (name) {
    this.name = name
  }
}

// js/src/app.js
import {foo, bar} from './module1'
import {DATA_ARR} from './module1'
import {fun1, fun2} from './module2'
import person from './module3'
import $ from 'jquery'
//引入完毕
$('body').css('background', 'red')
foo()
bar()
console.log(DATA_ARR);
fun1()
fun2()
person.setName('JACK')
console.log(person.name);

  1. 编译

    • 使用Babel将ES6编译为ES5代码(但包含CommonJS语法) : babel js/src -d js/lib
    • 使用Browserify编译js : browserify js/lib/app.js -o js/lib/bundle.js
  2. 页面中引入测试
<script type="text/javascript" src="js/lib/bundle.js"></script>

  1. 引入第三方模块(jQuery)

    • 1). 下载jQuery模块:
    npm install jquery@1 --save
- 2). 在app.js中引入并使用

```
import $ from 'jquery'
$('body').css('background', 'red')
```

总结

模块化方案 优势 缺点
commonJS 复用性强;
使用简单;
实现简单;		 有很多能够拿来即用的模块，生态不错；
同步加载不适合浏览器,浏览器的请求都是异步加载；
不能并行加载多个模块。
AMD 异步加载适合浏览器 可并行加载多个模块；
模块定义方式不优雅，不符合标准模块化
ES6 可静态分析，提早编译 面向将来的标准；
浏览器原生兼容性差，因此通常都编译成ES5；
目前能够拿来即用的模块少，生态差

AMD和CMD区别：

  • 权威参考：https://github.com/seajs/seaj...

  • 对于依赖的模块，AMD 是提早执行，CMD 是延迟执行。

    • 不过 RequireJS 从 2.0 开始，也改为能够延迟执行（根据写法不一样，处理方式不一样）。CMD 推崇 as lazy as possible.

  • CMD 推崇依赖就近，AMD 推崇依赖前置。

    // CMD
define(function(require, exports, module) {   
    var a = require('./a');
    a.doSomething()   // 此处略去 100 行   
    var b = require('./b') // 依赖能够就近书写   
    b.doSomething()   // ... })
// AMD 默认推荐的是
define(['./a', './b'], function(a, b) {  
    // 依赖必须一开始就写好    
    a.doSomething()    // 此处略去 100 行    
    b.doSomething()   
     ...})
    • 虽然 AMD 也支持 CMD 的写法，同时还支持将 require 做为依赖项传递，但 RequireJS 的做者默认是最喜欢上面的写法，也是官方文档里默认的模块定义写法。
  • AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一。好比 AMD 里，require 分全局 require 和局部 require，都叫 require。CMD 里，没有全局 require，而是根据模块系统的完备性，提供 seajs.use 来实现模块系统的加载启动。CMD 里，每一个 API 都简单纯粹。
  • 还有一些细节差别，具体看这个规范的定义就好，就很少说了。
参考： 使用 AMD、CommonJS 及 ES Harmony 编写模块化的 JavaScript
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程