Requirejs的使用过程是怎样的（怎样搭建一个模块化项目）？

什么是Requirejs？

● RequireJS是一个非常小巧的JavaScript模块载入框架

● 是AMD规范最好的实现者之一

● 最新版本的RequireJS压缩后只有14K，堪称非常轻量

● 它还同时可以和其他的框架协同工作

● 使用RequireJS必将使您的前端代码质量得以提升

使用RequireJS能带来什么样的好处？为什么使用RequireJS

传统的引入js文件的形式是连续加载多个js文件，如下面的形式：

　　<script src="1.js"></script>
　　<script src="2.js"></script>
　　<script src="3.js"></script>
　　<script src="4.js"></script>
　　<script src="5.js"></script>
　　<script src="6.js"></script>

上面的写法存在两点缺陷：

● 加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长

● 由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上例的1.js要在2.js的前面）。依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难

使用RequireJS就是为了解决上面的问题

● 实现js文件的异步加载，避免网页失去响应
● 管理模块之间的依赖性，便于代码的编写和维护
● 可以按需、并行、延时载入js库

RequireJS搭建一个模块化项目的过程

a) 在html中引入Requirejs

<script data-main="js/app.js" src="js/require.js"></script>

data-main的作用是指定网页模块的主程序，即对应的路径是Requirejs配置的主入口， data-main和 src中路径都是相对html的路径，或者是绝对路径。

b) 主模块（整个网页的入口代码，所有的代码都从这运行）的写法，即data-main指定的文件的内容

requirejs.config({
      //模块的加载
  baseUrl:'js/lib',
  paths :{
     
      app:'../app'
  }
});
 
require(["app/start"], function(app) {
      //主模块
     app.hello();
});

● baseUrl为模块(module)的根目录，如果require(依赖) 的模块直接是用文件名作为id的话，会直接在这个目录寻找同名文件资源
● paths 中的属性可以给不同的路径或者文件别名，如果require(依赖) 的模块使用路径作为id的时候可以通过别名匹配path中路径

c) 定义模块，采用AMD规范，即用define()定义模块。（requirejs提供了多种定义模块的方式，可以使用/不使用依赖，返回变量，返回对象，函数，可使用CommonJs的方法在export,module中返结果）

　define(['myLib'], function(myLib){
     
 
　　　　function foo(){
     
 
　　　　　　myLib.doSomething();
 
　　　　}
 
　　　　return {
     
 
　　　　　　foo : foo
 
　　　　};
 
　　});

d) shim配置：将某个依赖中的某个全局变量暴露给requirejs，当作这个模块本身的引用

如官网中例子，把backbone.js引入，抛出Backbone作为模块名引入，deps中申明它需要的依赖，backbone依赖underscore 和jquery

requirejs.config({
     
   shim: {
     
      'backbone': {
     
         deps: ['underscore', 'jquery'],
         exports: 'Backbone'
      },
    'underscore': {
     
        exports: '_'
     }
   }
});

e) 打包压缩：Require.js官网提供了r.js打包工具，只要配置对应的Build.js就可以帮助我们自动化构建