JS模块化(一):CommonJS

模块化的规范:
       目前有四种:
           1.CommonJS
           2.AMD
           3.CMD(了解)
           4.ES6
       CommonJS规范说明:
           * 每个文件(js文件)都可以作为一个模块
           * 在服务器端:模块的加载是运行时同步加载的(容易遇到阻塞)
           * 在浏览器端:模块需要提前编译打包处理(CommonJS中有require,浏览器不认识所以要提前编译)
       CommonJS基本语法:
           * 暴露模块:
               1. module.exports = value
               2. exports.xxx = value
           * 引入模块:require(xxx)
              1. 第三方模块:xxx为模块名
              2. 自定义模块:xxx为模块文件路径
       CommonJS实现:
           * 服务器端的实现:Node.js
           * 浏览器端的实现:Browserify

我们先看commonjs基于服务端(node)的应用

(一) CommonJS基于服务端(node)的应用

1. 下载安装Node.js

......

2. 创建项目结构
           /- modules
               /- module1.js
               /- module2.js
               /- module3.js
           /- app.js
           /- package.json
           {
               "name":"commonjs_node",
               "version":"1.0.0"
           }

package.json也可以不用自己写,打开文件夹,在路径中输入cmd,打开命令窗口输入 npm init

package name : 不能有中文不能大写可以自己写也可以用()中默认的,然后一路回车,就创建好package.json文件了.

3. 下载第三方模块
npm install uniq --save

此时package.json文件

4. 模块化编码

module1.js

module2.js

module3.js

5.在app.js中引入模块

打开命令行窗口输入 node app.js

以上是引入自定义模块,接下来引入第三方模块,我们已经下载了第三方模块uniq

在module3.js中编写代码:

在app.js中引入

在node中运行,node app.js 结果如下:

数组已经去重并排序.但其实使用uniq排序是有问题的,[1,2,3,7,11]会被排成[1,11,2,3,7].可以试一下.

(二) CommonJS基于浏览器端(Browserify)的应用

1.创建项目结构
       /-js
           /-dist // 打包生成文件的目录
           /-src // 源码所在的目录
               /-module1.js
               /-module2.js
               /-module3.js
               /-app.js // 应用主源文件
       /-index.html
       /-package.json
       {
           "name":"commonjs_browserify",
           "version":"1.0.0"
       }

2. 下载Browserify
* 全局 npm install browserify -g
* 局部 npm install browserify --save-dev (加dev 表示开发依赖不加表示运行/生产环境依赖)

3. 编写代码

module1.js

module2.js

module3.js

app.js

4. 打包处理js
       browserify js/src/app.js -o js/dist/bundle.js
       // browserify就是一个命令我们之前安装过
       //-o 表示 output 输出
       // js/src/app.js 是目标文件
       // js/dist/bundle.js 打包完输出的文件目录和文件名

5. 页面使用引入
<script type="text/javascript" src="js/dist/bundle.js"></script>

在浏览器中打开:

请多指教!

JS模块化(一):CommonJS

猜你喜欢