require.js

优势：

 一、防止js加载阻塞页面渲染

 二、使用程序调用的方式加载js

 

require会定义三个变量：define,require,requirejs，其中require === requirejs，通常使用require更简短

一、define 从名字就能够看出这个api是用来定义一个模块 

define(function(){ function fun1(){ alert("it works"); } fun1(); })

二、require 加载依赖模块，并执行加载完后的回调函数

require(["js/a"]);

 

加载js的方式

一、加载本地js

require(["js/a"],function(){ alert("load finished"); })

第一个参数是数组，即便只有一个也要用数组定义，第二个参数是callback,一个function，用来处理加载完毕后的逻辑，第二个参数非必须。

二、加载非本地js，本地的js也可用

require.config({ //用来配置模块的加载位置，简单点说就是给模块起一个更短更好记的名字 paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"], //若是远程库没有加载成功，能够加载本地的库 "a" : "js/a" } }) require(["jquery","a"],function($){ $(function(){ alert("load finished"); }) })

三、加载第三方js

经过require加载的模块通常都须要符合AMD规范即便用define来申明模块，可是部分时候须要加载非AMD规范的js，这时候就须要用到另外一个功能：shim。

require.config({ shim: { "underscore" : { exports : "_"; } } })

这样配置以后，就能够引用了

require(["underscore"], function(_){ _.each([1,2,3], alert); })

全局配置

一、建main.js

require.config({ paths : { "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery", "js/jquery"], //引入 jquery.js "a" : "js/a" //a.js } })

二、页面引入

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