资讯专栏INFORMATION COLUMN

深入理解ES6之《用模块封装代码》

BigTomato / 1937人阅读

摘要:导入模块的代码执行后,实例化过的模块被保存在内存中,只要另一个语句引用它就可以重复使用它和的一个重要的限制是它们必须在其它语句和函数之外使用,也就是说不允许出现在语句中,不能有条件导出或以任何方式动态导出。

什么是模块

模块是自动运行在严格模式下并且没有办法退出运行的Javascript代码

在模块的顶部this的值是undefined

其模块不支持html风格的代码注释
除非用default关键字,否则不能用这个语法导出匿名函数或类

任何未显示导出的变量、函数或类都是模块私有的,无法从模块外部访问

import {identifier1,identifier2} from "./example.js"

import大括号表示给定模块导入的绑定,文件必须把文件扩展名也加上扩展名
导入绑定的列表看起来与解构对象很相似,但它不是
当从模块中导入一个绑定时,它就好像使用const定义的一样
不管是在import语句中把一个模块写了多少次,该模块将只招待一次。导入模块的代码执行后,实例化过的模块被保存在内存中,只要另一个import语句引用它就可以重复使用它
export和import的一个重要的限制是它们必须在其它语句和函数之外使用,也就是说不允许出现在if语句中,不能有条件导出或以任何方式动态导出。模块语法存在的一个原因是让js引擎静态确定哪些可以导出,因此只能在模块顶部使用export
export、import都可以用as来重命名导出的函数名
为默认导出值指定标识符指定重命名语法:

function sum(num1, num2) {
  return num1 + num2
}
//export default sum
export { sum as default }

看下面这个例子:

export let color = "red"
export default function (num1, num2) {
  return num1 + num2
}


import sum,{color} from "./example.js"

import 和export 组合使用

export {sum as add } from "./example.js"

阅读需要支付1元查看
<