ECMAScriptES6报法—Module模块化(下)

及等同篇稿子叙述了ES6之前的同等多样模块化规范,今天我们开正儿八经探讨ES6报法被之模块化

深信不疑大家也都经历了“过程式的JavaScript”、“面向对象的JavaScript”,再到现在之“面向模块的JavaScript”。

ES6以言语专业的范围达到,实现了模块功能,而且落实的一定简单,完全可代表取代
CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案

ES6Module语法的优点

ES6模块:静态加载(编译时加载)
CommonJS 和 AMD 模块:动态加载(运行时加载)

便 ES6 可以在编译时就是水到渠成模块加载,效率要比 CommonJS 模块的加载方式大

ES6模块的筹划思想,是硬着头皮的静态化,使得编译时就是会确定模块的依靠关系,以及输入和输出的变量
CommonJS 和 AMD 模块,都不得不以运作时规定这些东西

//ES6模块
import { one, two,  three} from 'Num';

上面的代码的凡文化从Num模块加载3单属性,其他艺术及总体性都未加载。这种加载成为“静态加载”或者“编译时加载”

// CommonJS模块
let { one, two, three} = require('Num');

//等同于
let num = require('Num');
let one = num.one;
let two= num.two;
let three = num.three ;

点代码的面目是完整加载Num模块(即加载fs的具有办法与特性),生成一个靶(num),然后再次由之目标方面读取3独属性。这种加载称为“动态加载”或者“运行时加载”

除外静态加载带来的各种利益,ES6 模块还有以下好处

  • 不再需要UMD模块
    格式,将来服务器和浏览器还见面支撑ES6模子片格式。目前,通过各种工具库,其实都形成了立即同样代表呢
  • 明天浏览器的新API就能够因此模块格式提供,不再用做全局变量或者navigator对象的性能
  • 不再需要对象作为命名空间(比如Math目标),未来这些职能可以通过模块提供

export和import命令

模块功能要发生半点单令成:exportimportexport指令用于规定模块的对外接口,import指令用于输入外模块提供的力量,简单来说就是是一个当作出口、一个作为输入

平等地,一个模块就是一个单独的文本。该公文里的有所变量,外部无法取得。如果您想外部能够读取内部的某部变量,就必以export重大字输出该变量。下面是一个profile.js文本,里面用export命输出变量

export输出变量

//输出变量
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};

export输出函数,同时可采取as重要字重命名

//输出函数
export function multiply(x, y) {
  return x * y;
};

//as关键词重命名
function v1() { ... }
function v2() { ... }


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

以下是main.js文本通过import加载是模块

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

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

无异于地,import加载方法及变量的时光可以以as根本字重命名

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

亟待着重注意的凡:exportimport令具有提升作用,会升级及全部模块的脑瓜儿,首先实施,不可知放在代码块内

到此地,你曾经感受及ES6型块语法的威力,简简单单地经exportimport指令达到了面向模块化编程的成效;技多不压身,下面又体会一下有关个别单命的有的恢宏

模块的完全加载

除此之外指定加载某个输出值,还可以使用完整加载,即用星号(*)指定一个靶,所有输出值都加载在斯目标方面。

import  * as name  from './profile'

export default命令

自从前方的例证可以看看,使用import命令的早晚,用户要了解所而加载的变量名或函数叫做,否则无法加载。但是,用户定要快达标亲手,未必乐意看文档,去探听模块出哪性与办法。
以吃用户提供方便,让他俩不要看文档就能够加载模块,就要采取export default命令,为模块指定默认输出。

//输出
export default var firstName = 'Michael';

//加载
import defaultName from './profile';
defaultName ;//Michael

export 以及 import 的复合写法

若果以一个模块之中,先输入后输出以及一个模块,import语句可以和export语句子写以共同。

export {firstName, lastName, year};


//等同于
import {firstName, lastName, year} from  './profile',
export {firstName, lastName, year}

import()

眼前介绍过,import命令会为 JavaScript
引擎静态分析。先于模块内之任何模块执行(叫做”连接“更恰当)。所以,下面的代码会报错。

// 报错
if (x === 2) {
  import MyModual from './myModual';
}

于是,有一个提案,建议引入import()函数,完成动态加载。import()类似于
Node 的require()措施,区别主要是前者是异步加载,后者是一道加载。

import(specifier)

方代码中,import函数的参数specifier,指定所要加载的模块的职。import命令能够经受什么参数,import()函数就可知领什么参数,两者分别主要是后世也动态加载。import()返回一个
Promise 对象,下面来拘禁一下import()函数的片运场所

(1)按需要加载

import()可以以待的下,再加载某个模块。

button.addEventListener('click', event => {
  import('./box.js')
  .then(box => {
    box.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

地方代码中,import()术在click事件之监听函数之中,只有用户点击了按钮,才见面加载是模块

(2)条件加载

import()可置身if代码块,根据不同的情况,加载不同的模块

if (condition) {
  import('moduleA').then(...);
} else {
  import('moduleB').then(...);
}

上面代码中,如果满足条件,就加载模块 A,否则加载模块 B。

(3)动态的模块路径

import()允许模块路径动态变化。

import(f())
.then(...);

地方代码中,根据函数f的归结果,加载不同之模块。

总结:

  • ES6模块化是平等密密麻麻前端模块化规范发展要来之,
    实现相当简单,完全好代表CommonJS 和 AMD
    规范,成为浏览器与服务器通用的模块解决方案。
  • 比起RequireJSSeaJS优势在语法简单
  • 比由CommonJS和AMD优势在静态加载(编译时加载)

参考

ECMAScript6Module的语法