Question

我最近阅读了一篇关于让您的代码尽可能少地依赖于DOM的博客文章（即尽可能多地保留$（document）.ready（）函数）。我已经成功地做了这样的事情，比如创建这样的视图模块：

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();
});

我似乎无法找到将AJAX调用包装到对象中的方法，因此它们不依赖于正在加载的DOM，所以每次进行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对象？

Answer 1

你有没有看过$.ajaxSetup()？我为我设置了所有常用的ajax选项，然后每次创建$.ajax()，$.getJson()，$.post()等等时，它会使用您在设置中预定义的所有默认值。至于不依赖于dom，尽可能不引人注目是非常好的！看看backbone.js，它可以解决你所有的问题，包括setup和View.prototype，因为它可以为你完成所有这些。希望这可以帮助！

Answer 2

值得一看：Global Ajax Event Handlers

Answer 3

消耗DOM一直是个问题。 Backbone.js很棒，它有助于为代码提供大量结构。 Douglas Crockford的模块模式也将为您的许多代码提供封装。

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

一些设计模式的精彩概要

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

这就是我目前用作设计模式的方法

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

你使用的是由你决定的，但你可以使用任何这些模式进行ajax调用。希望其中一个会给你一些灵感。

Answer 4

我会告诉你你应该做些什么：

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函数中传递什么作为参数，但是我告诉你如何缓存对象并使它们成为某种类变量。

试图让AJAX调用不那么笨重

4 个答案: