JS 模块化

以下代码只是简单的逻辑示例，并不能作为实例引用

不使用模块化的情况

util.js，最底层的代码，封装各种函数

function getFormatDate(date,type){
  // type === 1 返回 xxxx-xx-xx 的格式
  // type === 2 返回 xxxx年xx月xx日 的格式
}

controlUtil.js，业务层底层代码，通过使用封装好的函数然后返回业务逻辑需要的 result

function controlFormateDate(date){
  // 要求返回 xxxx年xx月xx日 的格式
  return getFormatDate(date,2)
}

control.js，业务层逻辑代码

var date = new Date();
console.log(controlFormateDate(date));

test.html

代码中的函数必须是全局变量，才能暴露给使用方。会造成全局变量污染。

script 的顺序是一定的，不能更改，而且是相互依赖的，多人开发时，容易不了解每个文件各自的依赖项，导致报错。

<script src=’util.js‘></script>
<script src=’controlUtil.js‘></script>
<script src=’control.js‘></script>

使用模块化

使用模块化的化就不会导致全局变量污染，而且每个文件的依赖项都很清楚

AMD

常用的模块加载器require.js 就是使用 AMD 的规范的。

简单了解一下AMD的规范

• 全局 define 函数
• 全局 require 函数
• 依赖 JS 会自动、异步加载

util.js

define(function(){
  return {
     getFormatDate: function (date,type){
    // type === 1 返回 xxxx-xx-xx 的格式
    // type === 2 返回 xxxx年xx月xx日 的格式
   }
  }
})

controlUtil.js

define(['./util.js'],function(util){
  return {
    controlFormateDate: function (date){
    // 要求返回 xxxx年xx月xx日 的格式
    return util.getFormatDate(date,2)
   }
  }
})

control.js

define(['./controlUtil.js'],function(controlUtil){
  return {
    printDate: function(date){
      console.log(controlUtil.controlFormateDate(date));
    }
  }
})

main.js

require(['./control.js'],function(control){
  var date = new Date();
  control.printDate(date);
})

test.html

<!-- 使用require.js -->
<script src="require.min.js" data-mian='./main,js'></script>

---

CommonJs

是node.js 模块化规范，现在被大量用于前端中

需要构建工具支持，一般和 npm 配合使用

CommonJs 不会异步加载JS，而是同步一次性加载出来，当然有些构建工具可以把它用于异步加载

util.js

module.export = {
  getFormatDate: function (date,type){
  // type === 1 返回 xxxx-xx-xx 的格式
  // type === 2 返回 xxxx年xx月xx日 的格式
 }
}

controlUtil.js

var util = require('util.js');
module.export = {
  controlFormateDate: function (date){
  // 要求返回 xxxx年xx月xx日 的格式
  return util.getFormatDate(date,2)
 }
}

control.js

var controlUtil = require('controlUtil.js');
var date = new Date();
console.log(controlUtil.controlFormateDate(date));

// node control.js 即可运行

AMD 和 CommonJS 的使用场景

1. 需要异步加载 Js，使用 AMD

2. 使用 npm 之后建议使用 CommonJS