模块化
在运用react、vue等流行框架到时候,我们发现每个代码块都是分离的,每个js文件中定义的内容都只在本区域有作用。这就是ES6引入的模块化的概念,在此之前,一个应用的每个js文件所定义的所有内容都由全局作用域共享。
模块与脚本的不同
模块的加载方式是与js原先脚本加载方式有所区别的
1、模块代码自动运行在严格模式下,并且没有办法跳出严格模式
2、在模块的顶级作用域创建的变量,不会被添加到共享的全局作用域
3、模块顶级作用域的this值为undefined
4、模块不允许在代码中使用html风格的注释
5、对于模块外的代码需要访问的代码,模块必须导出它们
6、允许模块从其它模块导入内容
模块中的关键字
export关键字可以将需要导出的代码部分公开给其他模块
import关键字可以访问已被导出的代码部分
as 关键字可以在导入模块指定新名称
default关键字可以设置模块中的一个默认导出(唯一)
例
// 导出模块 example.js
export const name = "地瓜"
export const age = "24"
export default function sum(num1, num2) {
return num1 + num2;
}
// 导入模块
import sum, { person as name, age } from "./example.js"
// 需要注意默认值不能用花括号包裹除非下列写法
// import sum, { default as sum, name, age } from "./example"
console.log(person, age) // "地瓜", "24"
console.log(sum(1,2)) // 3
代理
代理的概念是我们可以通过创建一个代理对象来替代另一个对象,并且能拦截这个对象底层操作,包括set、get、has等行为,这个拦截并响应的函数称为陷阱。
ES6中引入了一个Proxy构造器来创建一个代理,需要传入两个参数。目标对象和一个定义了一个或多个陷阱函数的处理器。
Reflect对象
Reflect对象代表的是反射接口,也就是上述提到陷阱函数的一个集合。
举一个栗子
let person = {
name: 'digua'
}
let proxy = new Proxy(person, {
set(tarTarget, key, value, receiver) {
if(!tarTarget.hasOwnProperty(key)) {
if(isNaN(value) {
throw new TypeError("新增属性必须是一个数组")
})
}
return Reflect.set(trapTarget, key, value, receiver)
}
})
proxy.count = 1;
console.log(proxy.count) // 1
console.log(person.count) // 1 代理对象的行为反射到了源对象
proxy.another = "xiaoxiao" // 报错