ES6 series twelve: Module

"Code tailor" provides technical-related information and a series of basic articles for front-end developers. Follow the "Novices of Xiaoheshan" public account on WeChat to get the latest articles in time.

Preface

Before starting to learn, what we want to tell you is that this article is "Module" book "Introduction to ECMAScript6" by Ruan Yifeng. If you have mastered the following knowledge items, you can skip this link directly Go to exercise

• What is modularity?
• What are the functions of the import command and the export command?
• How to load the module as a whole
• What does the export default command do?

If you have forgotten some parts, 👇🏻 is ready for you!

Learning link

Module learning

Summary

What is modularity

Historically, JavaScript has never had a module system, and it is impossible to split a large program into small files that depend on each other, and then assemble them in simple ways.

The design idea of ES6 modules is to be as static as possible, so that the dependencies of the modules and the input and output variables can be determined at compile time.

The module function mainly consists of two commands: export and import . export command is used to specify the external interface of the module, and the import command is used to enter the functions provided by other modules.

export command

A module is an independent file. All the variables inside the file cannot be obtained from the outside. If you want the external to be able to read a variable inside the module, you must use the export keyword to export the variable. The following is a JS file, which uses the export command to output variables.

• Output variable

// profile.js
export var firstName = 'Michael'
export var lastName = 'Jackson'
export var year = 1958

//等同于下列代码
var firstName = 'Michael'
var lastName = 'Jackson'
var year = 1958

export { firstName, lastName, year }

The above code is the profile.js file, which saves the user information. ES6 regards it as a module, which uses the export command to export three variables to the outside.

• Output function or class (class)

export function multiply(x, y) {
  return x * y;
};

通常情况下，export输出的变量就是本来的名字，但是可以使用as关键字重命名

function v1() { ... }
function v2() { ... }

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

Another: The interface output by the export statement and its corresponding value are dynamically bound, that is, through this interface, the real-time value inside the module can be obtained.

import command

After the external interface of the module is defined using the export command, other JS files can load the module through the import command.

// main.js
import { firstName, lastName, year } from './profile.js'

function setName(element) {
  element.textContent = firstName + ' ' + lastName
}

//import命令接受一对大括号，里面指定要从其他模块导入的变量名。大括号里面的变量名，
//必须与被导入模块（profile.js）对外接口的名称相同。

• If you want to rename the input variable, the import command should use the as keyword to rename the input variable.

import { lastName as surname } from './profile.js'

• The variables entered by the import command are read-only. It is not allowed to rewrite the interface in the script that loads the module.

import { a } from './xxx.js'
a = {} // Syntax Error : 'a' is read-only;

// 但是如果a是一个对象，改写a的属性是允许的
import { a } from './xxx.js'
a.foo = 'hello' // 合法操作

• The from behind import specifies the location of the module file, which can be a relative path or an absolute path. If there is no path, just a module name, then there must be a configuration file that tells the JavaScript engine the location of the module.

import { myMethod } from 'util'
//  util是模块文件名，由于不带有路径，必须通过配置，告诉引擎怎么取到这个模块。

• The import command has a boosting effect. It will be boosted to the head of the entire module and executed first.

Overall loading of modules

In addition to specifying to load a certain output value, you can also use overall loading, that is, use an asterisk (*) to specify an object, and all output values are loaded on this object.

// circle.js

export function area(radius) {
  return Math.PI * radius * radius
}

export function circumference(radius) {
  return 2 * Math.PI * radius
}

import * as circle from './circle'

console.log('圆面积：' + circle.area(4))
console.log('圆周长：' + circle.circumference(14))

export default command

In order to provide convenience to users, they can load modules without knowing the name of the variable or function to be loaded.

// export-default.js
export default function () {
  console.log('foo')
}

The above code is a module file export-default.js, and its default output is a function. When other modules load the module, the import command can specify any name for the anonymous function.

// import-default.js
import customName from './export-default'
customName() // 'foo'

Self-test

1: Regarding the ES6 module module, which of the following statements is wrong?

• A: It can effectively solve the complex dependency problem of large system files
• B: Use the export statement to selectively expose your own properties or methods to the outside
• C: Use the import statement to import attributes or methods of other modules
• D: At present, most mainstream browsers support module modules

---

2: The output result of the following code is ()

// module.js
export default () => 'Hello world'
export const name = 'Lydia'

// index.js
import * as data from './module'

console.log(data)

• A: { default: function default(), name: "Lydia" }
• B: { default: function default() }
• C: { default: "Hello world", name: "Lydia" }
• D: Global object of module.js

---

3: Briefly describe the difference between export and export default

---

Problem analysis

One,

Answer: D

---

II,

Answer: A

Using import* as the name syntax, we archive module.js index.js will create a new object file named data. There are two exports in the module.js file: the default export and the named export. The default export is a function, which returns the string “helloworld” , the named export is a name , and the value of the variable is the string “Lydia” .

Data objects have default attributes that are exported by default, and other attributes have names and their corresponding values for named exports.

---

three,

The objects, variables, functions, and classes of export default export must have the name export default There can only be one in a module, of course, it does not have to be. export may have a plurality of modules export default corresponding import and export differ: YES default introducing unnecessary {}

ES 6 series of Modules, we are over here, thank you for your support to the authors! Your attention and praise will be the strongest driving force for us to move forward! thank you all!