这篇文章主要介绍了关于对于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
Magento是一套专业开源的PHP电子商务系统。Magento设计得非常灵活，具有模块化架构体系和丰富的功能。易于与第三方应用系统无缝集成。Magento开源网店系统的特点主要分以下几大类，网站管理促销和工具国际化支持SEO搜索引擎优化结账方式运输快递支付方式客户服务用户帐户目录管理目录浏览产品展示分析和报表Magento 1.6 主要包含以下新特性：•持久性购物 - 为不同的
定义模块代码（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中文网！
相关推荐：
