对于JS模块化的解析

一、理解

1、什么是模块、模块化？

将一个复杂的程序依据一定的规范封装成几个文件，并进行组合在一起

2、为什么要模块化？

降低复杂度，提高解耦性，部署方便

3、模块化的好处

• 避免命名冲突（减少命名空间污染）

• 更好的分离，按需加载

• 更高复用性

• 高可维护性

4、页面引入加载script

二、模块化规范

1、CommonJS（node根据该规范编写）

说明：

每一个文件都可以当做一个模块

在服务器端：模块的加载 是运行时同步加载的

在浏览器端：模块需要提前编译打包处理

基本语法：

模块引入：require（xxx）

　　第三方模块：xxx为模块名

　　自定义模块：xxx为模块文件路径

暴露模块：exports.xxx = value 和 module.exports = value

　　暴露的模块 本质是 exports 对象

　　exports本身是一个空对象 exports.xxx = value是给exports对象添加属性或方法

　　module.exports = value 是直接用value新对象来覆盖原来的空对象

实现：

服务器端实现：Node.js

浏览器端实现：Browserify （CommonJS的浏览器端的打包工具）

下载安装browserify

　　全局：npm install browserify -g

　　局部：npm install browserify --save-dev

定义模块代码（js文件代码 并暴露相应内容）

引入模块 在app.js 中用require引入模块 但是浏览器不认识require方法，需要打包处理js

　　在根目录下 终端输入 browserify js/src/app.js -o js/dist/bundle.js （js/src/app.js源文件 js/dist/bundle.js 是打包输出的文件）

页面使用引入：

<script type="text/javascript" src="js/dist/bundle.js"></script> （浏览器真正跑的是打包生成的文件）

2、AMD

说明：

专门用于浏览器端的模块化规范，模块的加载是异步的

基本语法：

定义暴露模块：

　//定义没有依赖的模块：
　　define(function(){
　　　　return 模块
　　})
　　//定义有依赖的模块：
　　define(['module1','module2'],function(m1,m2){
　　　　return 模块
　　})

引入使用模块：

require(['module1','module2'],function(m1,m2){
　　　　使用m1/m2
　　})

实现（浏览器端）：

Require.js

3、CMD（了解）

说明：专门用于浏览器端，模块的加载是异步的，模块使用时才会加载执行

基本语法：

定义暴露模块：

　//定义没有依赖的模块：
　　define(function(require,exports,module){
　　　　exports.xxx = value
　　　　module.exports = value
　　})
　　//定义有依赖的模块：
　　define(function(require,exports,module){
　　　　//引入依赖模块(同步)
　　　　var module2 = require("./module2")
　　　　//引入依赖模块（异步）
　　　　require.async("./module3",function(m3){
　　　　})
　　　　//暴露模块
　　　　exports.xxx = value
　　})

引入使用模块：

require(function(require){
　　　　var m1 = require('./module1')
　　　　var m4 = require('./module4')
　　　　m1.show()
　　　　m4.show()
　　})

实现（浏览器端）：Sea.js

4、ES6

说明：依赖模块需要编译打包处理

语法：

　　导出模块：export xxx

　　引入模块：import xxx from "url"

页面引入

实现（浏览器端）：

　　使用Babel将ES6编译为ES5代码

　　使用Browserify编译打包js

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

对于Javascript加载的解析

关于javascrip的立即执行函数的解析

以上就是对于JS模块化的解析的详细内容，更多请关注Gxl网其它相关文章！