ES6--模块化

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

目录

文章目录

1.模块化分类

2.模块化特点

3.export导出

4.import导入

5. 把js脚本写在页面中3种方式

 6.按需引入、按需导入

---

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)