对于JS模块化的解析

这篇文章主要介绍了关于对于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 是打包输出的文件）

页面使用引入：

（浏览器真正跑的是打包生成的文件）

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的立即执行函数的解析

Atas ialah kandungan terperinci 对于JS模块化的解析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!