前言
将所有的代码都写在一个文件或者模块里面，代码之间耦合性太强，任何修改都可能造成全局的污染，不利于后期的维护；并且同一个文件内功能不容易划分清晰，很难实现相同功能模块的重复利用。
js模块化是将一个复杂的程序按照一定的规范封装成几个独立的模块，再将这几个模块组合在一起完成复杂程序的功能。模块内部的数据和方法是私有的，只是向外部暴露一些方法与外部的其他模块进行通信。
主要浅析比较常用的三种模块化规范：commonjs、AMD（Asynchronous Module Definition）和es6，至于不常用的CMD（Common Module Definition）、UMD（Universal Module Definition）不在本文赘述。
commonjs
遵循commonjs规范的程序，每一个文件都可以当做是一个模块。模块在服务端运行时是同步加载的，在浏览器端无法直接运行，需要提前编译打包成浏览器能识别的规范。nodejs是遵循commonjs规范的实现。
1. commonjs运行环境
服务端：nodejs
浏览器：无法在浏览器直接运行，需要借助打包工具打包成浏览器能识别的规范。
2. commonjs示例
commonjs规范通过以下两种方式对外暴露模块：
（1）module.exports = value
（2）exports.xxx = value
exports默认为一个空对象。
通过require引入使用模块：
let module = require('./module')
代码结构：
module1.js
module.exports = {
arr: [1, 2, 3],
func: ()=>{
console.log('module1')
}
}
module2.js
exports.arr = [1, 2, 3]
exports.func = ()=>{
console.log('module2')
}
main.js
let module1 = require('./module1')
let module2 = require('./module2')
console.log(module1.arr)
module1.func()
console.log(module2.arr)
module2.func()
在node环境中运行main.js，输出为：
[ 1, 2, 3 ]
module1
[ 1, 2, 3 ]
module2
commonjs运行在浏览器
遵循commonjs规范的代码不能直接在浏览器中运行，如下示例：
添加index.html文件，引用main.js，index.html为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>commonjs</title>
</head>
<body>
<script src="./main.js"></script>
</body>
</html>
在浏览器打开以后，提示：
在浏览器运行之前，需要将遵循commonjs的代码编译打包成浏览器能识别的代码，这里使用browserify包（browserify.org/） 进行编辑打包：
本地安装browserify
npm install browserify --save-d
对main.js进行打包
browserify ./main.js -o ../dist/bundle.js
index.html引入打包以后的文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>commonjs</title>
</head>
<body>
<!-- <script src="./main.js"></script>-->
<script src="../dist/bundle.js"></script>
</body>
</html>
浏览器正常运行输出：
AMD
AMD(Asynchronous Module Definition) 异步模块定义，主要用于浏览器端。
1. AMD运行环境
在浏览器端运行。
2. AMD示例
AMD定义暴露模块：
（1）定义没有依赖的模块：
define(function(){
return 模块
})
（2）定义有依赖的模块：
define(['module1', 'module2'], function(m1, m2){
return 模块
})
AMD使用模块：
require(['module1', 'module2'], function(m1, m2){
m1
m2
})
AMD运行需要下载requirejs，下载地址为：requirejs.org/docs/downlo…
目录结构：
module1.js文件内容为
define(function(){
return 'module1'
})
module2.js文件内容为
define(['module1'], function(m1) {
return m1 + '+module2'
})
main.js文件内容为：
requirejs.config({
paths: {
module1: './module/module1',
module2: './module/module2',
}
})
requirejs(['module1', 'module2'], function(m1, m2) {
console.log(m1)
console.log(m2)
})
index.html文件内容为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>commonjs</title>
</head>
<body>
<script data-main="./main.js" src="./libs/require.js"></script>
</body>
</html>
在浏览器打开index.html，输出
ES6
ECMAScript 6.0（简称 ES6）是 js 语言的下一代标准，在 2015 年 6 月发布第一个版本，一般提到ES6，都是指的ES2015标准。以后每年的6月份都发布一个新的版本，以年份作为标记，例如ES2015、ES2016等等。
1. ES6运行环境
ES6是针对js的规范，能运行js的环境就是ES6的运行环境。可能有些运行环境还不支持ES6的最新特性，所以一般是使用Babel 转码器（babeljs.io/） 将ES6代码转为ES5代码，然后在浏览器运行。
2. ES6示例
导出模块：export / export default
引入模块：import
目录结构：
module1.js文件
let fn1 = function func1() {
console.log('module1')
}
export {fn1}
module2.js文件
let fn2 = function func2() {
console.log('module2')
}
export default fn2
main.js文件内容
import {fn1} from './module/module1.js'
import fn2 from "./module/module2.js"
fn1()
fn2()
index.html文件内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>commonjs</title>
</head>
<body>
<script type="module" src="./main.js"></script>
</body>
</html>
需要注意的是，浏览器支持es6语法的import和export，但是在引入js文件的时候，需要标注为module类型。
在浏览器打开index.html，输出
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！