Introduction: Modular development requirements

In the early days of JS, using script tags to introduce JS caused the following problems:

  1. Block the page rendering while loading, the more JS you introduce, the longer the blocking time.
  2. Easy to contaminate global variables.
  3. Js files have dependencies and must be loaded sequentially. When the project is large, the dependencies can be complex.
  4. Too many JS files are introduced, which are not beautiful and easy to manage.

CommonJS specification

CommonJS Modules/1.0 specification, server side specification.

Node.js for general use. The core of the specification is to allow modules to use the require method to synchronously load other modules that they depend on, and then export interfaces that need to be exposed through exports or module.exports.

Features:

  1. A module is a file

  2. Exports or exports modules

     // module.js
 exports.add = (a, b) => a+b

 module.exports = {
   add: (a, b) => a + b
 }Copy the code

  3. Load the module using require

    A. Execute the entire script to generate objects in memory when the module is loaded for the first time with the require command b. When the require command is executed several times to load the module again, the script is not executed. The value c. CommonJS is synchronized to load the moduleCopy the code

Tips:

  1. Why is the CommonJS specification not suitable as a browser specification

    Because CommonJS is a synchronous module, it is loaded from the local hard disk when the server loads the module, which is fast to read. However, when the browser side loads the module, it needs to request the server side, which involves network speed and proxy problems. Once the waiting time is too long, the browser will be in the state of "suspended animation".Copy the code

Second, ADM specification

AMD (Asynchronous Module Definition) Asynchronous Module Definition, client specification. The module is loaded asynchronously, and the module loading does not affect the generation execution of the following statements.

AMD is the product of the normalization of module definitions in require.js during its widespread use.

In use, require. Js

The characteristics of

  1. Use define() to define modules

    /** * @param dependencies module name < span style = "box-sizing: border-box! Important; word-wrap: break-word! Important;" The module initializes the function or object executed */ define(id? dependencies? factory)Copy the code

  2. Load the module using require

     require([module], callback)Copy the code

    AMD relies on front modules

CMD specification

CMD (Common Module Definition) is used to load modules asynchronously.

CMD is the normalized product of the module definition in the promotion process of Sea-.js.

Sea-.js should be introduced when using

Features:

  1. Use define() to define the module and require() to load the module

     define(function (require, exports, module) {
     let a = require('a')
     let b = require('b')
     exports.eat = a.eat
     exports.run = b.run
 })Copy the code

    CMD module loading is recommended to rely on nearby, need to a module before require loading

  2. Use seajs.use to load the use module

     seajs.use(id, callback?)Copy the code

UMD specification

UMD (Universal Module Definition) is a Universal Module Definition for compatibility with AMD, CMD, and non-modular development specifications

/** * Universal Module Definition ** / (function (root, If (typeof define === 'function') {define([], Factory)} else if (typeof exports === 'object') {// Node CommonJS module.exports = factory()} else {// browser environment root.someAttr = factory } })(this, function () { let add = function (a, b) { return a + b } return { add, module: 'UMD' } })Copy the code

5. ES6 module

ES6 uses imort and export to implement module input and output. The import command is used to input functions provided by other modules. The export command is used to specify external interfaces of modules.

Features:

  1. Export the module using export

    // test.js export let module = 'ES6 module 'export let hello = function () {} let demo = function () { default demoCopy the code

  2. Import the module using import

    Import {hello, module} from './test' // Import the specified module, Rename import {hello as hi, module} from './test.js' // Import all modules and rename import * as test from './test.js'Copy the code

Afterword.

The above is brother Hu today to share the content, like partners remember to collect, forward, click on the lower right corner of the button to see, recommended to more partners yo, welcome a lot of message exchange…

Brother Hu has words, a technology, feelings of brother Hu! The current jingdong front – end siege lion. Hu Ge has words, focus on the field of front-end technology, share front-end system architecture, framework implementation principle, the latest and most efficient technology practice!

Long press scan code attention, more handsome more beautiful yo! Pay attention to Brother Hu said the public number, and Brother Hu continue to in-depth exchanges!