This is the 30th day of my participation in the August Text Challenge.More challenges in August

preface

Hello everyone, today we are going to talk about ES6 modularity, god please take a detour, because this article is excerpted from my notes when I just started

There has always been no module system in javascript before. In order to solve these problems, predecessors put forward various specifications, the most important of which are CommonJS and AMD. The former is used for servers and the latter for browsers. ES6 provides a simple module system that can completely replace the existing CommonJS and AMD specifications and become a common module solution for browsers and servers.

The basic use

A module is an independent file. All variables inside the file are not available externally. If you want outsiders to be able to read a variable inside a module, you must use the export keyword to output that variable. Here is a JS file that uses the export command to output variables.

Two new commands are added in ES6: export and import. The export command defines the external interface of a module, and the import command inputs functions provided by other modules

// a.js export const name = 'hucc' export const age = 18 export const desc = 'hucc'Copy the code

Once the module interface is defined using the export command, other JS files can load the module (file) using the import command.

//main.js import {name, age, desc} from './a.js' console.log(' Exported from inside module :', name, age, desc)Copy the code

The export,

Export can export not only functions, but also objects, arrays, strings, and so on

//a.js
export const name = 'hucc'
export const arr = [1, 2, 3]
export const obj = {
  name: 'zs',
  age: 18
}
Copy the code

So there’s another way to write export.

//a.js const name = 'hucc' const arr = [1, 2, 3] const obj = { name: 'zs', age: 18} // Advantages: The above code follows the export command and uses curly braces to specify a set of variables to be output. It is equivalent to the former, but should be preferred. This way, at the end of the script, you can see what variables are being output. export {name, arr, obj}Copy the code

Change the output name with AS

//a.js const name = 'hucc' const arr = [1, 2, 3] const obj = { name: 'zs', age: 18} // change obj's name to user, Export {name, arr, obj as user} //main.js import {name, arr, user} from './a.js' console.log(' read values: ', name, arr, user)Copy the code

In the above notation, import must specify the name of the loaded variable or function, otherwise it cannot be loaded. However, users will want to get started quickly and may not want to read the documentation to learn what properties and methods a module has.

Export default specifies the default output, and import can be used without knowing the variable name

//a.js export default function fn () {console.log(' ha ha ')} //main.js import a from './a' a()Copy the code

Note: Export default is an unusual syntax that is often used. Take some commonly used modules as examples

Import $from 'jQuery' // Load jQuery library import _ from 'lodash' // Load lodash import moment from 'moment' // Load momentCopy the code

The import,

Import is the command to load a module, and is used basically the same way as before

//main.js import {name, arr, user} from './a'Copy the code

Run the as command to change the names of imported variables

//main.js
import {name as n, arr, user} from './a'
Copy the code

Load the entire contents of the module

//a.js const name = 'hucc' const arr = [1, 2, 3] const obj = { name: 'zs', age: 18} export {name, arr, obj as user} //math.js // Import * as all from './a' console.log(all.name) console.log(all.arr) console.log(all.user) import * as all from './a' console.log(all.arr) console.log(all.user)Copy the code

Compatibility Note

The above introduction, es6 module use way, but now es6 modular, no matter in the browser side or Node.js are not well supported, so need, some transcoding tools (Babel), so that we can use ES6 way to code, finally output ES5 code.

Afterword.

Hello, I am the South Pole ice cube, a technology and appearance level proportional to the front-end engineer, advocating to solve front-end problems, I hope my blog has helped you.

Pay attention to me and walk together on the front road. Hey ~ 😛