[WEB] Front-end modularization

Module understanding

• A module is a set of methods that implement a specific function
• Encapsulate a complex program into several blocks or files according to certain specifications and combine them
• The internal data and implementation of the block are private, exposing only interfaces (methods) externally

Modular processes

1. globalfunctionPattern: Encapsulate different functions into different global functions

  function f1(){
    //....
  }

  function f2(){
    //....
  }
Copy the code

Disadvantages: pollute the global namespace, can not guarantee against variable name conflicts with other modules, module members can not see the direct relationship

2. namespacePattern: Simple object encapsulation

var module = new Object({ _count: 0, f1: function (){ //.... }, f2: function (){ //.... }})Copy the code

Disadvantages: Data is not secure, external can directly modify the internal module data module-_count = 5

3. IIFE(Execute functions now) pattern: Anonymous functions call themselves, introducing dependencies (closures)

  var module = (function(){
    var _count = 0;
    var f1 = function(){
      //....
    };
    var f2 = function(){
      //....
    };
    return {
      f1,f2
    }
  })()
Copy the code

Disadvantages: Introduction of multiple scripts, excessive requests, vague dependencies

Modular specification

1. CommonJSspecification

On the server side, modules are loaded synchronously at runtime; On the browser side, modules need to be compiled and packaged in advance

• Exposure module:module.exports = value 或 exports.xxx = value
• Introduction module:require(xxx)If the module is a third-party module, XXX indicates the module name. For a custom module, XXX indicates the file path

2. AMDspecification

Asynchronously load modules, allowing callback functions to be specified. Browser environment, to load modules from the server, must be in asynchronous mode, so the browser generally uses AMD specifications

• Exposed to the module

Define (['module'], function(m) {return module})Copy the code

• The introduction of the module

Require ([module], function(m) {use m})Copy the code

3. CMDspecification

Designed for browser side, module loading is asynchronous, module is used only when loaded execution

• Exposed to the module

  define(function(require, export, module) {
    var m = require('./module1')
    export.xxx = value
    module.export = value
  })
Copy the code

• The introduction of the module

  define(function(require) {
    var m1 = require('./module1')
    m1.show()
  })
Copy the code

4. ES6modular

The ES6 module is designed to be as static as possible, so that the module dependencies, as well as the input and output variables, can be determined at compile time.

• Exposed to the module

var num = 0 var add = function(a, b) { return a + b } export { num, add } <! -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - or the default exposure - > export default function () {the console. The log (' this is the default exposure method ')}Copy the code

• The introduction of the module

import { num, add } from './module' <! -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- or custom name is introduced into the default exposure module - > import log from the log () '. / module 'Copy the code