0

私は、使用するさまざまな機能を短くし、比較的簡単にテストできるようにすることで、私が取り組んでいる jquery プラグインを構成可能に保ち、誰かを保守可能にしようとしています。

これには、jQuery ボイラープレート Addy Osmani の Lightweight Start に基づいた jQuery プラグイン コードを使用して、オーバーライドを渡すことができるプラグインを作成し、一連の小さな関数から既存の関数を作成します。

done()ただし、関数呼び出し内のすべての関数コードを再度宣言せずに、遅延コールバック内から宣言した関数にアクセスする方法を理解するのに問題がありますdone()。

ボイラープレートで概説されているようなプロトタイプ ベースのアプローチを使用する場合に、これらの機能を利用可能にするための推奨パターンはありますか?

(function($, window, document, undefined) {

  var pluginName = 'myModule';

  function myModule(element, options) {
    this.element = element;

    //  allow override of defaults
    this.options = $.extend({}, defaults, options);

    this._defaults = defaults;
    this._name = pluginName;

    // calling the init() function defined below
    this.init();
  }

  myModule.prototype = {

    init: function() {
      // add listeners for clicks on the element, and trigger some 
      // behaviour defined in fetchScore()
      $(this.element).click(function() {
        that.fetchScore();
        return false;
      });

    },
    handySuccessFunction: function() {
      // some handy DOM manipulation stuff,
      // kept out the main fetchScore function,
      // ideally to make it more testable and readable
    },
    handyFailingFunction: function() {
      // same again for failing case
    },

    fetchScore: function(authToken) {

      $.getJSON(this.options.endpoint, {
        apiKey: this.options.apiKey,
        otherParam: this.options.otherParam,
        token: authToken
      })
        .done(function(json) {
        // I want to call the handySuccessFunction() here,
        // but I have no access to myModule
      })
        .fail(function(jqxhr, textStatus, error) {
        // Likewise I want to call the handyFailingFunction() here
      });
    }
  }

  // A really lightweight plugin wrapper around the constructor,
  // preventing against multiple instantiations. 
  // We store a reference to the 
  $.fn[pluginName] = function(options) {
    return this.each(function() {
      if (!$.data(this, "plugin_" + pluginName)) {
        $.data(this, "plugin_" + pluginName,
          new pluginName(this, options));
      }
    });
  }

})(jQuery, window, document);

これが私の予想される使用法です：

jQuery(document).ready(function($) {
  // console.log('clicking the popup');

  $('#elementToAttachTo').myModule();

  // clicking on this to trigger the fetchScore
  // behaviour in myModule
  $('#elementToAttachTo').click();

})
4

1 に答える 1

0

「done」でコールバック関数に「bind」を使用し、コンテキスト (「this」) をこの関数が宣言された myModule インスタンスに設定する必要があります。

いくつかの方法があります。

  1. 最新のブラウザで動作するネイティブな Function.prototype.bind() メソッドを使用できます

  2. jQuery $.proxy 関数を使用できます。

そう

 myModule.prototype.fetchScore = function(authToken) {
    $.getJSON(this.options.endpoint, {
      apiKey: this.options.apiKey,
      otherParam: this.options.otherParam,
      token: authToken
    })
    .done(function(json) {
        this.handySuccessFunction();
    }.bind(this))
    .fail($.proxy(function(json) {
        this.handyFailingFunction();
    }, this))
    ;        
 };
于 2013-05-30T15:22:17.300 に答える