首页 > 其他 > 详细

ES6 标准入门-Module

时间:2018-01-03 00:11:52      阅读:215      评论:0      收藏:0      [点我收藏+]

1、ES6模块的设计思想是尽量静态化,使得编译时就会确定模块的依赖关系,以及输入和输出的变量。CommonJS和AMD模块都只能在运行时确定这些东西。

2、ES6模块不是对象,而是通过export显示指定输出的代码

3、严格模式

ES6的模块自动采用严格模式

4、export命令

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

export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能

5、import命令

6、模块的整体加载

除了指定加载某个输出值,还可以使用整体加载,即用*指定一个对象,所有输出值都加载在这个对象上,下面是circle.js文件,输出两个方法:area和circumference

// circle.js
export function area(radius){
  return Math.PI * radius * radius;
}
export function circunference(radius){
  return 2*Math.PI*radius;
}

现在加载这个模块

// main.js
import {area,circunference} from ‘./circle‘;
console.log("圆面积:"+area(4));
console.log("圆周长:"+circunference(14));

上面的写法逐一指定要加载的方法,整体加载的写法如下:

import * as circle from ‘./circle‘;
console.log("圆面积:"+circle.area(4));
console.log("圆周长:"+circle.circunference(14));

7、module命令

module命令可以取代import语句,达到整体输入模块的作用。

// main.js
module circle from ‘./circle‘
console.log("圆面积:"+circle.area(4));
console.log("圆周长:"+circle.circunference(14));

8、export default 命令

// export-default.js
export default function() {
  console.log(‘foo‘);
}
// import-default.js
import customname from ‘./export-default‘;
customname();//‘foo‘

上面的import命令可以用任何名称指向export-default.js输出的方法,这时就不需要知道原模块输出的函数名。需要注意的是,这时import命令后面不使用大括号

下面比较一下默认输出和正常输出

// 第一组
export default function crc32() { // 输出
  // ...
}

import crc32 from ‘crc32‘; // 输入

// 第二组
export function crc32() { // 输出
  // ...
};

import {crc32} from ‘crc32‘; // 输入

 

上面代码的两组写法,第一组是使用export default时,对应的import语句不需要使用大括号;第二组是不使用export default时,对应的import语句需要使用大括号。

export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能对应一个方法。

9、ES6模块加载的实质

ES6模块加载的机制与CommonJS模块完全不同。CommonJS模块输出的是一个值的拷贝,而ES6模块输出的是值的引用。

因此,ES6模块是动态引用,并且不会缓存值,模块里面的变量绑定其所在的模块

ES6 标准入门-Module

原文:https://www.cnblogs.com/lu-yangstudent/p/8072648.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!