3

我最近阅读了一篇关于让您的代码尽可能少地依赖 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 对象？

4

4 回答 4

2

你调查过$.ajaxSetup()吗？我为我设置了所有常用的 ajax 选项，然后每次你制作$.ajax(), $.getJson(),$.post()等时它都会使用你在设置中预定义的所有默认值。至于不依赖dom，尽量不打扰就很好了！看看backbone.js，它可以解决你所有的问题，包括设置和View.prototype，因为它会为你完成所有这些。希望这可以帮助！

于 2012-08-31T23:48:16.420 回答
2

值得一看：全局 Ajax 事件处理程序

于 2012-09-01T00:23:26.783 回答
2

弄脏 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 调用。希望其中之一能给你一些启发。

于 2012-09-01T01:58:08.840 回答
1

我会给你和你应该做什么的想法：

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-01T00:09:44.873 回答