What is the difference between front-end modular AMD and CMD?

Difference: AMD and CMD handle the execution timing of dependent modules differently. AMD advocates pre-dependency, and declares the modules it depends on when defining a module; CMD advocates nearby dependencies, only when a certain Then go to require when you install the module.

In the early days of the development of JavaScript, it was to implement simple page interaction logic in just a few words; now CPU and browser performance have been greatly improved. Many page logic has been migrated to the client (form validation, etc.). With the advent of the web2.0 era, Ajax technology has been widely used, jQuery and other front-end libraries have emerged in endlessly, and the front-end code has become increasingly expanded. At this time, JavaScript is used as an embedded The positioning of the scripting language has been shaken, but JavaScript does not provide any obvious help for organizing code. It does not even have the concept of classes, let alone modules. JavaScript’s extremely simple code organization specifications are not enough to manage such a huge scale of code.

ModuleSince JavaScript cannot handle such a large-scale code, we can learn from how other languages ​​handle large-scale programming. There is an important concept in Java -

. Logically related codes are organized into the same package. The package is a relatively independent kingdom. There is no need to worry about naming conflicts. What if it is used externally? ? Just importthe corresponding package<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">import java.util.ArrayList;</pre><div class="contentsignin">Copy after login</div></div>Unfortunately, JavaScript does not provide similar functions because of its positioning during design. Developers need to simulate similar functions to isolate and organize complex JavaScript code is called modularity.

A module is a file that implements a specific function. With a module, we can use other people's code more conveniently, and load whatever module we want for whatever function we want. Module development needs to follow certain norms, and everyone will get messed up if they do their own thing

The process of forming specifications is painful. The pioneers of the front-end started in the stage of slash-and-burn farming and drinking blood, and the development has begun to take shape now. Let’s briefly understand this paragraph Extraordinary journey

When we talked about functions, we mentioned that one function of a function is to package a set of statements to implement specific logic, and the scope of JavaScript It is based on functions, so it is natural to use functions as the first step in modularization. Writing several related functions in a file is the first module.

function fn1(){
    statement
}

function fn2(){
    statement
}

This way, when needed, it can be Just call the function in the file where the function is located.

The disadvantages of this approach are obvious: it pollutes global variables, there is no guarantee that variable names will not conflict with other modules, and there is no relationship between module members.

In order to solve the above problem, the object writing method came into being, which can encapsulate all module members in an object

var myModule = {
    var1: 1,

    var2: 2,

    fn1: function(){

    },

    fn2: function(){

    }
}

This way We reference the corresponding file when we want to call the module, and then

myModule.fn2();

This avoids variable pollution, as long as the module name is unique, and members in the same module are also related

It seems A good solution, but it also has flaws. External members can modify internal members at will

myModel.var1 = 100;

This will cause unexpected security problems

You can achieve the purpose of hiding details by executing the function immediately

var myModule = (function(){
    var var1 = 1;
    var var2 = 2;

    function fn1(){

    }

    function fn2(){

    }

    return {
        fn1: fn1,
        fn2: fn2
    };
})();

In this way, variables and functions that we have not exposed cannot be modified outside the module

The above approach is the basis of our modularization. Currently , there are two main types of popular JavaScript module specifications:

and AMD

Let’s talk about CommonJS first Since there is no modular programming on the web page, only the page JavaScript logic is complex, but it can still work, but there must be modules on the server side. Therefore, although JavaScript has been developed on the web side for so many years, the first popular modular specification has Brought by server-side JavaScript applications, the CommonJS specification is carried forward by NodeJS, which marks the official stage of JavaScript modular programming.

Define module
1. According to the CommonJS specification, a single file is a module. Each module is a separate scope, that is to say, variables defined within the module cannot be read by other modules unless they are defined as attributes of the global object

   
   

Module Output:
2. The module has only one export,

   module.exports
   object, we need to put the content that the module wants to output into this object

Load module:
3. Load the module using the

   require
   method, which reads a file and executes it, returning the module.exports object inside the file

   ## Take a look Example

//模块定义 myModel.js

var name = 'Byron';

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

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

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

//加载模块

var nameModule = require('./myModel.js');

nameModule.printName();

Copy after login

js

仔细看上面的代码，会发现require是同步的。模块系统需要同步读取模块文件内容，并编译执行以得到模块接口。

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

    return {
        printName: printName
    };
});

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

define(id?, dependencies?, factory);

require([dependencies], function(){});

define(id?, deps?, factory)

function(require, exports, module)

require(id)

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

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

});

The above is the detailed content of What is the difference between front-end modular AMD and CMD?. For more information, please follow other related articles on the PHP Chinese website!