ES6语法之Module语法

历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来。其他语言都有这项功能,比如 Ruby的require、Python的import,甚至连CSS都有@import,但是JavaScript任何这方面的支持都没有,这对开发大型的、复杂的项目形成了巨大的障碍。

在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

模块功能(module)主要由2个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

一、export命令

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

上面代码是profile.js文件保存了用户信息,ES6将其视为一个模块,里面用export命令对外输出了3个变量

// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export { firstName,lastName,year};

上面代码在export命令后面,使用大括号指定所要输出的一组变量.他与前一种写法是等价的,但是应该优先考虑使用这种写法。因为这样就可以在脚本尾部,一眼就看清楚了输出了那些变量

export 命令除了输出变量,还可以输出函数或类(class)

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

上面代码对外输出一个函数multiply

提倡情况下 export输出的变量就是本来的名字,但是可以使用as关键字重命名

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

export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

上面代码使用as关键字重命名了函数v1和v2的对外接口,重命名后v2可以用不同的名字输出两次

二、import命令

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

// main.js
import { firstName, lastName, year } from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

上面代码的import命令,用于加载profile.js文件,并从中输入变量。import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

三、模块的整体加载

除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。

下面是一个circle.js文件,它输出两个方法area和circumference。大括号里面的变量名,必须与被导入模块(profile.js)对外接口的名称相同。

// circle.js

export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

现在,加载这个模块。

import * as circle from './circle';

console.log('圆面积:' + circle.area(4));
console.log('圆周长:' + circle.circumference(14));

四、export default 命令

从前面的例子可以看出,使用import命令的时候,用户需要知道所要加载的变量名或函数名,否则无法加载。但是,用户肯定希望快速上手,未必愿意阅读文档,去了解模块有哪些属性和方法。

为了给用户提供方便,让他们不用阅读文档就能加载模块,就要用到export default命令,为模块指定默认输出。

text.js

  export default  {
  	  you: '你今年多大了',
  	  me : '我出去玩了',
  	 he : '他在上班',

  }

现在我们加载这个模块

import hex from './model/text.js'
	console.log(hex)

声明:文章系参考与借鉴于阮一峰老师的ES6相关教程。

发表评论

电子邮件地址不会被公开。 必填项已用*标注