汇总一下模块化开发，写模块的注意事项
模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
一、expor 、import命令
1、导出单个属性
// a.js
export var firstName = 'amy';
export var lastName = 'ye';
export var year = 2019;
//b.js
import { firstName,lastName,year } from './a.js'
错误写法：
export 1
2、导出对象包含多个属性
// a.js
var firstName = 'amy';
var lastName = 'ye';
var year = 2019;
export {firstName, lastName, year};
//b.js
import { firstName,lastName,year } from './a.js'
推荐写法，方便查阅导出的元素
错误写法
var firstName = 'amy';
export firstName
3、导出函数
// a.js
export function getName(name) {
console.log(name)
}
//b.js
import { getName } from './a.js'
getName ()
错误写法：
function f() {}
export f
4、导出、导入并重命名
//a.js
function getName(name) {
console.log(name)
}
// 导出重命名
export {getName as getInfo}
export var firstName = 'Amy'
//b.js
import {getInfo,firstName as name} from './a.js'
getInfo('Tony')//Tony
console.log(name)//Amy
5、export输出的接口为实时值
//a.js
export let name = 'foo'
setTimeout(()=>name='amy',400)
export function getName() {
console.log(name)
}
//b.js
import { name ,getName,a} from './a.js'
console.log(name)// foo
setTimeout(getName,1000) //amy
(1)export语句输出的接口，与其对应的值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。
(2)CommonJS 模块输出的是值的缓存，不存在动态更新，
6、export 的位置
//a.js
function foo() {
export default 'bar' // SyntaxError
}
foo()
//b.js
import { bar} from './a.js'
console.log(bar)//Uncaught SyntaxError: Unexpected token export
注意：export可以处于module任何位置，但是必须处于module的顶层，不能放在块级作用域内，否则会报错
7、import 导入接口属性为只读属性
import { firstName as name,getName} from './a.js'
console.log(name)
name = 'tony' //Uncaught TypeError: Assignment to constant variable.
userInfo.name = 'tony'
console.log(userInfo)
如果修改的是直接引用类型是熟悉，会报错（比如字符串）
但是如果修改的是间接引用类型，不会报错（比如对象）
8、import命令具有提升效果
foo();
import { foo } from 'my_module';
因为import具有提升功能，所以foo在import之前调用也不会报错
9、impor为静态执行，不能使用表达式和变量
// 报错
import { 'f' + 'oo' } from 'my_module';
// 报错
let module = 'my_module';
import { foo } from module;
// 报错
if (x === 1) {
import { foo } from 'module1';
} else {
import { foo } from 'module2';
}
10、import 整体加载(*)
import * as obj from './a.js'
console.log(obj.firstName)
console.log(obj.userInfo)
二、export default
1、默认导出变量
// a.js
export default 'Tony'
//b.js
import value from './a.js'
console.log(value)
默认导出的变量可以为任意变量名
2、默认导出函数
// a.j
export default function () {
console.log(111)
}
或者
function f () {
console.log(111)
}
export default f
//b.js
import getName from './a.js'
getName()
导入的方法不需要大括号括起来
3、export default 原理
（1）export default 一个module中只能有一个，使用export default 导出的接口，导入时不需要大括号。
（2）export default 其实它导出的是一个叫default的变量或方法，系统允许开发人员任意修改名字
// modules.js
function add(x, y) {
return x * y;
}
export {add as default};
// 等同于
// export default add;
// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';
import命令会被 JavaScript 引擎静态分析，即在编译时做分析，不能像require那样在运行时分析。所以在es6的语法中，export 、import只能处于moduel的顶层，不能在块级作用域或者有表达式、变量等。
网友评论