Modular development: the difference between AMD, CMD, CommonJs and Es6

  • What are AMD, CMD, CommonJs?
  • What's the difference between them?
  • How is it used in the project?

AMD stands for Asynchronous Module Definition, which is the standardized output of RequireJS's module definition during the promotion process. It is a specification for modular development on the browser side.
Features: asynchronous module definition, dependent preposition

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

    return {
        printName: printName
    };
});

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

CMD stands for Common Module Definition, which is the standardized output of SeaJS's module definition during the promotion process. It is a specification for modular development on the browser side.
Features: Asynchronous module definition, Taobao team definition, relying on the nearest

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

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

});

Many people say that requireJS is an asynchronous loading module, and SeaJS is a synchronous loading module. This understanding is actually inaccurate. In fact, the loading modules are all asynchronous, but AMD relies on the front, js can easily know who the dependent module is, and load it immediately , and CMD depends on the nearest one. You need to use the module to be parsed into a string to know which modules are dependent. This is also a point that many people criticize CMD. It sacrifices performance to bring the convenience of development. In fact, the parsing module takes a short time. to ignore

CommonJS is javaScript applied to the server. A js file is a module. The variables in the module are not exposed to the outside world and do not support asynchronous. The Nodejs side uses the CommonJS specification, and the front-end browser generally uses AMD, CMD, ES6, etc. to define
the characteristics of modular development: the front-end browser does not support this specification, and the node backend uses this specification. Synchronous loading. 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 features—export/import
features: import and export start in pairs, export default, export

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

Guess you like

Origin blog.csdn.net/weixin_44599809/article/details/104100826