提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
1.模块化分类
ES6 引入了模块化,其设计思想是在编译时就能确定模块的依赖关系,以及输入和输出的变量。
ES6 的模块化分为导出(export) 与导入(import)两个模块。
2.模块化特点
(1)ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;。
(2)模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。
(3)每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域。
(4)每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取。
3.export导出
与default关联使用,并且一个js模块中只能有一个export default语句
var obj={name:"karen"}
export var num=100
export function tool () {return obj}
// 单独导出的 必须用导出的标识符来按需导入,可以有多个单独导出
// 默认导出 在这个文件中只能有一个或者0个
var a=20
var arr=[100,203,4]
var fm=()=>{}
export default {a,arr,fm,num,tool}
4.import导入
与from关联使用,此时script标签的type必须设置为module
单例模式:多次重复执行同一句 import 语句,那么只会执行一次,而不会执行多次。import 同一模块,声明不同接口引用,会声明对应变量,但只执行一次 import
举例:
<script type="module">
import People from './js/myModule.js';
let p = new People();
p.say();
</script>
5. 把js脚本写在页面中3种方式
1.行内式:js引擎要去执行的标签的某些(事件)属性中
2.嵌入式
3.导入 src的地址是一个js的路径 会加载js编码(jsonp)
6.按需引入、按需导入
import x,{num,tool} from "./src/model1.js"
console.log(num)
console.log(tool)
console.log(obj)
var re=tool()
console.log(re)
console.log(x.arr)
import {tool} from "./src/model1.js"
import x from "./src/model1.js"
x.tool
import Hq from './src/model1.js'
console.log(Hq.Photo)
import {Photo as a} from './src/model1.js'
let a=Photo
console.log(Photo.name)