preface

Modular development helps us break up the code for easy development and maintenance, but if we don’t know the modular specification, we don’t know whether to use require or import when developing, export or module.exports when exporting. So we have to clear up the differences and the context.

This is my learning record, the main content is CommonJS and ES Module specification. Other AMD, CMD, UMD specifications, interested partners can know about it.

What is front-end modularity

As front-end project grew, function more and more, we can’t write all the code in a js, but the code according to the different functional partition, but the code is becoming more and more code references between nested more and more deep, we have to spend a lot of time to management and maintenance, how to improve the efficiency of management of code? By modularity.

Modularity is not only a form of code organization, but also an idea. We divide different modules according to different functions of the code, so as to facilitate the management of the code and improve the development efficiency.

The evolution of modularity

Modular specifications do not appear overnight, but, like the ages, evolve:

  1. Stone Age: We passedscriptTags introducedjsFile, and by convention, a file represents a module. This approach is well understood, but has many problems
    • Lack of private space, that is, internal members of a module that can be modified externally
    • All modules function globally, which is prone to naming conflicts and variable pollution
    • Module dependencies cannot be managed, and if the order of references is wrong, the program will be difficult to run
  2. Bronze Age: Using the namespace model, which exposes an object for each module and mounts all the members of the module to this object, is a bit modular in nature, but still does not solve the problem of private space, module members can be modified externally
  3. Steam age: Use IIFE (call function expressions immediately) to provide private scope. When a function becomes an immediate function expression, the variables in the expression cannot be accessed externally, that is, a closure is formed, and the object is then exposed and mounted globally
// Steam Age: use IIFE to provide private scopes; (function(){// By closure, Var MSG = 'hello world' function method(){console.log(MSG)} // Mount to global window.module = {method:method} }) ()Copy the code

With IIFE we solved the problem of private scopes, but we couldn’t solve the problem of script tags being introduced, which can be quite painful when a dozen or so script tags are introduced in index. HTML and you have to maintain the order in which they are introduced.

  1. In the open source era, a hundred schools of thought contend. A hundred flowers bloom together,JavaScriptThe community was bornCommonJSSpecification.

Review how CommonJS and ES Module are used

Let’s review the CommonJS and ES Modules to get a better impression:

  • CommonJSImport and export
    • require
    • module.exports
    • exports
  • ES ModuleImport and export
    • import
    • export
    • export default

Let’s categorize them so they can be distinguished. There are several special uses of ‘import’, so let’s move on.

CommonJS specification

CommonJS first solved the problem of script tags by providing a script tag as an entry file and passing references between modules to CommonJS.

Let’s take a quick look at the CommonJS specification:

  • CommonJSFrom the community
  • CommonJSBefore the advent ofES Modulespecification
  • CommonJSIs widely used innode.js 中
  • usemodule.exportsExport the module usingrequireThe import module
  • exportsYou can also export the module, which is essentially referencedmodule.exports
  • CommonJSIs synchronous load module, this withES Moduledifferent

CommonJS export

You can export any type

// module.js
module.exports = {
    name:'banana',
    age:18,
    eat:function(){
        console.log('I like eating bananas')
    }
}
module.exports.userName = 'admin'
Copy the code

CommonJS import

// app.js const obj = require('./module.js') console.log(obj) // { name: 'banana', age: 18, eat: [Function: // Const {name} = require('./module') console.log(name) // 'banana'Copy the code

CommonJS does not work with browsers

Because CommonJS synchronously loads modules, and loading modules is to get modules from the server, the loading speed will be affected by the network. If a module loads slowly, the following programs will not be able to execute, and the page will fake dead. The server can use CommonJS because the code itself is stored on the server. Loading a module is a disk file, which is much faster without worrying about blocking.

So browser loading modules can only use asynchronous loading, which is the background of the AMD specification.

ES the Module specification

CommonJS is good, but it doesn’t work in a browser, and that’s where the ES Module comes in.

Let’s look at ES Module:

  • ES Module 是 ES6After the addition of the modular specification, it fromJavascriptIts own language level, achieved modularity
  • ES ModuleWant to complete the browser side, the server side of the modular unification, become a universal solution
  • useexportExport the module usingimportThe import module
  • throughasKeywords, the export object rename, can also passasRenames the imported object

ES the Module export

You can export any type

// module.js
const obj = {
    name:'banana',
    age:18,
    eat:()=>{
        console.log('I like eating bananas')
    }
}
const userName = 'admin'

export { obj,userName }
Copy the code

ES the Module import

// app.js
import { obj,userName } from './module.js'
Copy the code

Export by as rename

// module.js const userName = 'admin' const passWorld = 'password is my birthday' export {userName as name, passWorld as pass } // app.js import { name,pass } from './module.js'Copy the code

Default Export by default

One member is exported by default

// module.js const name = 'banana' export default name // app.js import newName from './module.js' // This can be received with a new variable nameCopy the code

Multiple members are exported by default

// module.js
export default {
    name:'banana',
    age:18,
    eat:()=>{
        console.log('I like eating bananas')
    }
}

// app.js
import handle from './module.js'
console.log(handle.name) // banana
handle.eat() // I like eating bananas
Copy the code

ES Module

  • We can write this when we just want to run the module, not get the variables in itimport './module.js'
  • When you need to export a large number of members, you can use a variable to receive them
export { name,age,address,tel,gender,...... } // import * as obj from './module.js' // use obj to receiveCopy the code
  • Export both named and default members
const name='banana',age=18; export { name,age } export default 'default value' import { name, age, Default as title} from './module.js' // Age} from './module.js' // short form to put the default member firstCopy the code

Use ES Module to execute JS code

  • By givingscriptaddtype="module"Property, you can useES ModuleTo implement the standards ofJScode
  • useES Module 的 JS, will delay execution, sort of likedeferattribute
<! <script type="module"> console.log(this) //undefined </script> <! -- every ES Modules is a private scope --> <script type="module"> const name = 'banana' </script> <script type="module"> console.log(name) //undefined </script> <! <script type="module" SRC ="http://www.baidu.com" /> ESM script tags delay execution until the HTML is loaded. Equivalent to adding the defer attribute --> <script> // blocks the p tag below to show alert('hello') </script> <p> content 1</p> <script type="module"> // does not block the p below Tags show alert('hello') </script> <p> content 2</p>Copy the code

Node support for ES Modules

Prior to [email protected], ES Module is not supported, but Babel is available

// Install Babel yarn add @babel/ node@babel/core@babel /preset-env -d // Run Babel yarn Babel -node // Run the file and the preset plug-in yarn babel-node index.js --persets=@babel/preset-envCopy the code

The above is my learning record, most of which comes from the explanation of excellent articles on the Internet, and add personal understanding summary. If there is any mistake, I hope you can correct it. If it is helpful to you, please help to give a thumb-up