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

一見の価値あり: Global Ajax Event Handlers

于 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 に答える
2

調べました$.ajaxSetup()か？私はすべての一般的な ajax オプションを一度セットアップしてから、 、 、 などを作成するたび$.ajax()に$.getJson()、$.post()セットアップで事前に定義したすべてのデフォルトを使用します。ドムに頼らないということは、なるべく邪魔にならないのがとてもいい！backbone.js を見てください。セットアップや View.prototype を含むすべての問題が解決される可能性があります。お役に立てれば！

于 2012-08-31T23:48:16.420 に答える
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 に答える