jquery.artDialog在requireJS中使用遇到的載入順序問題

query.artDialog估計沒有支援AMD規範，所以當使用requireJS和AMD的模組化方法時，一開時沒有碰到問題。後來在慢速網路環境下，發現jquery還沒有完全載入完成，artDialog已經載入完並報錯，導致總是要重新刷一次頁面。requireJS提供的解決方案叫做shim,  反覆實驗了多次，搞明白了怎麼做：1.每個html頁面裡面都會載入一個js檔案，在這個js檔案裡面調用require.config，所有的配置都寫在裡面，包括shim比如我的頁面叫login.html，裡面載入了loginModule.js檔案：[html] <script data-main="../script/app/loginModule" src="../script/thirdParty/require.js"></script>  loginModule.js裡麵包含了一個配置和一個模組定義：[javascript]  /*global window, document */  require.config({      paths: {          "jquery": "../thirdParty/jquery-1.8.0.min",          "ajaxUtility": "./ajaxUtility",          "jquery.artDialog": "../../plugin/artDialog4.1.6/jquery.artDialog",          "jqueryTool": "./jqueryTool",          "login": "./login"      },      shim: {          "jquery.artDialog": {              deps: ["jquery"],              exports: "artDialog"          }                }    });      define("loginModule", ["jquery", "ajaxUtility", "dialog", "jqueryTool", "login"], function ($, ajaxUtility, dialog, jqueryTool, login) {      'use strict';        var locale = window.locale;      ajaxUtility.init(locale);      $(document).ready(function () {          login.init(ajaxUtility, dialog, jqueryTool, locale);      });  });   注意觀察，我的loginModule是個模組，依賴了dialog模組。dialog模組是我自己定義的另一個模組，它依賴jquery.artDialog模組。而jquery.artDialog模組在shim中註明了依賴jquery。 現在看看依賴jquery.artDialog的模組dialog.js, 下面的數組中聲明了依賴關係，參數使用了shim中exports匯出的變數名。[javascript] define("dialog", ["jquery", "jquery.artDialog"], function ($, artDialog) {      'use strict';        return {          cancelText: "",            locale: "",            okText: "",            titleText: "",            // language should be either 'cn' or 'en'          init: function (locale) {              this.locale = locale;              if (locale === "cn") {                  this.cancelText = "取消";                  this.okText = "確定";                  this.errorTitleText = "錯誤";                  this.okTitleText = "資訊";              } else {                  this.cancelText = "Cancel";                  this.okText = "OK";                  this.errorTitleText = "Error";                  this.okTitleText = "Info";              }          },            error: function (message) {              $.dialog({                  title: this.errorTitleText,                  icon: "error",                  content: message,                  okVal: this.cancelText,                  ok: function () {                      this.close();                  }              });          },            done: function (message) {              $.dialog({                  title: this.okTitleText,                  icon: "ok",  www.2cto.com                content: message,                  okVal: this.okText,                  ok: function () {                      this.close();                  }              });          }      };  });   用好RequireJS需要耐心，配置這玩意兒，光靠看文檔還要結合自己的實際情況反覆實驗才行。順便知道了每個頁面的requireJS配置只需要在top level也就是html頁面直接引用的那個js檔案中添加require.config... 即可。其他的js檔案裡就不需要了。如果有多個頁面，顯然需要多個這樣的top level 檔案。有人叫做bootstrap，名字也很合適。