学会使用RequireJS

小伙伴们在刚开始写js的时候，一般是不是都把js放到html网页里面，加一个<script type="text/javascript"></script>标签来调取外部js以及实现自己写的一些js功能。
比如下面这样：

<script type="text/javascript">  
   var a = 1;  
   var b = 2;   
   var c = a * a + b * b;    
   if(c> 1) {     
      alert('c > 1');   
   }     
   function add(a, b) {     
      return a + b;   
    }     
  c = add(a,b); 
</script> 
<a href="javascript:;" onclick="click(this);" title="">请点击</a> 

这代码对于实现功能来说，一点问题都没有。但是如果你在一个比较大的项目当中，需要实现的功能特别多，你想想会出现什么问题。

1. 全局变量太多，极易发生命名冲突。
2. 代码太多，没有条理，不利于代码的维护和调试 。
3. 不利于代码的组织和管理，代码调用不方便。
4. js加载会导致浏览器阻塞，影响用户体验。

这些问题出现的时候，总会有些大神去想办法解决，于是模块化开发就出现了。正如模块化这个概念的表面意思一样，它要求在编写代码的时候，按层次，按功能，将独立的逻辑，封装成可重用的模块，对外提供直接明了的调用接口，内部实现细节完全私有，并且模块之间的内部实现在执行期间互不干扰，最终的结果就是可以解决前面举例提到的问题。

RequireJS就是一种遵循AMD规范的模块化开发的实现方式。

如果想要了解详细的RequireJS的内容，可以访问RequireJS的中文网。
RequireJS 中文网

我在这里就介绍一种最基本的模块化的函数调用。

首先我们把require.js放到项目里，并新建一个main.js，和一个a.js。然后就可以把html页面里的js代码全部去掉了。然后加入一条代码

<script data-main="js/main" src="js/require.js" defer async="true"></script>

这里就是调用了require.js的方法，然后访问了main.js文件。我们先来看看a.js里是什么东西

define( function() {        
  return {            
      addToCart: function(x,y) {               
      console.log(x+y)            
        }        
    }    
});

这是一个最简单的，没有调用其他js的模块，我们添加了一个addToCart函数，让他打印传入的两个值的和。

现在我们再来看看main.js的内容

require.config({    
baseUrl : "js",    
paths : {       
       "jquery" : "js/jquery",        
       "a" : "js/a"    
}})
require(["jquery","a" ],   
       function($,a){       
       a.addToCart(2,3);    
})

require.config里的是对一些调用js的路径配置，baseUrl 配置为js，那下面的js调用默认就是调用js路径下。paths可以把一些特殊路径上的js转换成简写。第一个参数是调用名称，第二个参数是路径。
require里就是对js的调用和实现，[]里的是需要调用的js，function后面是对于这些调用js的声明，之后就可以通过使用这些声明来调用相关js。

现在我们通过声明a来调用a.js。a.addToCart(2,3)就是调用a.js下面的addToCart函数，传入2和3两个值。结果如图显示：

结果

打印出来5，说明函数正常运行了。

通过这种方式，我们就实现了js的模块化编程，可以把不同的js内容，分成好多块来进行调用。

这的代码看起来是不是很整洁，很有条理啊！