基於RequireJS和JQuery的模組化程式設計－常見問題全面解析

首頁

web前端

js教程

基於RequireJS和JQuery的模組化程式設計－常見問題全面解析_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:05 PM

jquery模組化程式設計

由於js的程式碼邏輯越來越重，一個js檔案可能會有上千行，十分不利於開發與維護。最近把邏輯很重的js分割成模組，在一頓糾結是使用requirejs還是seajs的時候，最後還是偏向requirejs。畢竟官方文件比較專業嘛...

不過即便是有完整的官方文檔，仍然遇到不少的問題，例如jquery-ui的使用。

以下就循序漸進的講解一下我遇到的問題，以及解決的辦法。

關於AMD和CMD的理解

AMD（非同步模組定義）的典型就是requirejs，而CMD（通用模組定義）的典型是淘寶的seajs。

他們的相同點是，都會異步的載入js。但不同點是，require.js載入完會立即執行；而seajs則是等到進入主函數需要執行時才執行。

如果使用seajs初始的載入執行效率會比較高，但是在使用的過程中可能會取執行js，因此可能會出現卡頓，影響使用者體驗（由於我也沒試過，要是說錯了，別見怪）。而requirejs則是在一開始就把所有載入的js都執行，這時，如果你的模組中有一些執行方法，它們可能不會按照你想的順序執行。

因此，如果已經習慣了非同步編程，並且希望有完善的文檔推薦使用requirejs；如果是想對執行順序有特殊要求，又方便開發，那麼也可以使用seajs。

如何解決requirejs中循環依賴問題

如果你定義的某個a模組使用到了b模組，而b模組又使用了a模組，那麼就會拋出循環依賴的異常。

比如，我這裡寫了一個循環依賴的例子。

主頁：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script data-main="test.js" src="lib/require.js"></script>
</body>
</html>

主方法：

requirejs.config({
  baseUrl: './'
});

requirejs(['js/a'],function (a){
  console.log("in test");
  a.testfromb();
});

a.js模組中，atest()方法提供b呼叫、testfromb()方法呼叫b的方法

define(function(require){
  var b = require("js/b");
  console.log("in a");
  return {
    atest:function(){
      console.log("test in a");
    },
    testfromb:function(){
      console.log("testfromb in a");
      b.btest();
    }
  }
});

b模組中，呼叫了a的方法。

define(function(require){
  var a = require("js/a");
  console.log("in b");
  return {
    btest:function(){
      console.log("test in b");
      a.atest();
    }
  }
});

這樣相當於a呼叫了b的方法，但是b的方法依賴a的方法，這就造成了循環相依性。瀏覽器會提示錯誤：

Uncaught Error: Module name "js/a" has not been loaded yet for context: _

依照官方文件的說法，這種屬於設計的問題，應該盡量避免。那如果避免不了該怎麼辦呢？可以這樣修改b模組：

define(function(require){
  // var a = require("js/a");
  console.log("in b");
  return {
    btest:function(){
      console.log("test in b");
      require("js/a").atest();
    }
  }
});

這裡是等到執行atest()方法時，才載入a模組。這時，a模組很顯然已經加載完了。可以看到輸出的資訊：

in b
a.js:3 in a
test.js:6 in test
a.js:9 testfromb in a
b.js:6 test in b
a.js:6 test in a

同樣的方式，修改a可能就不好使了。這時因為模組載入的順序是從b開始的。

關於循環依賴的源碼可以參考雲盤

如何在requirejs中使用jquery

如果想要使用jquery比較簡單，直接在main.js中加入對應的依賴即可：

requirejs.config({
  baseUrl: './',
  paths:{
    'jquery':'lib/jquery'
  }
});

requirejs(['jquery'],
function ($){
  $('#test').html('test');
});

如何在requirejs中使用jquery插件

对于jquery的插件，比较常见的做法都是传入一个jquery的对象，在这个jquery对象的基础上添加插件对应的方法。

首先需要添加jquery插件的依赖，这里用两个插件举例子——jquery-ui和jquery-datatables

requirejs.config({
  baseUrl: './',
  paths:{
    'jquery':'lib/jquery',
    'jquery-ui':'lib/jquery-ui',
    'jquery-dataTables':'lib/jquery.dataTables'
  },
  shim:{
    'jquery-ui':['jquery'],
    'jquery-dataTables':['jquery']
  }
});

requirejs(['jquery','jquery-ui','jquery-dataTables'],
function ($){
  ....
});

由于jquery插件都需要依赖于jquery，因此可以在shim中指定依赖关系。
除了上面这种使用方法，也可以使用commonJS风格的调用：

define(function(require){
  var $ = require('jquery');
  require('jquery-ui');
  require('jquery-dataTables');
  
    //下面都是测试，可以忽略
  var _test = $('#test');
  _test.selectmenu({
    width : 180,
    change : function(event, ui) {
      console.log('change');
    }
  });
  return {
    test:function(){
      //测试jquery-ui
      _test.append($('<option>test1</option><option>test1</option>'));
      _test.selectmenu("refresh");
      //测试jquery-datatables
      var _table = $('table');
      _table.dataTable();
    }
  }
});

不過，執行上面的程式碼，會報一個異常：

Uncaught TypeError: _table.dataTable is not a function

這是因為，dataTables並不是一個require風格的模組，因此直接這樣引入，並不會執行它內部的匿名函數。可以修改它的匿名函數，傳入$對象，在最後一行：

*/

  return $.fn.dataTable;
//}));原来是这样
}($)));//这里增加执行这个匿名函数，并且传入$对象。

}(window, document));

這也是在網路上搜尋的方法，原理奈何經驗不足....

範例程式碼可以參考雲盤,由於引入的資源不是很全，所以會報錯，可以直接忽略，因為能執行UI插件就表示已經成功了。

requirejs使用jquery-ui的問題

由於requirejs載入js檔案後會立即執行，如果你的jquery ui 外掛需要刷新DOM頁面，那麼可能會導致頁面的事件失效。

例如，你的模組在載入後，對頁面的某個元素$('#test')綁定了click事件。但是使用了某個UI插件，這個插件會重新渲染DOM元素，test對應的click事件就失效了。

解決方法：

•把事件綁定延後到DOM元素渲染完再手動觸發綁定；
•也可以使用事件捕獲來代替DOM元素的事件綁定（太麻煩了...不建議）。

例如在DOM重構的JS模組中，執行渲染的程式碼下面：

require("xxx").initEvents();常見場景：

例如我在頁面中使用了jquery-steps這個UI插件，它會對頁面進行重新渲染。這就導致我最開始綁定的事件都失效了....只有推遲到這個js重構完頁面，再綁定才行。

以上這篇基於RequireJS和JQuery的模組化程式設計－常見問題全面解析就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：開發人員的比較分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要區別在於類型系統和應用場景。 1.Python使用動態類型，適合科學計算和數據分析。 2.JavaScript採用弱類型，廣泛用於前端和全棧開發。兩者在異步編程和性能優化上各有優勢，選擇時應根據項目需求決定。

Python vs. JavaScript：選擇合適的工具May 08, 2025 am 12:10 AM

選擇Python還是JavaScript取決於項目類型：1)數據科學和自動化任務選擇Python；2)前端和全棧開發選擇JavaScript。 Python因其在數據處理和自動化方面的強大庫而備受青睞，而JavaScript則因其在網頁交互和全棧開發中的優勢而不可或缺。

Python和JavaScript：了解每個的優勢May 06, 2025 am 12:15 AM

Python和JavaScript各有優勢，選擇取決於項目需求和個人偏好。 1.Python易學，語法簡潔，適用於數據科學和後端開發，但執行速度較慢。 2.JavaScript在前端開發中無處不在，異步編程能力強，Node.js使其適用於全棧開發，但語法可能複雜且易出錯。

JavaScript的核心：它是在C還是C上構建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; sanInterpretedlanguagethatrunsonenginesoftenwritteninc.1）JavascriptwasdesignedAsignedAsalightWeight，drackendedlanguageforwebbrowsers.2）Enginesevolvedfromsimpleterterpretpretpretpretpreterterpretpretpretpretpretpretpretpretpretcompilerers，典型地，替代品。

JavaScript應用程序：從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗，後端通過Node.js處理服務器任務。 1.前端示例：改變網頁文本內容。 2.後端示例：創建Node.js服務器。

Python vs. JavaScript：您應該學到哪種語言？May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統：1)職業發展：Python適合數據科學和後端開發，JavaScript適合前端和全棧開發。 2)學習曲線：Python語法簡潔，適合初學者；JavaScript語法靈活。 3)生態系統：Python有豐富的科學計算庫，JavaScript有強大的前端框架。

JavaScript框架：為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮：1.項目規模和復雜度，2.團隊經驗，3.生態系統和社區支持。

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

See all articles