ES6详解八:模块(Module)!

原创 2015年10月10日 22:31:28

modules是ES6引入的最重要一个特性。
所以以后再写模块,直接按照ES6的modules语法来写,然后用 babel + browserify 来打包就行了。

modules规范分两部分,一部分是如何导出,一部分是如何导入。

基本用法

命名导出(named exports)

可以直接在任何变量或者函数前面加上一个 export 关键字,就可以将它导出。
这种写法非常简洁,和平时几乎没有区别,唯一的区别就是在需要导出的地方加上一个 export 关键字。
比如:

export const sqrt = Math.sqrt;
export function square(x) {
    return x * x;
}
export function diag(x, y) {
    return sqrt(square(x) + square(y));
}

然后在另一个文件中这样引用:

import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3));

你可能会注意到这个奇怪的语法 { square, diag } 不就是前面讲过的 destructing吗。所以你会以为还可以这样写:

 import lib from 'lib';
 square = lib.square;

但是其实这样是错的,因为 import { square, diag } from 'lib’; 是import的特有语法,并不是 destructing 语法,所以其实import的时候并不是直接把整个模块以对象的形式引入的。

如果你希望能通过 lib.square 的形式来写,你应该这样导入:

 import * as lib from 'lib';
 square = lib.square;

不过值得注意的一点是,如果你直接用babel编译,执行是会报错的。因为 babel 并不会完全编译 modules,他只是把 ES6 的modules语法编译成了 CMD 的语法,所以还需要用 browserify 之类的工具再次编译一遍。
如果你发现 browserify 找不到 lib,可以改成 from ‘./lib’ 试试。

默认导出

大家会发现上面的写法比较麻烦,因为必须要指定一个名字。其实很多时候一个模块只导出了一个变量,根本没必要指定一个名字。
还有一种用法叫默认导出,就是指定一个变量作为默认值导出:

 //------ myFunc.js ------
export default function () { ... };

//------ main1.js ------
import myFunc from 'myFunc';
myFunc();

默认导出的时候不需要指定一个变量名,它默认就是文件名。
这里的区别不仅仅是不用写名字,而是 导出的默认值就是模块本身,而不是模块下面的一个属性,即是 import myFunc from 'myFunc’; 而不是 import {myFunc} from 'myFunc’;

命名导出结合默认导出

默认导出同样可以结合命名导出来使用:

export default function (obj) {
    ...
};
export function each(obj, iterator, context) {
    ...
}
export { each as forEach };

上面的代码导出了一个默认的函数,然后由导出了两个命名函数,我们可以这样导入:

 import _, { each } from 'underscore';

注意这个逗号语法,分割了默认导出和命名导出

其实这个默认导出只是一个特殊的名字叫 default,你也可以就直接用他的名字,把它当做命名导出来用,下面两种写法是等价的:

import { default as foo } from 'lib';
import foo from 'lib';

同样的,你也可以通过显示指定 default 名字来做默认导出, 下面两种写法是一样的:

 //------ module1.js ------
export default 123;

//------ module2.js ------
const D = 123;
export { D as default };

仅支持静态导入导出

ES6规范只支持静态的导入和导出,也就是必须要在编译时就能确定,在运行时才能确定的是不行的,比如下面的代码就是不对的:

//动态导入
var mylib;
if (Math.random()) {
    mylib = require('foo');
} else {
    mylib = require('bar');
}
//动态导出
if (Math.random()) {
    exports.baz = ...;
}

为什么要这么做,主要是两点:

  1. 性能,在编译阶段即完成所有模块导入,如果在运行时进行会降低速度
  2. 更好的检查错误,比如对变量类型进行检查

各种导入和导出方式总结

总结一下,ES6提供了如下几种导入方式:

// Default exports and named exports
import theDefault, { named1, named2 } from 'src/mylib';
import theDefault from 'src/mylib';
import { named1, named2 } from 'src/mylib';

// Renaming: import named1 as myNamed1
import { named1 as myNamed1, named2 } from 'src/mylib';

// Importing the module as an object
// (with one property per named export)
import * as mylib from 'src/mylib';

// Only load the module, don’t import anything
import 'src/mylib';

如下几种导出方式:

 //命名导出
export var myVar1 = ...;
export let myVar2 = ...;
export const MY_CONST = ...;

export function myFunc() {
    ...
}
export function* myGeneratorFunc() {
    ...
}
export class MyClass {
    ...
}
// default 导出
export default 123;
export default function (x) {
    return x
};
export default x => x;
export default class {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }
};
//也可以自己列出所有导出内容
const MY_CONST = ...;
function myFunc() {
    ...
}

export { MY_CONST, myFunc };
//或者在导出的时候给他们改个名字
export { MY_CONST as THE_CONST, myFunc as theFunc };

//还可以导出从其他地方导入的模块
export * from 'src/other_module';
export { foo, bar } from 'src/other_module';
export { foo as myFoo, bar } from 'src/other_module';

注:
主要参考这篇文章:http://www.2ality.com/2014/09/es6-modules-final.html

版权声明:本文为博主原创文章,未经博主允许不得转载。

ES6 模块化(Module)export和import详解

转载请注明预见才能遇见的博客:http://my.csdn.net/ 原文地址: ES6 模块化(Module)export和import详解 ES6 在语言标准的层面上,实现了模块功能,而且实现得相...
  • pcaxb
  • pcaxb
  • 2016年12月15日 14:48
  • 8707

es6 javascript的模块module(下)

8 循环加载“ 循环加载”( circular dependency) 指的是, a脚本的执行依赖b脚本, 而b脚本的执行又依赖a脚本。 // a.js var b = require('b...
  • qq_30100043
  • qq_30100043
  • 2016年12月13日 16:26
  • 653

es6 javascript的模块module(上)

ES6 的 Class 只是面向对象编程的语法糖, 升级了 ES5 的构造函数的原型链继承的写法, 并没有解决模块化问题。 Module 功能就是为了解决这个问题而提出的。 历史上, JavaScri...
  • qq_30100043
  • qq_30100043
  • 2016年12月12日 18:41
  • 1286

es6模块的导入和执行顺序

第一部分开始   //这个先执行 console.log('inner module'); import {con} from "./inlinefirst.js"; con(); 第二部...
  • zgrbsbf
  • zgrbsbf
  • 2017年10月19日 18:00
  • 242

初步探究ES6之module模块化

多人开发javascript时伴随着命名冲突等问题,先后有了模拟块级作用域、命名空间、模块化开发等方法。之前,模块化开发一直是由第三方库来模拟的,比较知名的有AMD规范和CMD规范。两个规范分别对应r...
  • mevicky
  • mevicky
  • 2015年11月25日 16:42
  • 2716

ES6入门 —— Class和Module

一、ClassES6引入了Class(类)这个概念,作为对象的模板。通过class关键字,可以定义类。 // 定义类 class Point() { constructor...
  • u014695532
  • u014695532
  • 2016年07月03日 14:09
  • 6775

ES6学习——模块化:import和export

关于JS模块化的使用,大家肯定不默认,现有的主要有两种CMD和AMD,还有一种兼容CMD和AMD写法的UMD。一般前端框架都支持AMD,而node.js采用的是CMD的模块语法。 ES6中规范化了模块...
  • kittyjie
  • kittyjie
  • 2016年02月07日 15:35
  • 20261

从零开始学_JavaScript_系列(68)——es6模块的使用

1、es6模块用于浏览器中标准写法是: console.log('module') 按照预期效果是会非堵塞加载,然后再执行。事实上是里面的代码根本不会执行。又比如说: 你以为会...
  • qq20004604
  • qq20004604
  • 2017年09月17日 23:05
  • 589

es6 import和require用法和区别

写个简单js文件,假设名字为:lib.js 。 假设内容如下: export const sqrt = Math.sqrt; export function square(x) { retu...
  • DimaLLJ
  • DimaLLJ
  • 2017年10月29日 13:16
  • 597

前端开发不得不知的ES6十大新特性

前端开发不得不知的ES6十大新特性
  • u012860063
  • u012860063
  • 2017年03月15日 11:59
  • 2966
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ES6详解八:模块(Module)!
举报原因:
原因补充:

(最多只允许输入30个字)