ECMAScriptES6 的模块系统

  遥想 2007 年,笔者开首在 Mozilla 的 JavaScript
团队工作之时段,那几个时段典型的 JavaScript 程序只暴发一行代码。

  ES6 是 ECMAScript 第 6 版本的简称,这是新一代之 JavaScript
的标准。ES6 in
Depth
 是有关 ES6
的同样多样新特性的牵线。

  事过情迁,JavaScript
项目已经变得好极大,社区也发展起了一部分促进开发而扩张程序的家伙。首先你需要的即便是模块系统。模块系统受您能够你的工作分散于不同之文书与目录中,让其前可互相走访,并且可至极管用地加载它们。自不过然地,JavaScript
发展出了模块系统,事实上是基本上独模块系统(英特尔,CommonJS,CMD,译者注)。不仅如此,社区还提供了保证管理工具(NPM,译者注),让您得设置及拷贝中度看重其他模块的软件。也许你谋面当,带有模块特性的
ES6,来得有些晚矣。

  ES6 是 ECMAScript 第 6 版本的简称,那是新一代的 JavaScript
的正儿八经。ES6 in
Depth
 是有关 ES6
的平等系列新特性的介绍。

  原文地址:https://hacks.mozilla.org/2015/08/es6-in-depth-modules/

  两年后, Google Map 被发布。不过以这在此以前快,JavaScript
的重要用途依然表单验证,当然啦,你的<input onchange=>处理器平均来说只是出一行。

模块基础

一个 ES6 的模块是一个富含了 JS 代码的文件。ES6
里不曾所谓的 module 关键字。一个模块看起就是和一个平凡的剧本文件一律,除了以下简单只组别:

  • ES6 的模块自动开启严苛形式,即便你无写 'use strict'

  • 君得当模块中接纳 import 和 export.

  导出export
分为命名导入和默认导出

  命名导入

  让我们先行来探 export。在模块中宣称的另东西都是默认私有的,如果你想对此外模块
Public,你不可能不 export 这部分代码。我们来几乎种实现格局,最简便的形式是添加一个 export 关键字。

// kittydar.js - Find the locations of all the cats in an image.
// (Heather Arthur wrote this library for real)
// (but she didn't use modules, because it was 2013)

export function detectCats(canvas, options) {
  var kittydar = new Kittydar(options);
  return kittydar.detectCats(canvas);
}

export class Kittydar {
  ... several methods doing image processing ...
}

// This helper function isn't exported.
function resizeCanvas() {
  ...
}
...

  通过export导出的花样,文件utility.js:

function generateRandom() {
    return Math.random();
}

function sum(a, b) {
    return a + b;
}

export { generateRandom, sum }

//关键词export 导出了这两个函数, 你可以看到, 这两个导出的函数是使用花括号进行包围, 并且他们使用逗号进行隔开.
你也可以使用下面的方式对导出的内容进行重命名.
export {generateRandom as random, sum as doSum}

  下面我们更来看望哪些以外的模块中凡是什么了杀那些导出的值.

  app.js

import { generateRandom, sum } from'utility';

console.log(generateRandom());//logs a random number
console.log(sum(1, 2));//3

  注意第一行. 它用自utility模块中导入值. 当然,
倘诺你唯有想导出一个价值(例如sum), 你可以运用下的不二法门:

import { generateRandom, sum } from'utility';

  同样,
你呢得以以一切模块当作一个靶导入, 然后引用的早晚, 使用对象属性的方法.
所以大家可拔取下的法门:

import 'utility' as utils;

console.log(utils.generateRandom());//logs a random number
console.log(utils.sum(1, 2));//3

  默认导出  

  ”默认导出”和”重导出”(Default Exports and
Re-exporting),
假使你才想从一个模块中导出一个价, 可以用默认导出.
为了演示默认导出的用法, 大家要修改utility.js

var utils = {
  generateRandom:function() {
    return Math.random();   
  },
  sum:function(a, b) {
    return a + b;
  }
};

export default utils;

  最终一尽以utils 这些变量举办导出. 而于其余一个模块中, 引用方法如下:

  app.js

import utils from'utility';

console.log(utils.generateRandom());//logs a random number
console.log(utils.sum(1, 2));//3
export default utils; //exports the imported value

  第一履行代码首先将utils对象开展导入,
你吗可以等效可以将该再导出.如最终一行

 

沉默寡言认导出  

 

  资料来源于:

ECMAScript,  ES6 的模块系统

  理解ES6的Modules