Front-end modularization

CommonJS

  • Specification for nodeJS usage
  • A file is a module that is exported in a specified way
  • /Indicates that modules are loaded through an absolute path,. /Indicates that modules are loaded by relative path
  • Module loading will have a cache, stored inrequire.cache, and the cache is identified by absolute paths
  • CommonJSIt is loaded synchronously. After loading, perform the following operations
  • Runtime load, CommonJS is an object that loads the entire module on input, generates an object, and then reads methods from that object
  • CommonJS prints a copy of the value, and once a value is printed, changes within the module do not affect the value
// a.js
function test1() {
  console.log('test 1')}function test2() {
console.log('test 2')}Exports modules through module.exports
module.exports = {
  test1,
  test2
}

/ / or
module.exports = test1

// Exports modules through exports
exports.fn = test1

// b.js
// use require to load modules

// Core module loading
const http = require('http')

// loads the module exported by module.exports
const { test1, test2 } = require('./a')
test1() // test 1

// Load the exports module
const test = require('./a.js')
test.fn() // test 1
Copy the code

AMD

  • The module is loaded asynchronously, and the module loading does not affect the subsequent statement operation
  • Modules with dependencies are executed in the callback function of the dependent module
  • requirejsRealize the MODULAR AMD specification
  • AMD believes in relying on front-loading, front-loading execution
// Module definition
/* id: optional, define module description dependencies: list of modules that the current module depends ondefine(id? , dependencies, factory)// The module is loaded
/* dependencies: module file fn: callback after module loading */
require([dependencies], fn)
Copy the code
/ / define
// a.js
define(['jquery'].function($) {
  function test() {
    console.log($('#app'))}return {
    test
  }
})

/ / load
// b.js
require(['a.js'].function(t) {
  t.test()
})
Copy the code

CMD

  • Generic module definition
  • Asynchronous loading module
  • Rely on proximity and delay execution
  • seajsRealize the modularization of CMD specification
/ / AMD
define(['a'.'b'.'c'].function(a, b, c) {
  // The actual modules A, B, and C have been loaded by the time the callback is executed
  a.fn1()
  b.fn1()
  c.fn1()
})

/ / CMD implementation
define(function(require.exports.module) {
  const a = require('./a')
  a.fn1()
  if (false) {
    const b = require('./b')
    b.fn1()
  }
})
Copy the code

ES Module

  • Through the es6Language standardModule functions are realized on the level, aiming to become a common modular solution for browsers and servers
  • Loaded at compile time, ES6 modules are not objects, but throughexportThe command explicitly specifies the output code.importIs in the form of a static command that loads a specified output value rather than the entire module
  • throughexportTo export the interface throughimportThe introduction of the interface
  • When the js engine statically analyzes the script, it encounters the module load command import and outputs a read-only reference. Wait until the script is actually executed to fetch the actual exported value
// Define the module
// a.js
function test1() {
  console.log('test 1')}export {
  test1
}

// b.js
function test2() {
  console.log('test 2')}function test3() {
  console.log('test 3')}export default {
  test2,
  test3
}

// Import modules
// c.js
import { test1 } from './a'
import math from './b'
test1()
math.test2()
Copy the code
// a.js
function func() {
  console.log('func a')}function bar() {
  console.log('bar')}// b.js
function func() {
  console.log('func b')}import React from 'react'
// Use as to distinguish aliases when importing
import { func as fu, bar } from './a'
import { func } from './a'

export class MyClass extends React.Component {... }Copy the code
// Specify the default output by export default
// a.js
export default function() {
  console.log('test 1')}// b.js
export function test2() {
console.log('test 2')}// c.js
import Test1 from './a'
import { Test2 } from '/b'
Copy the code
Type ='module' to identify es6 modules
// a.js
const name = 'xcc'
export default xcc

// index.html
<script type="module">
  import name from './a.js'
  console.log(name) // xcc
</script>
Copy the code

Pay attention to the point

/ / CommonJS load
The basic data type cannot be modified after it is exported. If it is a complex data type, it is a shallow copy and can be modified
// a.js
let name = 'xcc'
let obj = { name: 'xcc'.age: 20 }

function setName() {
  name = 'xcc1'
}

function setName1() {
  obj.name = 'xcc2'
}

module.exports = {
  name,
  info: obj,
  setName,
  setName1
}

// b.js
let { name, info, setName, setName1 } = require('./a.js')

setName()
setName1()

console.log(name, info) // xcc { name: 'xcc2', age: 20 }
Copy the code
// ES Module
// You can modify it after exporting
// c.js
let name = 'xcc'
let obj = { name: 'xcc'.age: 20 }

function setName() {
  name = 'xcc1'
}

function setName1() {
  obj.name = 'xcc2'
}

export {
  name,
  obj,
  setName,
  setName1
}

// index.html
<script type="module">
  import { name, obj, setName, setName1 } from './c.js'
  setName()
  setName1()
  console.log(name, obj)  // xcc1 {name: "xcc2", age: 20}
</script>
Copy the code

The resources

  • ES6 Introduction – Ruan Teacher
  • Check out github for more articles