模块化开发规范：CommonJS
CommonJS最初是在服务器端实现，Node.js就是基于CommonJS规范开发的，将CommonJS运用在浏览器端需要使用Browserify进行编译打包。让我们来学习一下如何使用CommonJS规范在服务器端（Node.js）和浏览器端进行模块化开发。
在node中使用
//文件目录
|-commonjs_in_node
|-modules
|-module1.js
|-module2.js
|-module3.js
|-module4.js
|-app.js
|-package.json暴露模块
1、module.exports = value
//module1.js
//定义一个模块，向外面暴露一个对象，module.exports={}
module.exports = {
msg: '模块1',
arr: [1,5,3,2,6,2,3,6,7,9,4],
fun: function(){
console.log(this.msg);
}
};
//module2.js
//定义一个模块直接暴露一个方法
module.exports = function () {
console.log('模块2');
};2、exports.xxx = value
//module3.js
//使用exports.xxx = value的方式暴露接口，实际上是为exports添加属性，exports为一个对象。
exports.foo = function(){
console.log('模块3 foo()')
}
exports.bar = function(){
console.log('模块3 bar()')
}引入模块，依赖
再定义一个模块4，依赖模块1
//引入依赖模块 module1
var module1 = require('./module1')
//module4中的run方法依赖module1中的arr属性。通过传入一个方法参数对arr进行操作。
exports.run = function(f){
var _arr = f(module1.arr);
console.log(_arr);
}使用自定义模块及第三方模块
安装第三方模块
使用npm安装第三方包uniq，这个包的功能是对数组进行去重并排序。
//命令行
cd commonjs_in_node
//创建package.json
npm init
//安装uniq包
npm install uniq --save
//package.json
{
"name": "commonjs_in_node",
"version": "1.0.0",
"description": "",
"main": "app.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"dependencies": {
"uniq": "^1.0.1"
}
}使用模块
//app.js
//引入第三方模块
var uniq = require('uniq');
//引入自定义模块
var module1 = require('./modules/module1');
var module2 = require('./modules/module2');
var module3 = require('./modules/module3');
var module4 = require('./modules/module4');
module1.fun();//module1暴露的是对象，调用需要用 obj.xx 的方式调用
module2();//module2暴露的是一个方法，可以直接调用
//module3本质上也是暴露的对象。
module3.foo();
module3.bar();
module4.run(uniq);
console.log(uniq(module1.arr))引入第三方模块建议写在自定义模块上面。只需要require('包名')，引入自定义模块需要require('模块路径')
在node中使用方法总结
在node中使用就这么简单，使用module.exprots = value或者exprots.xxx = value暴露模块，然后使用require('模块路径')（自定义模块）或者require('包名')（第三方模块）引入模块。使用的话要具体看模块暴露出来的value是什么类型。
在浏览器端使用
//文件目录
|-commonjs_in_browser
|-js
|-dist //打包生成的文件目录
|-src //源码目录
|-module1.js
|-module2.js
|-module3.js
|-module4.js
|-app.js
|-index.html
|-package.json定义的方法和在node中是相同的，我们把上面的几个模块的路径修改一下。
//module1.js
module.exports = {
msg: '模块1',
arr: [1,5,3,2,6,2,3,6,7,9,4],
fun: function(){
console.log(this.msg);
}
};
//module2.js
module.exports = function () {
console.log('模块2');
};
//module3.js
exports.foo = function(){
console.log('模块3 foo()')
}
exports.bar = function(){
console.log('模块3 bar()')
}
//module4.js
var module1 = require('./module1')
exports.run = function(f){
var _arr = f(module1.arr);
console.log(_arr);
}
//app.js
var uniq = require('uniq');
//引入自定义模块，主要这里的路径和上面是不同的。
var module1 = require('./module1');
var module2 = require('./module2');
var module3 = require('./module3');
var module4 = require('./module4');
module1.fun();
module2();
//module3本质上也是暴露的对象。
module3.foo();
module3.bar();
module4.run(uniq);
console.log(uniq(module1.arr))
安装第三方包的方法是相同的，在浏览器中使用需要先用browserify将代码编译打包然后再在html中引用。安装browserify包要注意，需要全局安装然后再局部安装，需要安装两次。
//安装uniq
npm i uniq --save
//安装browserify（全局）
npm i browserify -g
//安装browserify
npm i browserify --save-dev安装完后使用browserify 命令进行打包编译。
//语法：browserify 入口文件路径 -o 输出路径，bundle.js为输出文件的名称，可以随便定义。
browserify js/src/app.js -o js/dist/bundle.js在html中引入打包后的js文件
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<script src="./js/dist/bundle.js">script>
body>
html>在浏览器中打开，开发者工具中console中查看结果。
在浏览器中使用方法总结
浏览器中使用和node中使用相比就是多了一个编译打包的步骤，使用browserify的方法是 browserify 入口文件路径 -o 输出路径。