02. The modular relevant norms

1. Overview of the modular
main problem with traditional development model

Naming conflict: refers to the js files between multiple variables if the same name exists, the variable coverage problems occur;
File depends: Refers to reference each other can not be achieved between the js file

Addresses the issue through modular

The modular function is to separate encapsulated into a module (file), the isolation between modules, but may be disclosed by a specific interface into the internal
member can also rely on other modules
The benefits of modular development: to facilitate code reuse, so as to enhance development efficiency, and easy maintenance later

2. The browser-side modular specification (obsolete, not recommended, recommended ES6 modular specification)

AMD
Require.js(http://www.requirejs.cn/)
CMD
Sea.js(https://seajs.github.io/seajs/docs/)

3. The modular server specifications

The CommonJS
① into a single module and file module package
② export module members: module.exports and Exports
③ import module members: require ( 'module identifier')

4. unified modular specification -ES6 modular
before standardized modular ES6 birth, Javascript communities have tried and proposed AMD, CMD, CommonJs and other modular specification.
However, these communities have modular standards, or there are some differences and limitations, not the browser and server versatile modular standards, such as:

AMD and CMD suitable for browser-side Javascript modular
CommonJs suitable for modular server-side Javascript

Therefore, ES6 grammar specification, defined in the language level of the ES6 modular specification, is browser and server versatile modular development specifications.

Modular ES6 defined in the specification:

Each js file is a separate module
Import module members to use the import keyword
Exposure module members to use the export keyword

4.1 Node.js by babel experience ES6 modular
mounting babel related libraries (. 1)
NPM-dev the install --save babel @ / @ babel Core / CLI babel @ / @ babel the env-PRESET / Node
(2) installation of additional third-party plug-ins
npm install --save @ babel / polyfill
(3) project to create a file with babel.config.js directory
(4) babel.config.js document reads as follows Code

//presets：语法转换的数组，提供在转换期间可能会用到的语法转换插件
const presets=[
    ["@babel/env",{
    //转换完毕之后的代码至少要支持以下浏览器
        targets:{
            edge:"17",
            firefox:"60",
            chrome:"67",
            safari:"11.1"
            }
        }]
     ];
     //向外暴露，供babel来进行使用
      module.exports={presets};

(5) execution of the code by npx babel-node index.js

5 ES6 modular basic syntax
(1). The default default import and export

Export Members grammar export default default default export
Import Default syntax import receives the name from 'module identifier'

Default export

//当前文件模块为m1.js

//定义私有成员a和c
let a=10
let c=20
//外界访问不到变量d，因为它没有被暴露出去
let d=30
function show(){}

//将本模块中的私有成员暴露出去，供其它模块使用
export default{
 a,
 c,
 show
}

Default import

//导入模块成员
import m1 from './m1.js'

console.log(m1)
//打印输出的结果为：
//{a:10,c:20,show:[Fuction:show]}

02. The modular relevant norms

Guess you like