用RequireJS編寫JavaScript模塊

模塊化編寫JavaScript，在web前端程序不斷擴大的時候，是一個很好的重構技術。

下面的例子有兩個模塊，

artDialog模塊依賴jquery和jquery.artDialog庫，提供了彈出錯誤對話框的功能。

require.config({
 paths: {
  "jquery": "../thirdParty/jquery-1.8.0.min",
  "jquery.artDialog": "../../plugin/artDialog4.1.6/jquery.artDialog"
 }
});

define("artDialog",
      ["jquery", "jquery.artDialog"],
      function ($, artDialog) {
        return {
        cancelText: "",

        language: "",

        // language should be either 'cn' or 'en'
        init: function (language) {
          this.language = language;
          if (language === "cn") {
          this.cancelText = "取消";
          } else {
          this.cancelText = "Cancel";
          }
        },

        error: function (message) {
          $.dialog({
          icon: "error",
          content: message,
          cancelVal: this.cancelText,
          ok: function () {
            this.close();
          }
          });
        }
        };
      }
      );

解釋一下：

1.require.config裡面的paths 用了key: value形式，key是名稱簡寫，path是從當前位置找到依賴文件的路徑
2.define是定義模塊的意思，第一個參數"artDialog"是指這個模塊的名稱，數組裡面是本模塊依賴的其他js模塊，
3.RequireJS看到2定義的依賴模塊後，會去加載這些js文件，加載完成後，會調用函數function($, artDialog)
4.回調函數反回一個json對象，裡面有成員變量和函數。

ajaxUtility模塊內部使用了artDialog模塊，看看代碼：

require.config({
 paths: {
  "jquery": "../thirdParty/jquery-1.8.0.min",
  "artDialog": "./dialog"
 }
});

define("ajaxUtility",
      ["jquery","artDialog"],
      function ($, artDialog) {
        return {
        cancelText: "",

        language: "",

        // language should be either 'cn' or 'en'
        init: function (language) {
          this.language = language;
          artDialog.init(language);
          if (this.language === "cn") {
          this.cancelText = "取消";
          } else {
          this.cancelText = "Cancel";
          }
        },

        // popup an error dialog
        defualtErrorHandler: function (jqXHR, textStatus) {
          artDialog.error("Ajax request got an error:" + textStatus);
        },

        // execute .ajax function and except the returned data type is json
        // handler(msg) will be callback when .ajax succeeded
        // errorHandler(jqXHR, textStatus) willl be callback if .ajax failed
        exe: function (urlPath, asyncWay, method, dataValue, handler, errorHandler, context) {
          var error, request;
          if (errorHandler) {
          error = errorHandler;         
          } else {
          error = this.defaultErrorHandler;
          }
          request = $.ajax({
          url: urlPath,
          async: asyncWay,
          type: method,
          dataType: 'json',
          data: dataValue
          });

          // request.done(handler);

          request.done(
          (function (ob, hdl) {
            return function(msg) {
            hdl(ob, msg); 
            }
          })(context, handler)
          );
          request.fail(error);
        },

        // post data to server using .ajax
        // handler(msg) will be callback when .ajax succeeded
        // errorHandler(jqXHR, textStatus) willl be callback if .ajax failed
        post: function (urlPath, asyncWay, dataValue, handler, errorHandler, context) {
          this.exe(urlPath, asyncWay, 'POST', dataValue, handler, errorHandler, context);
        },

        // call web method with GET to server using .ajax
        // handler(msg) will be callback when .ajax succeeded
        // errorHandler(jqXHR, textStatus) willl be callback if .ajax failed
        get: function (urlPath, asyncWay, dataValue, handler, errorHandler, context) {
          this.exe(urlPath, asyncWay, 'GET', dataValue, handler, errorHandler, context);
        }
        };
      }
      );