模块化开发：AMD、CMD、CommonJs和Es6的区别

什么是AMD、CMD、CommonJs？
他们之间有什么区别？
项目当中都是如何运用的？

AMD即Asynchronous Module Definition,是RequireJS在推广过程中对模块定义的规范化产出,它是一个在浏览器端模块化开发的规范。
特点：异步模块定义，依赖前置

// 定义模块 myModule.js
define(['dependency'], function(){
    var name = 'Byron';
    function printName(){
        console.log(name);
    }

    return {
        printName: printName
    };
});

// 加载模块
require(['myModule'], function (my){
　 my.printName();
});

CMD即Common Module Definition通用模块定义,是SeaJS在推广过程中对模块定义的规范化产出,它是一个在浏览器端模块化开发的规范。
特点：异步模块定义，淘宝团队定义,依赖就近

// 定义模块  myModule.js
define(function(require, exports, module) {
  var $ = require('jquery.js')
  $('div').addClass('active');
});

// 加载模块
seajs.use(['myModule.js'], function(my){

});

很多人说requireJS是异步加载模块，SeaJS是同步加载模块，这么理解实际上是不准确的，其实加载模块都是异步的，只不过AMD依赖前置，js可以方便知道依赖模块是谁，立即加载，而CMD就近依赖，需要使用把模块变为字符串解析一遍才知道依赖了那些模块，这也是很多人诟病CMD的一点，牺牲性能来带来开发的便利性，实际上解析模块用的时间短到可以忽略

CommonJS 是应用于服务端的javaScript，一个js文件就是一个模块，模块中的变量不对外暴露，不支持异步。Nodejs端是使用CommonJS规范的，前端浏览器一般使用AMD、CMD、ES6等定义模块化开发的
特点：前端浏览器不支持此种规范，node后端使用此规范。同步加载。module.exports,exports.

//模块定义 myModel.js

var name = 'Byron';

function printName(){
    console.log(name);
}

function printFullName(firstName){
    console.log(firstName + name);
}

module.exports = {
    printName: printName,
    printFullName: printFullName
}

//加载模块

var myModule = require('./myModel.js');
myModule.printName();

ES6特性—export/import
特点：导入导出成对出发，export default，export

export default {
  name:'',
  props:[''],
  data () {
    return {
    };
  },
  components: {},
  computed: {},
  watch: {},
  created() {},
  beforeMount() {},
  mounted() {},
  methods: {}
};

模块化开发：AMD、CMD、CommonJs和Es6的区别

猜你喜欢