根據jQuery AJAX請求返回的數據創建自定義JavaScript對象

Question

我想創建一個自定義javascript對象，其中包含從jQuery AJAX請求返回的數據，但是我不知道哪種方法是正確的。 我在想，也許一種方法可能是在構造函數中包含AJAX請求，以便這樣創建對象：

// Constructor function
function CustomObject(dataUrl) {
    var that = this;

    $.ajax(dataUrl, {
        success: function (json) {
            that.data = $.parseJSON(json);
        }
    });
}

// Creating new custom object
var myObject = new CustomObject('http://.....');

另一種方法可能是使用執行AJAX的函數，然后基於來自AJAX響應的數據返回新對象。

function customObject(dataUrl) {
    // Constructor function
    function CustomObject(data) {
        this.data = data;
    }

    $.ajax(dataUrl, {
        success: function (json) {
            var data = $.parseJSON(json);
            return new CustomObject(data);
        }
    });
}

// Creating new custom object
var myObject = customObject('http://.....')

我想知道做這種事情的最佳做法是什么，以及不同方法的優點/缺點。 也許您可以為我指出一些與我嘗試做的事情類似的文章或示例。

提前致謝。

Answer 1

我認為這將是一個更好的方法，它使您的CustomObject只了解其中包含的數據。 在這里，您將創建對象的工作委托給工廠，並傳遞回調以獲取對創建對象的引用，因為ajax是異步的。 如果您不介意使其同步，則createCustomObject函數可以僅返回實例，並且可以刪除回調。

function CustomObject(data) {
    this.data = data;
}

var factory = (function(){
   function create(dataUrl, objectClass, callback){
       $.ajax({
           url: dataUrl,
           success: function (data) {
              callback(new objectClass(data));
            }
           });
   }
   return{
      createCustomObject: function(dataUrl, callback){
          create(dataUrl, CustomObject, callback);
      }
   };
})();

// Creating new custom object
var myObject = null;
factory.createCustomObject('http://..', function(customObject){
   myObject = customObject;
});

Answer 2

我認為第二種方法更好，因為只有在腳本完全准備好后才創建新的CustomObject （即，它具有AJAX請求中需要的數據），然后您才創建它。