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>