preface

JS modular programming is the front-end partners essential knowledge, the following girls will be in the way they think more clear list out.

1 require

Features:

  • 1. Runtime loading
  • 2. Copy to this page
  • 3. Introduce them all

1.1 CommonJS

Node.js uses CommonJS ideas. In CommonJS, there is a global method called require(), which is used to load modules.

1.1.1 usage
var math = require('math');
math.add(2.3);
Copy the code
var math = require('math');
const Math = new math(2.3)
Math.add();
Copy the code
1.1.2 Module writing

Exports and module. Exports.

exports.add = (x,y) = > x+y;
Copy the code
module.exports = class math {
  constructor(x,y) {
    this.x = x;
    this.y = y;
  }

  add() {
    returnx+y; }};Copy the code

1.2 AMD

Require. js and cujo.js use AMD ideas.

AMD is short for “Asynchronous Module Definition”, which means “Asynchronous Module Definition”. It loads modules asynchronously and does not affect the execution of statements following the module. All statements that depend on this module are defined in a callback function that will not run until the load is complete.

The second line math.add(2, 3) runs after the first line require(‘ math ‘), so you must wait for math.js to load. That is, if it takes too long to load, the entire application will just sit there waiting. This is not a problem on the server side because all modules are stored on the local hard disk and can be loaded synchronously. The wait time is the hard disk read time. However, for the browser, this is a big problem, because the modules are on the server side, and depending on the speed of the network, the wait time can be long, and the browser is in “suspended animation” state. Therefore, on the browser side, modules cannot be “synchronous”, only “asynchronous”. This is the context in which the AMD specification was born.

1.2.1 usage
//require([module], callback);
require(['math'].function (math) {   math.add(2.3);
});
Copy the code
1.2.1 Module writing

define(id? , dependencies? , factory)

  • Id: string, module name (optional)
  • Dependencies: The module we want to load (optional). Use relative paths. , note the array format
  • Factory: factory method that returns a module function

A module does not depend on how other modules write

// math.js
define(function (){
    var add = function (x,y){
        return x+y;
    };
    return {
        add: add
    };
});
Copy the code

Modules also depend on other modules

define(['a'.'b'].function(a,b){
    function foo(){
        a.doSomething();// The dependency is preloaded
        b.doSomething();
    }
    return {
        foo : foo
    };
});
Copy the code

When the require() function loads the module above, it loads the lib.js file first.

1.3 CMD

Sea. Js uses CMD ideas. CMD is short for “Common Module Definition.” Similar to requireJS, but seaJS is near and executes late, while RequireJS is ahead and executes early.

1.3.1 usage
seajs.config({
  alias: {
    'jquery': 'http://modules.seajs.org/jquery/1.7.2/jquery.js'}}); seajs.use(['./hello'.'jquery'].function(hello, $) {$('#beautiful-sea').click(hello.sayHello);
});
Copy the code
1.3.1 Module writing
define(function(require, exports, module) {
  var$=require('jquery');

  exports.sayHello = function() {$('#hello').toggle('slow');
  };
   var b = require("b");
   b.doSomething();    // Defer execution by relying on proximity
});
Copy the code

2 import

Features:

  • 1. Load at compile time
  • 2. Refer to definitions only
  • 3. Load on demand

Import is recommended to replace require with import

2.1.1 usage

Import has two types of module import: name import(name import) and default import(definition import), and import().

import defaultMember from "module-name";
import * as name from "module-name";
import { member } from "module-name";
import { member as alias } from "module-name";
import { member1 , member2 } from "module-name";
import { member1 , member2 as alias2 , [...] } from "module-name";
import defaultMember, { member [ , [...] ] } from "module-name";
import defaultMember, * as name from "module-name";
import "module-name";
Copy the code
  • Name – The name of the export value received from the module to be imported
  • Member, memberN- Imports multiple members of the specified name from the export module
  • DefaultMember – Imports the default export members from the export module
  • Alias, aliASN-Alias, the name of the specified imported member
  • Module-name – Specifies the module to be imported. It’s a file name
  • As – Rename the import member name (” identifier “)
  • From – Imports from an existing module, script file, etc
import()

Import () returns a Promise object.

/ / an error
if (x === 2) {
  import MyModual from './myModual';
}
Copy the code

The engine processes import statements at compile time. It does not analyze or execute if statements, so the import statement is meaningless in the if block and therefore generates a syntax error rather than an execution error. There’s no way to load dynamically based on conditions like require. Therefore, the proposal introduces the import() function, analyzes the if statement at compile time, and completes the dynamic loading.

if(x === 2) {import('myModual').then((MyModual) = >{
    newMyModual(); })}Copy the code
2.2.1 Module writing

There are two types of module export: name export (name export) and default export (definition export). The name export can be multiple for each module, while the default export can be only one for each module.

export { name1, name2, …, nameN };
export { variable1 as name1, variable2 asName2,... , nameN };export letName1 name2,... , nameN;// also var
export letName1 =... , name2 =... ,... , nameN;// also var, const
 
export default expression;
export default function (...) {... }// also class, function*
export default function name1(...) {... }// also class, function*
export { name1 as default,... };export * from... ;export { name1, name2, …, nameN } from... ;export { import1 as name1, import2 asName2,... , nameN }from... ;Copy the code
  • Name1… NameN – The identifier of the export. After export, you can use this “identifier” to use * import references in another module
  • Default – Sets the default export for the module. Set import to reference default import without “identifier”
  • – Inherits the module and exports all methods and properties of the inherited module
  • As – Rename the export “identifier”
  • From – From an existing module, script file… export

The resources

  • Raoenhui. Making. IO/es6/2018/12…
  • Es6.ruanyifeng.com/#docs/modul…
  • www.cnblogs.com/liaojie970/…

Happy coding .. 🙂