Browser-side module loader AMD and CMD

AMD and CMD

1. AMD Asynchronous Module Definition

AMD: Specification of modular development on the browser side. The use of AMD standard fast delivery requires the use of corresponding library functions RequireJs, that AMDis , the standardized output RequireJsof the module definition in the promotion process .

RequireJsMainly solve two problems:

Multiple js file dependencies, that is, multiple dependent js files, the dependent files need to be loaded into the browser earlier than the dependent files, but if the dependencies are more complicated, the code is written And maintenance becomes very complicated.
When js is loaded, the browser will stop rendering the web page. The more files are loaded, the longer the page will be unresponsive.

RequireJseffect:

Manage dependencies between modules to facilitate code writing and maintenance
Realize the asynchronous loading of js files to prevent web pages from losing response

RequireJs使用:

download
- Official website address: https://requirejs.org/
Quote
- ```
<script src="js/require.js"><script>;// 假定下载后的require.js文件放于js目录下
```
  Because the above method will also cause the web page to lose response when loading the js file, the solution:
  - Put it at the bottom of the page to load
  - Add the async attribute to it: This attribute indicates that the file needs to be loaded asynchronously to prevent the web page from becoming unresponsive
```
<script src="js/require.js" defer async="true"><script>;
```
    Since IE does not support this attribute, only defer is supported, and defer also needs to be added
Load the js file written by yourself
```
<script src="js/require.js" data-main="js/main"><script>;
```
- Data-main attribute function: specify the main module of the webpage, the default suffix name is js, you don't need to add the js suffix.
- main.js will be loaded first by require.js at this time.
AMD module specification
- The module must be defined with a specific define() function
- If a module does not depend on other modules
  - Define it directly in the define() function
```
// /js/test.js
define(function() {
          
          
    var sayHello = function() {
          
          
        console.log('hi');
    }
    return {
          
          
        sayHello: sayHello
    }
})
```
  - load
```
// /js/main.js
require(['test'],function(test){
          
          
    test.sayHello();
})
```
    The first parameter is the array of modules that need to be loaded. Asynchronous loading is adopted. After the module is loaded, the module export object is passed into the second parameter as a formal parameter. The second parameter is called after the module is loaded.
- If a module depends on other modules
  - The first parameter is the array of modules it depends on, and the second parameter is the logic implementation required by the current module
```
// /js/pra.js
define(['other'],function(other) {
          
          
    //... code
})
```
    The usage of two of the parameters is the same as that of require loading modules.
  - How to find the module?
    
    Take require loading as an example:
    
    By default, require.js assumes that the module is in the same directory as main.js and the file name is test.js, and then it is automatically loaded. But what if it is a module under another path? At this time, you can use require.config()to customize the module loading behavior.
    
    require.config()It is written in the main.jshead of the current main module . The parameter is an object, and the paths attribute specifies the loading path of each module
    - File and main.jssame directory
```
require.config({
            
            
    paths: {
            
            
        'test': 'test.js'
    }
})
```
    - Files and main.jsdifferent directories
      
      The first way of writing: write the path directly
```
require.config({
            
            
    paths: {
            
            
        'test': '../lib/test.js';// 也可以直接写绝对路径，包括网址也可以
    }
})
```
      The second: change the base directory (baseUrl)
```
require.config({
            
            
    baseUrl: '../lib'
    paths: {
            
            
        'test': 'test.js'
    }
})
```

2. CMD general module definition

Similar to AMD, CMD has a browser implementation: SeaJs, the problem to be solved by SeaJs is the same as that of RequireJs, except that the module loading timing is different. And SeaJs respects one file per module.

Official address: https://www.zhangxinxu.com/sp/seajs/

The syntax is Require.jssimilar, so I won’t repeat it here

3. Difference between AMD and CMD

The two most obvious differences are in the handling of dependencies when defining modules:

AMD respects pre-dependency, and declares the dependent modules when defining a module
CMD respects nearby dependencies, and only requires when a certain module is used

That is, AMD executes in advance, CMD executes later