試圖使AJAX調用不那麼笨

我最近閱讀了一篇關於讓代碼儘可能少依賴DOM的博客文章（即儘可能多地保留$（document）.ready（）函數）。我已經成功地創建像這樣的觀點模塊的東西這樣做：試圖使AJAX調用不那麼笨

var View = function (e) { 
    this.element = e; 
}; 

View.prototype = { 
    show: function() { 
    this.element.fadeIn(); 
    }, 
    //More manipulation functions 
}; 

$(document).ready(function() { 
    var myView = new View($('#element')); 
    myView.show(); 
});

我似乎無法找到一種方法來包裝，使他們不依賴於DOM是正在AJAX調用到對象加載的，所以我不必每次我做一個AJAX調用時寫的是這樣的：

$.ajax({ 
    url: "signout.php", 
    type: "POST", 
    dataType: "json", 
    error: function (jqXHR, textStatus, errorThrown) { 
    alert('An error occured while trying to log out.'); 
    }, 
    success: function (data, textStatus, jqXHR) { 
    settingsWidget.getAction('#settings').triggerAction(500, function() { 
     WIDGETS.setOnTop('#login', SideEnum.RIGHT); 
    }); 
    }, 
    complete: function (jqXHR, textStatus) {} 
});

有沒有我可以用它來實現我想要做一個設計模式？另外，是否最好將jQuery DOM對象傳遞給View對象或僅僅是選擇器，並獲取View對象內的DOM對象？

來源

2012-08-31 KylePlusPlus

從技術上講，您的整個模塊都依賴於DOM ready事件。 –

弄髒了DOM一直是一個問題。 Backbone.js非常棒，它有助於爲代碼提供很多結構。道格拉斯克羅克福德的模塊模式將有助於爲您的許多代碼提供封裝。

http://www.adequatelygood.com/2010/3/JavaScript-Module-Pattern-In-Depth

的一些設計模式

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

這一個偉大的故事大綱是我目前的設計模式

https://github.com/bmarti44/jq-mod-pat

你用什麼，完全使用給你，但你應該罰款做任何這些patt阿賈克斯調用ERNS。希望其中的一個會給你一些啓發。

來源

2012-09-01 01:58:08 bmarti44

這些都是很棒的資源，正是我一直在尋找的。非常感謝你。 – KylePlusPlus

你看過$.ajaxSetup()嗎？我有我所有的常見阿賈克斯選項爲我設置一次，然後每當你做一個$.ajax()，$.getJson(),$.post()，等等。它使用您在您的設置中預定義的所有默認值。至於不依靠dom，儘可能地介入非常好！看看backbone.js，它可以解決所有的問題，包括設置和View.prototype，因爲它可以爲你做所有事情。希望這可以幫助！

來源

2012-08-31 23:48:16 Jay

是的，我真的已經看過它，但通常只會幫助一些設置，如類型，數據類型和錯誤。我聽說過很多關於backbone.js的內容，但還沒有研究它，我會盡快解決。感謝您的建議。 – KylePlusPlus

我給你和你應該做的想法：

var View = function(e) { 
    this.$el = e; //using "$" before variable with jquery object is better for reading code 
    this.$settings = $('#settings'); 
    this.login = $('#login'); 
} 


View.prototype = { 
    show: function() { 
    this.element.fadeIn(); 
    }, 

    signOut: function() { 
    var self = this; 

    $.ajax({ 
     url:    "signout.php", 
     type:    "POST", 
     dataType:   "json", 
     error:   function(jqXHR, textStatus, errorThrown) { 
      alert('An error occured while trying to log out.'); 
     }, 
     success:   function(data, textStatus, jqXHR) { 
      self.someAction(); 
     }, 
     complete:   function(jqXHR, textStatus) { 
     } 
    }); 

    }, 

    someAction: function() { 
    var self = this; 
    settingsWidget.getAction(self.settings).triggerAction(500, function() { 
     WIDGETS.setOnTop(self.login, SideEnum.RIGHT); 
    }); 
    } 
}

我不知道你應該在的getAction和setOnTop功能傳遞什麼作爲參數，但我給你一個想法如何緩存對象並使它們成爲一些類變量。

來源

2012-09-01 00:09:44 Eru

謝謝，這有助於很多。 – KylePlusPlus

值得一看：Global Ajax Event Handlers

來源

2012-09-01 00:23:26

謝謝，我會看看那個。 – KylePlusPlus

試圖使AJAX調用不那麼笨

回答

相關問題