小伙伴们在刚开始写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>
这代码对于实现功能来说，一点问题都没有。但是如果你在一个比较大的项目当中，需要实现的功能特别多，你想想会出现什么问题。
- 全局变量太多，极易发生命名冲突。
- 代码太多，没有条理，不利于代码的维护和调试 。
- 不利于代码的组织和管理，代码调用不方便。
- 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内容，分成好多块来进行调用。
这的代码看起来是不是很整洁，很有条理啊！
