1. Modular development

1. An overview of the

  • The most important front-end development paradigm today
  • By dividing complex code into functional modules
  • Modularity is just an idea

2. The evolution of modularity

  • A phase
    • File division mode
    • Store each function and data in a separate file, with the convention that each file is a separate module, and if modules are used, they are introduced into the page via script tags
    • disadvantages
      • Contamination global scope
      • Name conflict problem
      • Unable to manage dependencies between modules
      • It all depends on conventions, which may be broken after the project is added to the volume
  • Two stage
    • Namespace mode
    • Mount each function and data under an object
  • Three phase
    • IIFE
    • Provide private space with immediate execution functions
    • Implements the concept of private members
  • The four stages
    • Modular specification
    • commonJS
      • A file is a module
      • Each module has a separate scope
      • Exports members through module.exports
      • Load the module via the require function
      • CommonJS loads modules synchronously
    • AMD (Asynchronous Module Definition)
      • Require.js implements the AMD specification
        • Convention Each module must be defined by the define function
        • Load the module via require
      • Most third-party libraries currently support the AMD specification
      • disadvantages
        • AMD is relatively complex to use
        • Module JS file requests are frequent

3. Modular standard specifications

  • The Node environment uses the commonJS specification and the browser environment uses ES Modules specification
  • ES Modules is a system of Modules defined in ECMA Script 2015

4. ES Modules

  • features

    • By adding type=”module” to the script tag, you can execute the JS code in ES Module standards
    • The ES Module automatically adopts strict mode, ignoring the use strict form
    • Each ES Module runs in a private scope
    • In ES Module, external JS files are requested by CORS
    • The script tag in ES Module automatically delays the execution of the script

  • export

    Export var name = 'kjy' export function hello(){console.log('hello')} export class Person{} Var name = 'kjy' function hello(){console.log('hello')} class Person{} export {name, hello, Person} export {name as fooName, hello as fooHello, Person as fooPerson} export default name // app.js import {name} from './module.js' // rename import import { FooName, fooHello, fooPerson} from './module.js' // export name from './module.js'Copy the code

  • Import/Export Problems

    • Export {name, age}, followed by curly braces is not a literal object, but an ES Module export syntax
    • Export default {name, age}, followed by curly braces is a literal object
    • Export Exports the reference of a member
    • The exported member reference is read-only
    • Import {name, age} from ‘./module.js’, the curly braces after import are not destruct syntax, but import syntax of ES module
    • When importing a module, “from” is written after the path of importing the module. Use the complete module file name and do not omit the.js extension
    • Import When importing a module, if from follows a relative path, do not omit the./ in the relative path; otherwise, the module is considered to be a third-party module
    • Import {} from ‘./module.js’ or import ‘./module.js’ executes the code in the module immediately
    • Import * from ‘./module.js’ to import all members of the module
    • You cannot use import to from a variable
    • The import keyword must appear at the top level
    • Import (‘./module.js’), which dynamically imports modules through the import function. This function returns a Promise that can be obtained by.then(module => {console.log(module)})
    • If you export both named member and default member, It can be imported by import {name, age, default as title} from ‘./module.js’ or import title,{name, age} from ‘./module.js’

  • ES Module support in Node.js

    • Native modules and third-party modules can be loaded as ES Modules in Node.js

  • ES Module in Node.js – Interacts with CommonJS

    • The ES Module can load members provided in CommonJS
    • In CommonJS, you cannot load ES Module by require()
    • CommonJS always exports a default member
    • ES Module does not have CommonJS Module global members