码迷,mamicode.com
首页 > 其他好文 > 详细

ES6 的模块系统

时间:2016-01-04 13:16:22      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:

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

  ES6 是 ECMAScript 第 6 版本的简称,这是新一代的 JavaScript 的标准。ES6 in Depth 是关于 ES6 的一系列新特性的介绍。

  ES6 是 ECMAScript 第 6 版本的简称,这是新一代的 JavaScript 的标准。ES6 in Depth 是关于 ES6 的一系列新特性的介绍。

  遥想 2007 年,笔者开始在 Mozilla 的 JavaScript 团队工作的时候,那个时候典型的 JavaScript 程序只有一行代码。

  两年之后, Google Map 被发布。但是在那之前不久,JavaScript 的主要用途还是表单验证,当然啦,你的<input onchange=>处理器平均来说只有一行。

  事过情迁,JavaScript 项目已经变得十分庞大,社区也发展出了一些有助于开发可扩展程序的工具。首先你需要的便是模块系统。模块系统让你得以将你的工作分散在不同的文件和目录中,让它们之前得以互相访问,并且可以非常有效地加载它们。自然而然地,JavaScript 发展出了模块系统,事实上是多个模块系统(AMD,CommonJS,CMD,译者注)。不仅如此,社区还提供了包管理工具(NPM,译者注),让你可以安装和拷贝高度依赖其他模块的软件。也许你会觉得,带有模块特性的 ES6,来得有些晚了。

模块基础

一个 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对象进行导入, 你也可以同样可以将其重新导出.如最后一行

 

默认导出  

 

  资料来源:

  ES6 的模块系统

  理解ES6的Modules

ES6 的模块系统

标签:

原文地址:http://www.cnblogs.com/pingfan1990/p/5098409.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!