JS summing up (3) - Module

1. ES6 Module

1.1 export

export Export module, an object is exported, so when the value changes, the change will follow export content, a plurality of contents can be derived module

export let val = 0
setTimeout(() => {
    val = 1
}, 100)

export defaultExport specified default output, a module allows only one. The essence is to follow later in value to a defaultvariable and then export, so the back can only have value with the value of the content or not the statement with statement

1.2 import

importThe introduction and execution module executes at compile time, enhance the effect with a variable

Since the compile-time, you can not use expressions or variables

import { 'f' + 'oo' } from './test' // 报错

The introduction of multiple modules only once

import { foo } from './test' 
import { bar} from './test' 
// 等同于
import { foo, bar } from './test'

After the run is not allowed to modify the overall load time

import * as test from './test'
test.foo = () => {} // 报错

importHTML can not run out while requireyou can

import test from './test' // 当运行单个js文件时报错
let test = require('./test') // 正常导入模块

1.3 asynchronous loading

The browser loads scriptare usually synchronized, the load and execution process will stop rendering. This will result in a bad user experience, and therefore join the asynchronous loading
deferstart downloading the face of the label, execution after the end of page rendering, more defercan guarantee the order loaded
asyncto start downloading the face of the label, file download immediately perform well, more asynccan not be guaranteed order

2. CommenJS module

2.1 Modular issues

Due to language problems, Javascript inherently non-modular, so in order to solve this problem there are a lot of programs.
Browser:

1. <script>Label reference load, load order problem must be considered
2. require.js AMD third-party libraries
3. sea.jsCMD third-party libraries
   either CommonJS, AMD, CMD, UMD, ES6 Modulesare made to address Javascriptmodularity problem
   ES6 Modulesis JS modular solutions provided by the official
   Nodeitself provides a modular and for the 8.5 version ES6 Modulessupports the

2.2 Load Module

1. Module is divided into the core module and file module, the core module entirely by the C / C ++ to write called the built-in module
2. Priority load modules from the cache, the cache is the object after compiling execution
3. The core module is loaded fastest path followed form, custom module slowest (up layer by layer will be node_modulesin a directory)
4. When analyzing the package will be the first to package.jsonfile mainattribute specifies the file name entry, then click Find Now if that fails index.js, index.json,index.node
5. Within the module and external modules independently of each other, you can not access all the content in addition to export the contents of

2.3 compile modules

1. Each module is an object file, by require.extensionsloading different extension on the method of
2. By external packaging functionincoming require, exports, module, __filename, __dirnameand other variables

Import Export Module 2.4

1. requireAnd exports. may require execution code is loaded modules and get the object to be exported, exports can export the contents of the module you want to export
2. exportsParameter is passed, pointing to module.exportsempty by default objects. NodeIs exports, ES6 isexport
3. ES6 in exportcan occur more than once and each requires a variable name export defaultcan appear only once
4. NodeIt is actually exported module.exports, but exports = xxxthe syntax is actually modifying the reference parameters, and will not affect module.exports, so the results will lead to failure

2.5 asl

npm init -y // 快速生成package.json文件
npm install --global cnpm // 全局安装cnpm
npm install jquery --regisrty=https://registry.npm.taobao.org // 不安cnpm使用淘宝镜像
npm config set registry https://registry.npm.taobao.org // 将淘宝镜像配置进文件
npm config list // 查看配置文件

2.6 package.json 和package-lock.json

• npm 5 did not have before package-lock.jsonthe file, npm only joined after 5
• package.jsonBasic information file storage project, npm installwhen will prevail download dependencies to rely on this document
• When the installation package, NPM will generate or update package-lock.jsonthe file
• package-lock.jsonThe file is saved node_modulesin the information for all packages (version Download), when again npm installwhen you can improve download speed
• package-lock.jsonFiles can be locked dependent on the version, the new version to prevent automatic upgrades

3. ES6 module and the difference module CommenJS

1. CommonJS The input module is a copy of the value, ES6 module output is a reference value
2. CommenJS Run-time module is loaded, ES6 module is compiled with the output interface

4. circular reference

Due to practical application, it is difficult to avoid the interdependence between the modules and therefore the module cyclic loading is a problem that must be considered

4.1 CommonJS

模块aWhen loading dependence 模块b, stop loading 模块ato load 模块b, 模块bencountered in the load 模块a, the return 模块apart loaded, continue to load 模块bto the rear, and then returns to load模块a

// test.js
exports.done = false
var test2 = require('./test2')
console.log('在test中，test2.done = %j', test2.done)
exports.done = true
console.log('test执行完毕')
// test2.js
exports.done = false
var test = require('./test')
console.log('在test2中，test.done = %j', test.done)
exports.done = true
console.log('test2执行完毕')
// main.js
var test = require('./test')
var test2 = require('./test2')
console.log('执行完毕')
// 在test2中，test.done = false
// test2执行完毕
// 在test中，test2.done = true
// test执行完毕
// 执行完毕

4.2 ES6 module

Ibid., Still 模块aloaded 模块b, 模块bloaded 模块aget when 模块areturning, executing the 模块bexecution after the 模块a
difference is:
ES6module returns an object, the change will affect the value of the follow-up has returned the
CommonJSreturn value is the value of a subsequent change does not affect the return of
Thus the following code, ES6can be executed, CommonJSit is not

// even.js
import { odd } from './odd.js'
export let counter = 0
export function even(n) {
	counter ++
    return n == 0 || odd(n - 1)
}
// odd.js
import { even } from './even.js'
export function odd(n) {
    return n != 0 && even(n - 1)
}
// main.js
import * as res from './even.js'
res.even(10)
console.log(res.counter) // 6