?首先，什么是模塊化？模塊化即將復雜的代碼切分成一個個模塊，不同功能的模塊各自放到單獨的文件中，使用模塊極大的提高了代碼的可維護性同時也可以避免全局空間的污染。

requirejs

?requirejs遵循AMD（異步模塊定義）規范,實現了JS文件的異步加載，避免頁面失去響應，管理頁面之間的依賴性，便于代碼編寫和維護，
?模塊通過define函數定義在閉包中，格式為:

  define(id?: String, dependencies?: String[], factory: Function|Object)

?id為模塊名（可選），dependencies（可選）為依賴的的多個模塊，由數組包裹，factory包裹模塊具體實現，可以是一個函數（此時返回值就是模塊的輸出）或對象（本身為模塊的輸出），一個簡單的requirejs實現：

html中:
  <script data-main="scripts/main.js" src="scripts/require.js"></script>
  //data-mian指定入口
入口js:
  require(["./exam1","./exam2"],function(exam1,exam2){
    console.log(exam1);        //{name:"tom",age:18}
    console.log(exam2);        //"今晚打老虎"
    })
exam1模塊:
  define({name:"tom",age:18})
exam2模塊:
  define(function(){
      return "今晚打老虎"
    })

模塊內部引用依賴

?前面提到define函數的三個參數，前兩個從參數（id,dependencies）都是可選，dependencies存在時，factory的參數為各模塊的返回值，而當dependencies不存在時，factory參數默認為require,exports,module,在factory內部可以通過require指定依賴：

a.js中：
define(function(require){
  var b=require("b")
  console.log(b)        //{name:"b"}
})
b.js中：
define({name:"b"})

依賴jQuery

?在入口js中編寫簡單配置：

requirejs.config({
  paths:{
    "jquery":"jquery-3.2.0"     
  }
})

require(["jquery"],function($){
  $("div").css("color","#f00")        //div中字體變色
})

?之后各個模塊就可以通過jqery這個名字來自己依賴jQuery了，除此之外，還可以在配置中使用shim配置模塊對jquery的依賴:

exam1.js中：
requirejs.config({
    paths:{
        "jquery":"jquery-3.2.0"
    },
    shim:{
        exam2:["jquery"],        //給模塊exam2配置jQuery的依賴
    }
})
require(["exam2"],function(){    //exam1中只指定了exam2的依賴
    $("div").css("color","#f00")    //字顏色變紅
})
exam2中：
define(function(){
    $("div").css("font-size","20px")    //字體到20px
})

?以上通過shim配置exam2.js模塊依賴jQuery，從而exam2.js中jQuery可以使用，依賴exam2.js的exam1.js中jQuery也可以使用。