6-1-1.rquire.js详解与运用

一、为什么要用require.js？

最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，
一个文件不够了，必须分成多个文件，依次加载。下面的网页代码，相信很多人都见过。

<script src="http://cdn.bi-ci.com/static/jquery/jquery-1.11.3.min.js"></script>
<script src="http://cdn.bi-ci.com/static/bootstrap/bootstrap-3.3.4.min.js"></script>
<script type="text/javascript">
    $('#punchCheckP').children('a').click(function(){
        $(this).addClass('punchCheckActive').removeClass('punchCheck');
        $(this).siblings('a').addClass('punchCheck').removeClass('punchCheckActive');
    });
</script> 
<script src="http://ditu.google.cn/maps/api/js?sensor=false&language=zh"></script>  
<script id="lushu" src="http://7xlcqz.com2.z0.glb.qiniucdn.com/lushu_{{ lushu_id }}.js"></script>
<!-- 带有标签的marker -->
<script type="text/javascript" src="/static/dist/js/markerwithlabel.js"></script> 
<!-- 聚合 -->
<script type="text/javascript" src="/static/dist/js/clusterMarker.js"></script>
<script src="/static/dist/js/cluserLive.js"></script>
<script src="/static/dist/js/live.js"></script>
<script>
var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?7b262f3838ed313bc65b9ec6316c79c4";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>

这段代码依次加载多个js文件。
这样的写法有很大的缺点。首先，加载的时候，加载文件越多，浏览器会停止网页渲染，网页失去响应的时间就
会越长（1.HTML的响应流被阻塞在了网络中；2.脚本和样式的阻塞；3.这些脚本或样式被解析、执行并且应用
的时候，也会阻塞页面的渲染）；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序（比如上
例的markerwithlabel.js要在cluserLive.js的前面），依赖性最大的模块一定要放到最后加载，当依
赖关系很复杂的时候，代码的编写和维护都会变得困难。

require.js的诞生，就是为了解决这两个问题：

  （1）实现js文件的异步加载，避免网页失去响应；

  （2）管理模块之间的依赖性，便于代码的编写和维护。

二、参考文档

  清楚易懂的博客：http://blog.csdn.net/liuyan19891230/article/details/50844319

  推酷上关于requirejs的文章：http://www.tuicool.com/topics/11060066

  如何使用将RequireJS引用的文件打包成一个js文件：
  http://www.tuicool.com/articles/rURvuqR

  【1】阮一峰requirejs：
    http://www.ruanyifeng.com/blog/2012/11/require_js.html

  【2】requirejs中文文档：http://www.requirejs.cn/

三、AMD规范与CMD规范的区别

0、AMD 是 RequireJS 对模块定义的规范化。
   CMD 是 SeaJS 对模块定义的规范化产出。
1、从官方推荐的写法上面得出：
//CMD 
define(function(require,exports,module){ 
  var a = require('./a'); 
  a.doSomthing(); 
}); 

//AMD 
define(['./a','./b'],function(a,b){ 
  //...... 
  a.doSomthing(); 
  //...... 
  b.doSomthing(); 
}) 
注意：factory 是一个用于执行该模块的方法，它可以使用前面 deps 里声明的其他依赖模块的返回
值作为参数。

当然AMD也支持CMD的写法。
2、执行顺序上：
CMD是延迟执行
AMD是提前执行,requireJS从2.0开始可以延迟执行
3.AMD 的 API 默认是一个当多个用，CMD 的 API 严格区分，推崇职责单一

四、实践运用

（一）.简单运用实例
我有一个中间模块，我把他叫做sth，这个模块放在 sth.js 里面，如下

define(function(require){
var p1 = require('part/part1');
var p2 = require('part/part2');
  return {
      f1: p1.doSome,
      f2: p2.doOther
  }
})
这里面require了另外两个子模块，part1和part2，并把他们的方法拿出来放到中间块里面并且
返回我们来看下part1，part2长啥样
//part1.js
define(function(){
  return {
      doSome: function(){
        console.log('doSome')
      }
  }
})
//part2.js
define(function(){
  return {
    doOther: function(){
        console.log('doOther')
      }
  }
})
然后我们在主文件里，比如index.html,main.js…调用 sth

require(['sth','check'],function(sth,check){
  if(check.ok){
    sth.f1()
  }else{
    sth.f2()
  }
})
我们假设这里还有另外一个check对象，如果check为真则执行sth.f1,否则执行sth.f2 想一下
，f1，f2其实是在两个文件里面。

这里只是我虚构一个假的例子，实际应用中要根据自己的实际需求去设计构思自己的项目，再次提
醒，不要为了用而用。

（二）.requireJS对文件合并与压缩实现方法

http://www.phperz.com/article/14/1102/32593.html

（三）. gulp 打包 require.js 模块依赖

https://segmentfault.com/a/1190000002876583

五.为什么我司没用requireJs？

我们前端老大说，历史原因，再是requireJs只是方便了前端开发，对性能优化并没有多大作
用？？哈哈哈