requirejs学习（一）
requirejs学习（一）
随着网站功能逐渐丰富，网页中的js也变得越来越复杂和臃肿，各种依赖（插件等）也逐渐增多，原有通过script标签来导入一个个的js文件这种方式已经不能满足现在的需求，我们需要团队协作、模块复用等等一系列复杂的需求。
Requirejs是一个非常小巧并且强大的模块加载器，可以帮助我们实现模块化开发，它是AMD规范非常好的体现，使用模块化开发，使得项目更加便于团队协作，模块复用、后期维护等；
我们为什么要使用requirejs？
首先来看看官方的描述：
RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.
大意为：requirejs是js模块加载器，不仅可以在浏览器中运行使用，还可以在Rhino和Node环境中，使用它可以提升你的开发速度和代码质量。。。
先看看我们平时两种常见情况：
第一个，在页面执行自执行函数：
<script>
(function () {
function fn() {
alert('我来自匿名自执行函数！');
};
fn();
})()
</script>
结果：当页面加载的时候，会弹出alert弹框，在点确定之前，页面都是空白，也就是html元素都还未被渲染出来，点确定之后，就正常了。这说明了js是会阻塞浏览器渲染，当引用的js很多的时候，而js只能并行下载有限的几个，这就会让页面处于短暂假死（空白）状态，如下，这不是我们想要的：
<script type="text/javascript" src="a.js"></script> <script type="text/javascript" src="b.js"></script> <script type="text/javascript" src="c.js"></script> <script type="text/javascript" src="d.js"></script> <script type="text/javascript" src="e.js"></script> <script type="text/javascript" src="f.js"></script> <script type="text/javascript" src="g.js"></script> <script type="text/javascript" src="h.js"></script> <script type="text/javascript" src="i.js"></script> <script type="text/javascript" src="j.js"></script>
第二种情况：使用requirejs
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="require.js"></script> <script type="text/javascript"> require(["test"]); </script> </head> <body> <span>body</span> </body> </html>
test.js文件（模块）
define(function(){ function fun1(){ alert("it works"); }; fun1(); })
结果：使用requirejs后，页面加载的时候，弹出alert框，但是页面的内容也同时出来了，没有对比就没有伤害，这就体现了Requirejs的优点了：
- requirejs使用异步加载，不阻塞浏览器渲染；
- 可以按需要加载对应的js模块（文件），防止一次性页面加载大量js文件；
requirejs用法：
1、在页面底部上引入require.js文件，然后指定main入口文件：
1 <script src="./require.js" data-main="./js/main"></script>
其中，data-main属性指向的main.js文件为入口文件，其他的模块在main中按需加载；
在requirejs中，define（定义模块）、require（引入模块），requirejs，其中require===requirejs，require是简写；
main.js
//配置require require.config({
//baseUrl:'../lib', paths:{ jquery:'lib/jquery', bootstrap:'lib/bootstrap', }, //设置依赖关系 shim: { bootstrap: { deps: ['jquery']，
export:'$' } } }); //引入依赖 require(['jquery','bootstrap','addText'],function ($,_,desc) { desc.func(); console.log(desc.text); });
require()
require（）方法有两个参数，前面是一个数组，也就是引入的依赖模块（如果没有依赖的话，也就没必要用requirejs了），第一个参数有依赖的话，必须是一个数组；第二个参数是一个回调函数，函数可以传参，参数根据引入的依赖，自定义一个变量，比如依赖jQuery，那回调的对应的参数可以定义为$。
在引入的依赖模块中，都是异步加载的，所有模块加载完成后执行回调函数；
require.config()
require.config()是用来配置模块的相关属性的：
baseUrl用来定义根目录，后面的paths定义的模块路径就以baseUrl定位的目录lib为基准，在paths中定义的key为模块的变量，在下面可以直接引用；
这里注意，如果没有配置baseUrl，则默认的将根目录设置为main.js所在的目录；
//敲黑板 ，shim是用来配置不兼容AMD模块的，deps是依赖模块，export是导出的当前模块的变量名；
模块路径
前面讲的，默认是其他模块跟main模块在同一目录下；如果不在一个目录下呢，已默认的根目录问基准再去寻找其他的模块路径，如：
项目目录：
main.js
//main.js require(['./addText','../modal'],function (add,m) { console.log(add.text); console.log(m.text); });
addText.js(模块)
//addText define(function () { var addText = function () { $('.btn').click(function () { $('.box').text('我刚刚点击了按钮'); $('#MyModal').modal(); }); }; return { func:addText, text:'啊哈哈，我来自addText' }; });
modal.js(模块)
//modal define(function () { return { text:'啊哈哈，我来自modal' }; });
发现了吧，路径都是以默认的根目录为基准路径（没有手动设置baseUrl的情况下）；
先到这里吧，后面继续学，继续补充。。。
