AMD、CMD、CommonJS和ES6对比

最新推荐文章于 2024-12-27 14:12:08 发布

原创最新推荐文章于 2024-12-27 14:12:08 发布 · 279 阅读

0 ·

CC 4.0 BY-SA版权

本文对比了AMD、CMD、CommonJS及ES6模块化标准的特点、语法及应用场景，深入解析各标准的优势与局限。

1、AMD(异步模块定义）是RequireJS在推广过程中对模块定义的规范化产出，可动态的异步的加载模块

特点：依赖前置，也就是先定义后引用

基本语法：

 define('module',['dep1','dep2'],function(d1,d2){
         return someExportedValue;
     })
     
     require(['module','../file'],function(module,file){
     	/*..*/
     })

优点：1.适合浏览器环境中异步加载模块

2.可以并行加载多个模块

缺点：1.提高开发成本，模块定义方式的语义不明确

2.不符合通用的模块化思维方式，是一种妥协的实现

2、CMD（同步模块定义）是seaJS在推广过程中对模块定义的规范化产出

特点：所有模块都通过define定义，通过require引入依赖，依赖就近（在什么地方使用就在什么地方require）

基本语法:

define(function(require,exports,module){
         var $=require('jquery');
         var Spining=require('./spining');
         export.doSometing = ...
         module.exports = ...
    })

优点：1.依赖就近，延迟执行

2.可以很容易在node.js中运行

缺点：依赖SPM打包，模块的加载逻辑偏重

3、CommonJS规范是通过module.export定义的，主要在node.js服务器端中使用，浏览器并不支持

通过require方法来同步加载所需要依赖的其他模块，然后通过exports或module.exports来导出需要暴露的接口

基本语法：

 
    require('module')
    require('../file.js')
    exports.doStuff=function(){}//导出，对外接口
    module.exports = someValue;

优点：1.服务器端模块重用

2.简单并容易使用

缺点：1.同步的模块加载方式不适合在浏览器环境中，同步意味着阻塞加载，而浏览器资源是异步加载的

2.不能非阻塞的并行加载多个模块

4.ES6特性

export导出，import导入

例如

  export default{//default代表默认导出
     components:{
        MHeader,
        Tab
     }
  }

import header from './components/header/header' //导入