④定义模块代码

//module1.js

module.exports = {

msg: ‘module1’,

foo() {

console.log(this.msg)

}

}

//module2.js

module.exports = function() {

console.log(‘module2’)

}

//module3.js

exports.foo = function() {

console.log(‘foo() module3’)

}

exports.arr = [1, 2, 3, 3, 2]

// app.js文件

// 引入第三方库，应该放置在最前面

let uniq = require(‘uniq’)

let module1 = require(‘./modules/module1’)

let module2 = require(‘./modules/module2’)

let module3 = require(‘./modules/module3’)

module1.foo() //module1

module2() //module2

module3.foo() //foo() module3

console.log(uniq(module3.arr)) //[ 1, 2, 3 ]

⑤通过node运行app.js

命令行输入 node app.js，运行JS文件

(6)浏览器端实现(借助Browserify)

①创建项目结构

|-js|-dist//打包生成文件的目录|-src//源码所在的目录|-module1.js|-module2.js|-module3.js|-app.js//应用主源文件|-index.html//运行于浏览器上|-package.json{"name":"browserify-test","version":"1.0.0"}

②下载browserify

全局: npm install browserify -g

局部: npm install browserify --save-dev

③定义模块代码(同服务器端)

注意：index.html文件要运行在浏览器上，需要借助browserify将 app.js文件打包编译，如果直接在 index.html引入 app.js就会报错！

④打包处理js

根目录下运行 browserify js/src/app.js-o js/dist/bundle.js

⑤页面使用引入

在index.html文件中引入 <scripttype="text/javascript"src="js/dist/bundle.js"></script>

2.AMD

CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作。AMD规范则是非同步加载模块，允许指定回调函数。由于Node.js主要用于服务器编程，模块文件一般都已经存在于本地硬盘，所以加载起来比较快，不用考虑非同步加载的方式，所以CommonJS规范比较适用。但是，如果是浏览器环境，要从服务器端加载模块，这时就必须采用非同步模式，因此浏览器端一般采用AMD规范。此外AMD规范比CommonJS规范在浏览器端实现要来着早。

(1)AMD规范基本语法

定义暴露模块:

//定义没有依赖的模块

define(function(){

return 模块

})

//定义有依赖的模块

define([‘module1’, ‘module2’], function(m1, m2){

return 模块

})

引入使用模块:

require([‘module1’, ‘module2’], function(m1, m2){

使用m1/m2

})

(2)未使用AMD规范与使用require.js

通过比较两者的实现方法，来说明使用AMD规范的好处。

未使用AMD规范

// dataService.js文件

(function (window) {

let msg = ‘www.baidu.com’

function getMsg() {

return msg.toUpperCase()

}

window.dataService = {getMsg}

})(window)

// alerter.js文件

(function (window, dataService) {

let name = ‘Tom’

function showMsg() {

alert(dataService.getMsg() + ', ’ + name)

}

window.alerter = {showMsg}

})(window, dataService)

// main.js文件

(function (alerter) {

alerter.showMsg()

})(alerter)

// index.html文件

Modular Demo