随笔- 60  文章- 14  评论- 17 

两种加载方式

加载方式

规范

命令

特点

运行时加载

CommonJS/AMD

require

社区方案,提供了服务器/浏览器的模块加载方案

非语言层面的标准

只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。

编译时加载

ESMAScript6+

import

语言规格层面支持模块功能

支持编译时静态分析,便于JS引入宏和类型检验

动态绑定

export命令

定义

export命令用于规定模块的对外接口

输出变量

1.       单个输出

// profile.js

export var firstName = 'Michael';

export var lastName = 'Jackson';

export var year = 1958;

2.       批量输出

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};

3.       重命名

var n = 1;
export {n as m};
4. 动态绑定

export语句输出的接口,与其对应的值是动态绑定关系,即通过该接口,可以取到模块内部实时的值。

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);

上面代码输出变量foo,值为bar500毫秒之后变成baz

输出函数

1.       单个输出

a)         方式一

export function multiply(x, y) {
 return x * y;
};

b)         方式二

function f() {}
export {f};
 

2.       批量输出

function v1() { ... }
function v2() { ... }
export {v1,v2}

3.       重命名

function v1() { ... }
function v2() { ... }
export {
 v1 as streamV1,
 v2 as streamV2,
 v2 as streamLatestVersion
};
重命名后,v2可以用不同的名字输出两次。

 

输出类

export default

import命令

定义

使用export命令定义了模块的对外接口以后,其他JS文件就可以通过import命令加载这个模块(文件)。

导入变量

1.       批量导入

import命令接受一个对象(用大括号表示),里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。
 import {firstName, lastName, year} from './profile';

2.       重命名

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

提升

import命令具有提升效果,会提升到整个模块的头部,首先执行

foo();

import { foo } from 'my_module';

上面的代码不会报错,因为import的执行早于foo的调用。

执行

import语句会执行所加载的模块,因此可以有下面的写法。

import 'lodash';

上面代码仅仅执行lodash模块,但是不输入任何值

小结

1.       import命令导入的对象可能是一个变量,也可能是一个函数,或者一个类,要视具体情况而定。

2.       importrequire的差异较大,最大不要混用。要尽可能的使用import.

more

 posted on 2016-06-15 16:57  heoo  阅读(...)  评论(...编辑  收藏