模块化,就是将独立的功能代码封装成一个独立的文件(块) ,每一块向外暴露(方法)一些接口 ,块之间通过暴露的接口进行通信。
1、有利于代码的拆分和架构上的解耦
2、更好的分离,实现按需加载
3、更高复用性,高可维护性
模块:用大白话讲就是将一个复杂的程序按规则封装成几个块,并组合在一起。然后实现内部数据和实现方法是私有的,只向外部暴露一些接口(方法)使其与外部其他模块通信。
引入多个script之后,难免出现引用的交叉。
1、请求过多;
2、依赖会乱掉,依赖模糊
3、难以维护,各种的调用,依赖交织在一起了
后来就出现了common.js 、AMD 、es6、CMD等
先看看CommonJS吧
在node.js中使用CommonJS规范实现模块化,主要提供了module( 记录当前模块的详细信息 )、export( 记录当前模块导出的变量 )、require( 对外部的模块进行导 入)、groble等几个环境变量来实现
![](https://i-blog.csdnimg.cn/blog_migrate/f018209d7b6a214bcd4595a573eec32a.png)
接下来就ES6模块化(在语言层面解决了)
export命令用于暴露模块的对外接口,import命令用于导入其他模块提供的功能
![](https://i-blog.csdnimg.cn/blog_migrate/3e75eadc7687e164ed0b7ba2ea8bf91f.png)
两者(es6模块化和commonjs模块化)的区别:
1、CommonJS 模块输出的是一个值的拷贝,ES6 模块输出的是值的引用。
2、 CommonJS 模块是运行时加载,ES6 模块是编译时输出接口 。