This is the 13th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

As we know, many languages have their own rules for modularity, and reference modules can be defined and used according to specific rules. But before ES6, JS did not support modularity. So what? In fact, the front end has its own community, and they want to use modularity because it’s really good. So the community developed a module loading scheme, with CommonJS, AMD and CMD three specifications. Where Commonjs represents nodeJs; AMD is represented by requireJs, curlJs; CMD is represented by seaJs. CommonJS and AMD are more mainstream. Don’t get too complicated, they just define and introduce modules according to their own specific rules, the implementation is the same but the rules are all different. Because the modularity specifications created by the community were messy, ES6 came out to unify the problem. Let’s take a look at the detailed rules of the module specification in ES6

Summarize two key words

  • export
  • import

Export is used to export modules, import is used to import modules; Of course, depending on different export and different import statements, the results of import and export will be different. Let’s take a look at the following

We know that a module is a separate file, and all the variables inside the file are not available externally. If you want to be able to read a variable inside a module from the outside, obviously using the form of specifying the file to import in SRC will import everything in the entire file, which is not good. ES6 uses the export command to export specific required variables

  1. Batch Export import

In the JS file to be exported, use export{} to export variables in batches

let x = 100;
let y = [1.2.3.4.5];
let str = "asd123"
let fun1 = () = >{
    console.log("fun1")}export{x,y,str,fun1}
Copy the code

Import variables in batches using import{} from “file address”

import {x,y,str,fun1} from 'File directory';
Copy the code
  1. Export When a variable is exported, use as to change the variable name
/ / lib. Js file
let a = "apple"
let b = "banana"
export {a as apple, b as banana}
Copy the code

For import, use the name after as

import {apple, banana} from "./lib";
console.log(apple,banana);
Copy the code
  1. One or more variables can be exported separately at the variable definition
/ / lib. Js file
export let foo = () = > {
  console.log("fnFoo");return "foo"
},
bar = "s,tringBar";
Copy the code

Import {} from “file directory

import {foo, bar} from "./lib";
console.log(foo());
console.log(bar);
Copy the code
  1. If you need to export a single data, the data does not have a variable name. You can export the data using export default
/ / lib. Js file
export default "abc";
Copy the code

Instead, use import XXX from “file directory” to import. In this case, XXX is to obtain the variable name for the exported data

import defaultString from "./lib";
console.log(defaultString);
Copy the code
  1. The variable as to be exported is default. When importing, the name of the variable can be customized. Note that each module has only one default interface
//lib.js
let fn = () = > "string";
export {fn as default};

//main.js
import defaultFn from "./lib";
console.log(defaultFn());
Copy the code
  1. You can import all exported variables in batches using the wildcard *
import * as circle from './circle';
Copy the code
  1. Using import ‘file path’ is equivalent to importing a file; It could be a relative path or an absolute path
import 'https://code.jquery.com/jquery-3.3.1.js'
Copy the code

And this form, no matter how many times you import it, will only import it once

  1. Import dynamically using the import() function

By default, import syntax cannot be written to if and so on. Use import() to import dynamically, like require() in node. Import () returns a value, which is a PROMISE object. You can use then()

import('./modules/1.js').then(res= >{
  console.log(res.a+res.b);
});
Copy the code

That’s pretty much all the formats for modules!

In general, there are a few caveats when using modularity:

A. To use modules, add type=”module” to inform the browser that this is the code related to modularity

<script type="module">
  import './modules/1.js';// This format is equivalent to importing 1.js files
</script>
Copy the code

B. Import will be automatically promoted to the top and executed first

C. ES6 imported modules are all references. Every imported JS module is alive, and every time the variables or functions of the module are accessed, they are the latest. If the timer changes inside the module, the outside will also change. This is different from community-defined Commonjs, AMD, CMD

D. The variable name in curly braces must be the same as the name of the external interface of the module to be imported. Similar to the deconstruction of objects

E. File path. The.js suffix can be omitted