RequireJS

RequireJS

概括

RequireJS是一个JavaScrip模块加载，可以提高代码的加载速度和质量。
浏览器兼容情况如下：
IE 6+/Firefox 2+/Safari 3.2+/Chrome 3+/Opera 10+

优点

1、实现js文件的异步加载，避免网页失去响应（我们在进行页面开发时，会引入很多js文件，页面会依次同步加载这些js文件，这样页面响应时间会很长）
2、管理模块之间的依赖性，便于代码的编写和维护；
3、基于AMD模块化机制，让前端代码也能实现模块化。

使用

1、在html页面中引入require库

	<script type="text/javascript" src="./js/require.js"></script>

2、加载require.js以后，下一步就要加载我们自己的代码了。假定我们自己的代码文件是main.js，也放在js目录下面。那么，只需要写成下面这样就行了：

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

3、主模块main.js的写法：

主模块main.js主要是加载requireJs的配置项，所以需要先了解一下这些配置项的意思：

（1）baseUrl：模块默认加载路径；

（2）paths：自定义模块加载路径；

（3）shim：定义模块之间的依赖关系。

/*main.js*/
	require.config({
	    'baseUrl' : './app/',
	    'paths' : {
	        'jquery' : '../js/jquery',//只写文件名，不用带后缀
	        'bootstrap' : '../js/bootstrap.min',
	        'test' : '../js/test'
	    },
	    'shim' : {
	        'bootstrap' : {
	            'deps' : ['jquery']
	        },
	        'test' : {
	            'deps' : ['jquery', 'bootstrap']
	        }
	    }
	});

（1）我们在使用requireJS时，都会把所有的js交给requireJS来管理，也就是我们的页面上只引入一个require.js，把data-main指向我们的main.js。

（2）通过我们在main.js里面定义的require方法或者define方法，requireJS会把这些依赖和回调方法都用一个数据结构保存起来。

（3）当页面加载时，requireJS会根据这些依赖预先把需要的js通过document.createElement的方法引入到dom中，这样，被引入dom中的script便会运行。

（4）由于我们依赖的js也是要按照requireJS的规范来写的，所以他们也会有define或者require方法，同样类似第二步这样循环向上查找依赖，同样会把他们村起来。

（5）当我们的js里需要用到依赖所返回的结果时(通常是一个key value类型的object),requireJS便会把之前那个保存回调方法的数据结构里面的方法拿出来并且运行，然后把结果给需要依赖的方法。

原文链接