ES6 Module

Sorry, this article is not written in English and has not been translated into English yet .You can view this article in English with Google Translate, or please come back later.

相对比起Python,PHP等其他语言,JavaScript 在设计上视乎缺失了模块管理的部分,不过好消息是这些问题很快就会得到解决,在下一代JavaScript ECMASCRIPT 6中,这个问题被很好的解决了。

ES6 Module 特性

Module 特性是在14年的7月被完全确认的,这就意味着到目前为止,语法相对比较稳定。

Module 包含了2个主要的部分,模块的定义 export 和模块的引入 import,如果是写过 Python 的同学对这个部分的概念会很容易理解,因为语法真的很像、很像。

一、Export

export 顾名思义,就是定义模块的输出,基础语法很简单:

export {export Name}

但根据输出的参数不同,它的表现形式也有所区别。

export var a = '123';

export function name(arguments){ //... }

export {nameA, nameB}

export default function name(arguments){ //.. }

export *

1. 直接输出

在前两行中,我们对外输出了一个变量a, 一个方法name, 你可能已经留意到了,我们的方法和变量的声明都是直接写在的export的后面,那么你会想如果export关键字后面直接填变量名会怎么样呢?

尝试如下:

// BAD EXAMPLE !!

var a = '123';

function name(arguments) { //... }

export a;

// or
// export name;

执行之后会发现,这种在export后面直接写变量名的方式是会触发Error的,这种情况下我们只能吧定义写在export的后面。那么问题来了,如果所有的定义都写在export后面的话,相信处女做的同学们可能会坐不住了,别急,我们有第二种的方法。

2. 输出变量

这种情况应该比第一种方法要常见,很多时候我们会在输出之前定义好方法或者变量,如果需要输出可以加一个花括号,同样拿上面的例子来说明:

var a = '123';

function name(arguments) { //... }

export {a,name};

// or
// export {a}
// export {name}

这样就能愉快的输出变量了,不过和 retrun 略有区别的是,我们在export 之后还能继续输出。

也就是说下面的两条语句的表现完全相同:

单行模式
export {a,name}
多行模式
export {a}
export {name}

3. default

default模式比较特殊,也比较有用,先看例子吧:

a.js
var $ = function(){}

$.prototype.show = function(){ //.. }

export default $
b.js
import jQuery from 'a.js'

由于还没有说到import所以占时忽略b.js , 这里的export default $ 是指该文件返回$方法/类,import 调用的时候可以自定义导入的名称。

简单来说,这种情况多用于封装大型类库,比如引入jQuery,backbone等之类的类库的时候,非常方便。

4. *

据说可以导出所有的变量和方法,但是没有实际测试过,后续接触到之后在详细解说。

二、Import

介绍完export之后import应该就不用再细说概念了,其实就是导入的意思,其使基本方法也异常简单:

import Name from Module

同样它也有几种表现形式:

import CustomerName from 'module';

import {nameA,nameB} from 'module'

import CustomerName,{nameA} from 'module'

import {name as alias} from 'module'

import 'module'

1. 导入default

正如export时候说到的default,在export中通过default定义的输出,我们可以简单的通过自定义方法名来导入默认模块。

例子参考export的default的例子,就不多说了。

2. 导读独立变量/方法

通过花括号,我们可以导入在exprot中声明的多个或一个变量/方法

例如:

a.js
var a = 1;
var b = 2;
var c = function(){ return 3 }

export {a,b,c}
b.js
// 一次导入一个变量/方法
import {a} from 'a.js'

// 一次导入多个变量/方法
import {b,c} from 'a.js'

console.log(a,b,c());

3. default 和 变量/方法 导入混用

实际上再使用过程中,import灰常灵活,我们甚至可以混合导入一些东西,例如:

a.js
var a = 1;
var b = 2;
var c = function(){ return 3 };
var d = function(){ return 4 };
export {a,b,c};
export default d;
b.js
// default 混合导入
import funD,{a,b,c} from 'a.js'
console.log(funD(), a, b, c())

4. 别名导入

除了default导入可以自定义名称外,我们可以通过as来声明别名

import {a as vara,c as func} from 'a.js'

5. 执行导入

很奇怪的一个方法,他会执行导入的方法中的js,但不会返回任何值。

a.js
var a = 1;
console.log(a)
export {a}
b.js
import 'a.js'
// 会执行a.js 在控制台输出 1

console.log(a)
// 返回 undefine 因为,import moudle 不会返回任何值,并且执行的环境也是在独立的scope

结尾

总的来说 ES6 的模块管理让我们看到了很多的希望,也给我们带了了更多的可能,不知道它会不会让AMD,CMD慢慢的走向坟墓。 至于大家问的比较多的问题,究竟什么时候可以使用 ES6 ,答案是现在就可以用,我们有很多编译工具,可以平稳的把ES6代码降级为兼容的ES5代码,后面有空我会单独来聊聊ES6的在项目中使用的方法的,今天就先说到这里吧。

61600
  • logo
    • HI, THERE!I AM MOFEI

      (C) 2010-2024 Code & Design by Mofei

      Powered by Dufing (2010-2020) & Express

      IPC证:沪ICP备2022019571号-1