CommonJS规范

初步体验

创建school.js

const name = '折木'
const slogan = '任何可以用js实现，终将使用js实现！'

function getTel (){
  return '19986494173'
}

function getCities(){
  return ['北京','上海','深圳','成都','武汉','西安']
}

// 通过给exports对象添加属性的方式，来导出数据（注意：此处没有导出getCities）
exports.name = name
exports.slogan = slogan
exports.getTel = getTel

创建student.js

const name = '张三'
const motto = '相信明天会更好！'

function getTel (){
  return '19986494173'
}

function getHobby(){
  return ['抽烟','喝酒','coding']
}

// 通过给exports对象添加属性的方式，来导出数据（注意：此处没有导出getHobby）
exports.name = name
exports.slogan = slogan
exports.getTel = getTel

创建index.js

// 引入school模块暴露的所有内容
const school = require('./school')

// 引入student模块暴露的所有内容
const student = require('./student')

导出数据

在CommonJS标准中，导出数据有：

• 第一种方式：module.exports = value
• 第二种方式：exports.name = value

：

注意

1. 每个模块内部的：this、exports、modules.exports在初始时，都指向空对象，该空对象就是当前模块导出的数据，如下图：

2. 无论如何修改导出对象，最终导出的都是module.exports的值。
3. exports是对module.exports的初始引用，仅为了方便给导出象添加属性，所以不能使用 exports = value的形式导出数据，但是可以使用module.exports = xxxx导出数据。

导入数据

在CJS模块化标准中，使用内置的require函数进行导入数据。

// 直接引入模块
const school = require('./school')

// 引入同时解构出要用的数据
const { name, slogan, getTel } = require('./school')

// 引入同时解构+重命名
const {name:stuName,motto,getTel:stuTel} = require('./student')

扩展理解

一个 JS 模块在执行时，是被包裹在一个中执行的，所以每个模块都有自己的作用域，我们可以通过如下方式验证这一说法：

console.log(arguments)
console.log(arguments.callee.toString())

内置函数的大致形式如下：

function (exports, require, module, __filename, __dirname){
  /*********************/
}

浏览器端运行

Node.js默认是支持CommonJS规范的，但浏览器端不支持，所以需要经过编译，步骤如下：

• 第一步：全局安装browserify：npm i browserify -g
• 第二步：编译

browserify index.js -o build.js

备注

index.js是源文件，build.js是输出的目标文件。

• 第三步：页面中引入使用

<script type="text/js" src="./build.js"></script>