模块化与requirejs

 首先，什么是模块化？模块化即将复杂的代码切分成一个个模块，不同功能的模块各自放到单独的文件中，使用模块极大的提高了代码的可维护性同时也可以避免全局空间的污染。

requirejs

 requirejs遵循AMD（异步模块定义）规范,实现了JS文件的异步加载，避免页面失去响应，管理页面之间的依赖性，便于代码编写和维护，
 模块通过define函数定义在闭包中，格式为:

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

 id为模块名（可选），dependencies（可选）为依赖的的多个模块，由数组包裹，factory包裹模块具体实现，可以是一个函数（此时返回值就是模块的输出）或对象（本身为模块的输出），一个简单的requirejs实现：

html中:
  
  //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也可以使用。