ES6--模块

export命令
模块功能主要由两个命令构成:export和import。

export命令用于用户自定义模块,规定对外接口;
import命令用于输入其他模块提供的功能,同时创造命名空间(namespace),防止函数名冲突。

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

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

export {firstName, lastName, year};


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

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

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

为输入的变量重新取一个名字,import语句中要使用as关键字,将输入的变量重命名。
import { lastName as surname } from './profile';

模块的整体输入

// 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';

module命令
module命令可以取代import语句,达到整体输入模块的作用。
module命令后面跟一个变量,表示输入的模块定义在该变量上。

// main.js
module circle from 'circle';

document.write("圆面积:" + circle.area(4));
document.write("圆周长:" + circle.circumference(14));

export default命令
为加载模块指定默认输出,使用export default命令。

// export-default.js
export default function () {
  document.write('foo');
}
其他模块加载该模块时,import命令可以为该匿名函数指定任意名字
// import-default.js
import customName from './export-default';
customName(); // 'foo'

//需要注意的是,这时import命令后面,不使用大括号。

模块的继承
假设有一个circleplus模块,继承了circle模块。

// circleplus.js 
export * from 'circle';
export var e = 2.71828182846;
export default function(x) {
    return Math.exp(x);
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值