module的简述
- 三个命令:export,export dafault和 import
- 默认自带的规则:严格模式
- export 的具体使用方式,以及 import 的具体使用方式
- module 的继承
- module 的实质
export 和 import
简单的例子:
// a.js
export const a = 'I am a'
// index.js
import { a } from './a.js'
console.log(a) // I am a
export
- 作用:用于规定模块的对外接口。
import
- 作用:用于输入其他模块提供的共能。
严格模式
- 禁止 this 指向 window
- 不能使用 arguments.callee
- 不能使用 arguments.caller
- 变量名必须声明才能使用
- 函数的参数不能同名,否则报错
- 不能对只读属性进行赋值,否则报错
- 不能使用前缀 0 代表 8 进制,否则报错
- 不能删除不可删除的属性,不能删除变量,否则报错
- eval 和 argumetns 不能被重新赋值
- arguments 不能自动反应函数参数的变化
- 增加保留字(比如:protected,static,interface 等)
严格模式是ES5就增加的部分,在 module 中自带这些规则,使编程风格趋于严谨
export 的具体使用方式,以及 import 的具体使用方式
- export 表示无默认输出,export dafault 表示默认输出。区别在于:
- 一个 module,可以有多个 export,但只能有一个 export dafault。他们可以同时存在
- export 对于 部分 imort 的时候,是要使用 「 { } 」包裹变量,export dafault 对于 部分 import的时候,则不需要使用 「{ }」;若 export 和 export dafault 的变量同时存在,import的时候就在前面的规则上,使用 「 , 」分隔
- export dafault 导出的变量是可以自动重新命名。不管在导出之前是否已经命名,export 的重新命名则是需要 as 进行重新命名
- export 和 import 都是支持使用 as 进行变量名重命名
- 位置:export 和 import 只能出现在除 「 块级作用域 」中, 并且是在文件顶层
- module 的整体加载,使用 「 * 」指定一个对象,把 module 中所有的输出模块都加载到这个对象上。
- export 和 export dafault 的区别的例子:
// default.js
const defaultOne = 'default_one'
const defaultTwo = 'default_two'
const defaultThree = 'default_three'
export const defaultFour = 'default_four'
export default {
defaultThree,
defaultTwo,
defaultOne
}
// index.js
import defaultModule, { defaultFour } from'./default'
- export 有两种方式,如下:
// export_1.js
// 第一种方式
export const exportStr = 'export_str'
export const exportFun = function () {
console.log('exportFun')
}
const exportNum = 100
const exportBoo = true
// 第二种方式
export {exportNum, exportBoo}
// index.js
import {
exportNum,
exportBoo,
exportStr,
exportFun } from './export_1'
两种方式是等价的
- export 和 import 都是支持使用 as 进行变量名重命名。如下:
// export_import_as.js
const exportAsStr = 'export_as_str'
const exportAsNum = 'export_as_num'
const exportAsBoo = false
export {
exportAsStr as strResetName,
exportAsNum as numResetName,
exportAsBoo
}
// index.js
import {
strResetName,
numResetName,
exportAsBoo as importResetName
} from './export_import_as'
- 位置:export 和 import 只能出现在除 「 块级作用域 」中, 并且是在文件顶层。如下:
// position.js
{
export const position = 'inner' // error 'import' and 'export' may only appear at the top level
}
// index.js
console.log('我在顶部')
import { position } from './position' // error Import in body of module; reorder to top
- module 的整体加载。如下:
// module_all.js
export const testOne = 'one'
export const testTwo = 'two'
export const testThree = 'three'
export default {
defaultStr: '在整体导出中的默认导出对象'
}
// index.js
import * as all from './module_all'
默认导出 module_all.js 中所有变量组成的对象,包括默认和非默认的输出,如图:
模块的继承
// a.js
export const a = 'I am a'
export default {
defaultA: 'default_a'
}
// b.js
export const b = 'I am b'
export default {
defaultA: 'default_b'
}
// index.js
// 先输入再输出, 这种方式不可取,变量很多的时候就会出问题,
import dafaultA, { a } from './a'
import { b } from './b'
export {
a,
b
}
export default dafaultA
// 先输入再输出 第一种方式 不能获得 export default 的变量
// export * from './a'
// export * from './b'
// main.js
import * as moduleInhert from ''
在使用 export * from fliePath 实现模块继承的时候,注意子模块不要用 export default,这个方式会自动忽略 export default
module 加载的实质
- 动态引用,保持内部状态
// a.js
let num = 90
let count = function () {
return ++num
}
export {
num,
count
}
// index.js
import {count, num} from './a'
console.log(num) // 90
console.log(count()) // 91
console.log(num) // 91
a.js 有两个变量:num 和 count 。 num 的初识值为 90 ,count 是一个进行累加的函数,每次执行 num +1 之后给 num 赋值。在a.js 是被当作一个对象 export .在 index.js 中 import 并使用。
- 先打印 num ,为 90
- 再执行 count 方法,num 被加 1 并更新值为 91
- 最后再次打印 num 为 91