requireJS的使用

時間 2019-11-25

原文原文鏈接

原文：http://www.360doc.com/content/15/0424/17/21412_465723215.shtmljavascript

requireJS的使用:html

RequireJS是一個很是小巧的JavaScript模塊載入框架，是AMD規範最好的實現者之一。最新版本的RequireJS壓縮後只有14K，堪稱很是輕量。它還同時能夠和其餘的框架協同工做，使用RequireJS必將使您的前端代碼質量得以提高。前端

通常狀況下，咱們加載js都是直接寫在頁面body裏面，這樣會形成頁面阻塞，使用require不只能解決這個問題，還能爲大規模web開發提供規範，版本管理等。java

例如一個經典的加載js是這樣：jquery

<!DOCTYPE html>
<html>
    <head>
        <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>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

而使用了require以後，頁面變成了：web

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="require.js"></script>
        <script type="text/javascript">
            require(["a","b","c","d"]);
        </script>
    </head>
    <body>
      <span>body</span>
    </body>
</html>

　　固然，咱們可使用 data-main把邏輯放到main.js文件裏面api

<script data-main="js/main.js" type="text/javascript" src="libs/require.js" ></script>

　　是否是很簡單呢？數組

那require怎麼用呢？下面先了解一下require的基本api:
require會定義三個變量：
define,require,requirejs，其中require === requirejs，通常使用require更簡短
define 用來定義一個模塊
require 加載依賴模塊，並執行加載完後的回調函數框架

比較經典的寫法是：函數

require(["module"],function(module){ 
   module.function();
})

　　第一個參數是一個模塊數組，第二個參數是回調函數，一般回調函數會有模塊提供的接口，這樣就實現了依賴注入，減小了全局變量污染。注意參數注入的順序要與模塊數組順序一致，名字並不重要，順序一致表明把對象傳給這個變量。
這是require的基本寫法，那這些文件在哪找呢？
require提供了很智能的找法，若是index.html頁面加入了data-main標籤，則這個目錄將會成爲基目錄，即baseUrl，若是沒有的話，index.html所在的目錄將成爲基目錄，require默認的文件就是js文件，因此，咱們在使用require的時候，能夠連.js都不用寫，直接require([‘a’]); 至關於加載了a.js文件

若是文件不在這個相對路徑下，咱們還能夠經過配置來找文件，使用require.config()的path參數;

require.config({
    paths : {
        // 其餘目錄下的文件
        "a" : "../libs/zepto",
        // 絕對路徑 
        "b" : "/libs/handlebars",
        // 加載cdn文件
        "jquery" : ["http://libs.baidu.com/jquery/2.0.3/jquery"]   
    }
})

　　path映射那些不直接放置於baseUrl下的模塊名(這至關於跟冗長的模塊名取個簡介的名字)。設置path時起始位置是相對於baseUrl的，除非該path設置以」/」開頭或含有URL協議（如http:）.

另外，經過require加載的模塊通常都須要符合AMD規範即便用define來申明模塊，可是部分時候須要加載非AMD規範的js，例如一些舊的庫，或者jquery的插件庫等，這時候就須要用到另外一個功能：shim

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

　　這裏jquery.form依賴於jquery，因此咱們須要添加deps參數。還能夠更簡單點，對做爲jQuery或Backbone的插件存在而不導出任何模塊變量的」模塊」們， shim配置可簡單設置爲依賴數組

requirejs.config({
    shim: {
        'jquery.colorize': ['jquery'],
        'jquery.scroll': ['jquery'],
        'backbone.layoutmanager': ['backbone']
    }
});

　　基本用法就這些，更深刻的學習請參考requirejs官方文檔：http://requirejs.org/ 中文版的能夠再看一下這個：http://javascript.ruanyifeng.com/tool/requirejs.html

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。