ES6特性-Module初了解-上

1.概述

ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系

和commonJS相比，commonJS是运行时才能确定依赖关系

2.严格模式use strict

ES6模块自动采用严格模式

3.export命令

export命令用于定义对外暴露的接口

//xx.js
var name = "bill";
var age = 12;
//或者定义时关键字前加export,如 export var m =1,使用as 可以重命名，import的时候也要使用重命名后的名字
export {name as oldName, age}
//export输出的接口对应的值是动态绑定关系，即通过该接口可以取到模块内部实时的的值，commonJS模块输出的是值的缓存

4.import命令

//可以使用as重命名导入的变量，路径可以是相对路径或绝对路径，也可以是模块名,但必须通过配置文件告诉js引擎模块的位置
import {name as newName, age} from './xx.js'

import是静态执行，所以import语法内不能使用表达式（运行时才能得到结果）

5.模块的整体加载

//整体模块加载在obj对象上，可以通过.语法引用里面export的函数和变量，但是不能在这里额外为obj定义额外的方法和属性
//这会导致无法静态分析
import * as obj from './xx.js'

6.export default命令

//使用export default命令可以指定模块的默认输出，但是一个模块只能有一个默认输出,这时可以不用花括号
//xx.js
export default function(){
console.log("233");
}
//xx.js
var a = 2;
export default a;

//导入时语法
import aName from './xx.js'
//可改名，但要用花括号
import {default as bName} from './xx.js'

本质上，export default就是输出一个叫做default的变量或方法或对象，然后系统允许你为它取任意名字。

//module.js
function add(x, y){
   return x+y;
}
//等同于export default add
export {add as default}


//example.js
//等同于 import foo from 'module'
import {default as foo} from 'module'

//同时导入其他的变量的语法
import aiasName, {name , age ,foo} from './xx.js'

 

转载于:https://my.oschina.net/u/1375322/blog/1592330