一、模块化概
模块化主要是让每个木块有自己的作用域,即使定义为var也不会影响其他模块,因为只在自己作用域有效;
然后模块化也可以暴露接口,引入接口;
<!DOCTYPE html> <html lang="en"> <head> <title>Document</title> </head> <body> <script src='a.js'></script> <script src='b.js'></script> <script src='c.js'></script> </body> </html> 这种不是模块化,a.js里用var定义的变量是可以被b.js改变的;
模块化开发加letconst块级作用域可以很好的解决这个问题;
我们使用es6的module后,如果在html文件中,只需要如下两步即可模块化开发:
1.首先在html中的<script>标签里有一个type=moudule表示我们要引入一个模块;
2.其次有三种方式导入模块:分别是通用导入方式(这个方式针对三种暴露都可)、解构赋值导入方式(这个方式针对三种暴露都可)、简便导入方式(这个简便方式只可以针对默认暴露)
二、commonjs规范和node实现
(2)exports
(3)module.exports和exports区别
导出的其实就是module对象里的exports对象;
(4)require函数
node中每一个文件都是一个模块;
情况三一般就是引入第三方模块,require会去项目里的node_modules加载;
(5)模块加载过程
深度优先:先沿着路径找到最深的那个引用,然后返回;
(6)commonjs缺点:
三、ES Module规范
我们定义了一个foo模块,
在index.html导入的时候,即使咩有使用foo()函数,foo模块的代码也都已经被执行一遍了;
我们将//foo();注释放开:
所以说,我们在阅读vue源码时,看到这里就知道,当我们new Vue时,
initMixin(Vue)
stateMixin(Vue)
eventsMixin(Vue)
lifecycleMixin(Vue)
renderMixin(Vue)
这些方法,都已经被执行过了,Vue函数的原型上已经被添加了很多方法;
(1)概念
每一个文件就是一个模块,每一个模块都有自己的作用域;所以即使不同的模块都定义了var name =‘kobe’,都不会相互影响;
(2)export关键字
(3)import关键字
通过import导入的值不能被修改,类似const;
(4)export和import结合使用
在开发和封装一个功能库时,通常我们希望将暴露的所有接口放到一个文件中;如果我们写了很多个js文件,可以再单独写一个index.js文件作为统一的接口暴露,在这个indexjs里导入所有其他的业务文件,然后再统一暴露给调用者;
有三种方式,第三种最好;
(5)default
默认导出只能有一个;
(6)import函数
import xxx from ‘xxx.js’是同步的,只有执行完之后才可以加载底下的代码;
这是一种很耗时的操作,那么有没有一种异步加载的方式?有,import();