ES6笔记--module语法

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

在es6之前存在AMD(浏览器)和CommonJS(服务器)模块加载方案,而ES6的模块加载方案使其成为通用方案。ES6的模块加载机制在编译时就能确定模块的依赖关系,而AMD和CommonJS规范则在运行时才能确定加载依赖,因此ES6的模块规范是静态化的,编译时直接加载对应模块,具有天然的编译优势。

自动采用严格模式,在模块头部自动添加 "use strict",export和import必须在模块顶层,不能再块级作用域中。

ES6中的_import_(输入其他模块的功能) 和 export(对外提供接口)

Export

_ 输出一组变量:_

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

export {firstName, lastName, year};// profile.js

输出函数或类(class):

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

使用as关键字重命名:

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

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

export对外的接口,必须与模块内部的变量建立一一对应关系

错误写法:

// 报错
export 1;

// 报错
var m = 1;
export m;

正确写法:

// 写法一
export var m = 1;

// 写法二
var m = 1;
export {m};

// 写法三
var n = 1;
export {n as m};

Import命令具有提升效果,会提升到整个模块的头部,首先执行。路径中可以是相对路径和绝对路径,不带有路径必须通过配置,告诉引擎怎么取到这个模块。由于ES6中的模块加载时静态执行过程,因此不允许表达式。

输入变量

// main.js  注意需要与export中的暴露的接口名称保持一致
import {firstName, lastName, year} from './profile';

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

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

// circle.js  export暴露接口

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

export function circumference(radius) {
  return 2 * Math.PI * radius;
}
// main.js import整体加载

import * as circle from './circle';

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

export default命令输出的是模块默认值,import该模块时不需要大括号{}!!!

export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。

// 正确
export var a = 1;

// 正确
var a = 1;
export default a;

// 错误
export default var a = 1;

转载于:https://my.oschina.net/u/3554461/blog/1537015

你可能感兴趣的:(ES6笔记--module语法)