最近项目需要用require.js所以就看了看，以下为require.js的基本用法。
参考文献：
菜鸟教程：http://www.runoob.com/w3cnote/requirejs-tutorial-1.html
阮一峰网络日志：http://www.ruanyifeng.com/blog/2012/11/require_js.html
为什么要用require.js
最早的时候，所有Javascript代码都写在一个文件里面，只要加载这一个文件就够了。后来，代码越来越多，一个文件不够了，必须分成多个文件，依次加载多个js文件。
这样的写法有很大的缺点。首先，加载的时候，浏览器会停止网页渲染，加载文件越多，网页失去响应的时间就会越长；其次，由于js文件之间存在依赖关系，因此必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。
require.js的诞生为了解决：
1）实现js文件的异步加载，避免网页失去响应；
2）管理模块之间的依赖性，便于代码的编写和维护。
如何使用require.js
- 首先去官网下载最新插件点我下载
- 将require.js引入到项目中 使用<srcipt>引入
使用data-main加载我们自己的代码（主模块）假设我们的文件名称为demo.js
<script type="text/javascript" data-main="demo" src="require.js"></script>
- require.js 基本API
require会定义2个变量：
define ： 从名字就可以看出这个api是用来定义一个模块
require ：加载依赖模块，并执行加载完后的回调函数
使用这两个变量定义引用路径的时候文件名不用写成 demo.js 直接写demo就行
一、代码不依赖任何其他模块
通过define函数定义了一个模块：
define(function(){
function fun1(){
alert("it works");
}
fun1();
})
然后在页面中用require使用
require(["demo"]);
来加载该模块(注意require中的依赖是一个数组，即使只有一个依赖，你也必须使用数组来定义)，requir API的第二个参数是callback，一个function，是用来处理加载完毕后的逻辑
require(["demo"],function(){
alert("load finished");
})
二、模块的加载
假如需要用各种插件（比如jquery或者是基于jquery的插件）
首先创建一个js文件 我们起名为min.js，用require.config来配置我们所用插件的路径方便多项目调动
设置的方式有两种：
1、直接把路径写在path中
require.config({
paths :{
"jquery" : ".js/jquery-1.12.3.min",
"placeholder":"js/placeholderfriend",
"swiper":"js/idangerous.swiper.min",
"bar":"js/jqbar",
"city":"js/jquery.citys"
},
//使用shim声明插件基于什么开发的比如以下都为jquery的插件
shim:{
"placeholder":{
deps: ["jquery"]
},
"swiper":{
deps: ["jquery"]
},
"bar":{
deps:['jquery']
},
"city":{
deps:['jquery']
}
}
})
然后在demo.js中引入
//define后面的路径就是刚配置完产检的js路径
define(["main"],function(){
//require 后参数需要的插件（要写成数组形式，即使只用一个）
require(['jquery','placeholder'],function(){
//下面就可以正常写代码了 如
$(function(){
$("#btn").click(function(){
alert("我点击了")
});
})
})
})
2、直接改变基目录（baseUrl）
require.config({
baseUrl: "js",
paths :{
"jquery" : "jquery-1.12.3.min",
"placeholder":"placeholderfriend",
"swiper":"idangerous.swiper.min",
"bar":"jqbar",
"city":"jquery.citys"
},
//使用shim声明插件基于什么开发的比如以下都为jquery的插件
shim:{
"placeholder":{
deps: ["jquery"]
},
"swiper":{
deps: ["jquery"]
},
"bar":{
deps:['jquery']
},
"city":{
deps:['jquery']
}
}
})
后面就一样了
恩，差不多就这样了。
