DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 關於RequireJS的簡單介紹即使用方法
關於RequireJS的簡單介紹即使用方法
編輯:關於JavaScript     

RequireJS介紹

RequireJS 是一個JavaScript模塊加載器。它非常適合在浏覽器中使用。使用RequireJS加載模塊化腳本將提高代碼的加載速度和質量。

兼容性

浏覽器(browser) 是否兼容 IE 6+ 兼容 ✔ Firefox 2+ 兼容 ✔ Safari 3.2+ 兼容 ✔ Chrome 3+ 兼容 ✔ Opera 10+ 兼容 ✔

優點

實現js文件的異步加載,避免網頁失去響應

管理模塊之間的依賴性,便於代碼的編寫和維護

快速上手

step 1

引入require.js

require()中的依賴是一個數組,即使只有一個依賴,你也必須使用數組來定義

第二個參數是回調函數(callback),可以用來解決模塊之間的依賴性

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript">
      require(["js/a"], function(){
        alert("load finished");
      });
    </script>
  </head>
  <body>
   body
  </body>
</html>

step 2

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

如果固定的位置比較長,可以使用 baseUrl : "js",則paths中就不用寫js了

<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="require.js"></script>
    <script type="text/javascript">
      require.config({
        paths : {
          "jquery" : ["http://vs.thsi.cn/js/jquery-1.7.2.min", "js/jquery"],
          "a" : "js/a"        
        }
      });

      require(["jquery", "a"], function(){
        alert("load finished");
      });
    </script>
  </head>
  <body>
   body
  </body>
</html>

step 3

step 2中重復出現了require.config配置,如果每個頁面中都加入配置,就顯得不大好了,requirejs提供了一種叫"主數據"的功能

創建一個main.js把step 2中require.config放到main.js中

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

step 4

通過require加載的模塊一般都需要符合AMD規范即使用define來申明模塊,但是部分時候需要加載非AMD規范的js,這時候就需要用到另一個功能:shim

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

以上就是小編為大家帶來的關於RequireJS的簡單介紹即使用方法全部內容了,希望大家多多支持~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved