前端模块化require.js

早期JS代码都会写在一个文件中，仅需加载一个文件即可。后来代码越来越多，必须分割成多个文件，依次加载。问题是这种加载的方式，浏览器会停止页面渲染，加载文件越多，网页失去响应的时间越长。另外JS文件之间存在依赖关系，必须严格保证加载顺序。当依赖关系非常复杂的时候，代码的编写和维护变得异常困难。

RequireJS的诞生是为了解决这两个问题：

• 实现JS文件的异步加载避免页面失去响应
• 管理模块之间的依赖关系，便于代码编写和维护。

加载资源文件

<script src="https://cdn.bootcss.com/require.js/2.3.5/require.js"></script>

如何定义一个模块：
1.模块是单独的js文件
2.每个模块都有自己独立的作用域  函数
3.定义模块语法：

define('模块名称', [依赖项], function () {
  //模块功能
  var obj = {
    name:'mike',
    sayHi: function () {
      console.log('hello world my name is '+this.name)
    }
  }
  return obj;
})

4.模块名称一般省略(匿名模块)
5.依赖项是指当前模块依赖的模块,如果没有就省略
6.导出项：模块需要暴露给外界的数据，用return返回即可，引入模块时，在回调函数的参数列表中设置形参接收

如何引入模块

require(['./js/a'], function(res) {
  res.sayHi()
})

模块化导出的优势
与沙箱相比，沙箱将数据暴露给了全局window对象，而模块将数据暴露给了另一个函数，避免了全局污染

引入多个模块
引入多个模块，形参必须和模块的顺序一一对应

require(['./js/a','./js/b','./js/c'],function(res_a,res_b,res_c){

}) 

路径配置
当模块的路径比较复杂的时候，我们可以使用路径配置，整个网站只需要配置一次，引入模块时直接使用别名，
配置路径时最好使用绝对路径

require.config({
  baseUrl:'/myProject/js/one/two/three/',//基础路径
  //起别名:给复杂的路径起一个别名
  //别名 = baseUrl + 别名对应的路径
  path:{
    a:'four/five/a.js',
    b:'six/b.js'
  }
})
require([a,b],function(res_a,res_b){

})