Require.Js 使用前學習

使用場景：模塊化加載

Requirejs具備以下優勢：

1. 防止js加載阻塞頁面渲染
2. 使用程序調用的方式加載js

基本API

引用原文地址：https://www.runoob.com/w3cnote/requirejs-tutorial-2.html

Requirejs 中定義的三個變量 ：define,require,requirejs （其中require === requirejs，通常使用require更簡短）

define：用來定義一個模塊

require： 加載依賴模塊，並執行加載完後的回調函數

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

    fun1();
})
//require(["js/a"]);

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

加載文件

CDN文件引用

require.config({
    paths : {
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   
    }
})
require(["jquery","js/a"],function($){
    $(function(){
        alert("load finished");  
    })
})

　require.config，require.config是用來配置模塊加載位置

經過paths的配置會使咱們的模塊名字更精煉，paths還有一個重要的功能，就是能夠配置多個路徑，若是遠程cdn庫沒有加載成功，能夠加載本地的庫

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

全局配置

上面的例子中重複出現了require.config配置，若是每一個頁面中都加入配置，必然顯得十分不雅，requirejs提供了一種叫"主數據"的功能，咱們首先建立一個main.js

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

而後再頁面中使用下面的方式來使用requirejs：

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

加載 requirejs 腳本的 script 標籤加入了data-main屬性，這個屬性指定的 js 將在加載完 require.js 後處理，

咱們把require.config的配置加入到data-main後，

就可使每個頁面都使用這個配置，而後頁面中就能夠直接使用require來加載全部的短模塊名

data-main還有一個重要的功能，

當script標籤指定data-main屬性時，

require會默認的將data-main指定的js爲根路徑，

是什麼意思呢？

如上面的data-main="js/main"設定後，

咱們在使用require(['jquery'])後(不配置jquery的paths)，

require會自動加載js/jquery.js這個文件，而不是jquery.js，

至關於默認配置了：

require.config({
    baseUrl : "js"
})

第三方模塊

經過require加載的模塊通常都須要符合AMD規範即便用define來申明模塊，

可是部分時候須要加載非AMD規範的js，

這時候就須要用到另外一個功能：shim

shim解釋起來也比較難理解，shim直接翻譯爲"墊"，其實也是有這層意思的，目前主要用在兩個地方

1. 非AMD模塊輸出，將非標準的AMD模塊"墊"成可用的模塊，

例如：在老版本的jquery中，是沒有繼承AMD規範的，因此不能直接require["jquery"],這時候就須要shim，

好比我要是用underscore類庫，可是他並無實現AMD規範，那咱們能夠這樣配置

 

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

能夠直接使用了

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

2.插件形式的非AMD模塊，咱們常常會用到jquery插件，並且這些插件基本都不符合AMD規範，好比jquery.form插件，這時候就須要將form插件"墊"到jquery中

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : {
            deps : ["jquery"]
        }
    }
})

//#########################//

require.config({
    shim: {
        "underscore" : {
            exports : "_";
        },
        "jquery.form" : ["jquery"]
    }
})