4

たとえば、jQuery UI ダイアログで使用される JavaScript パターンがどのように実現されるかに興味があります。

$.dialog('mydialod').dialog('close');

つまり、コンストラクター関数を jQuery 準拠の方法で作成した後、コンストラクター関数を参照する方法がわかりません。

編集

明確にするために：私にとって本当にあいまいなのは、どこかにいることができる方法です

$('#mydlg').dialog();

そして、どこかで

 $('#mydlg').dialog("somecommand");

まったく異なる場所でさえ、元のインスタンスを指しているようです. 私は、これと何らかの関係があると思います（jquery.ui.widgets.js）、

// create selector for plugin
    $.expr[ ":" ][ fullName.toLowerCase() ] = function( elem ) {
        return !!$.data( elem, fullName );
    };

しかし、本当に私はjavascript / jqueryで何が起こっているのかを知るにはあまりにも緑色です。

4

2 に答える 2

6

jQuery UIがどのようにそれを行うのかわかりませんが（ソースを確認する必要があります）、これを行う方法は次のとおりですhttps://gist.github.com/elclanrs/5668357

このアプローチを使用する利点は、クロージャーを使用して、プロトタイプではなくすべてのメソッドをプライベートに保つことです。この場合はモジュール パターンです。

編集：ああ、わかりました。これが私がそれを機能させる方法です。これを「Advanced jQuery Boilerplate」と呼んでいます。メソッドをプロトタイプに追加しましたが、それらを外部に保持しても実際には違いはないと思います。メソッド内でメソッドを呼び出すのが簡単になりますthis.method()。

(function($) {

  var _pluginName = 'myplugin'
    , _defaults = {

      };

  function Plugin(el, options) {
    this.opts = $.extend({}, _defaults, options);
    this.el = el;
    this._init();
  }

  Plugin.prototype = {
    _init: function() {
      return this;
    },

    method: function(str) {
      console.log(str);
      return this;
    }
  };

  Plugin.prototype[_pluginName] = function(method) {
    if (!method) return this._init();
    try { return this[method].apply(this, [].slice.call(arguments, 1)); }
    catch(e) {} finally { return this; }
  };

  $.fn[_pluginName] = function() {
    var args = arguments;

    return this.each(function() {
      var instance = $.data(this, 'plugin_'+ _pluginName);

      if (typeof args[0] == 'object') {
        return $.data(this, 'plugin_'+ _pluginName, new Plugin(this, args[0]));
      }
      return instance[_pluginName].apply(instance, args);
    });
  };

}(jQuery));

今、私は2つのdivを持っています:

<div></div>
<div id="mydiv"></div>

そして、次のようなプラグインを使用できます。

$('div').dialog({ n: 69 }); // initialize both divs

console.log($('#mydiv').dialog('method', 'hello world'));
//=^ prints "hello world" and returns instance

console.log($('#mydiv').data('plugin_dialog').opts.n); //=> 69

この情報は要素に添付されているため、基本的にプラグインのインスタンスを保存しdataてオプションを復元できるようにします。jQuery Boilerplateの仕組みに似ています。

于 2013-05-29T05:38:53.300 に答える
5

これを「連鎖パターン」と呼びます。基本的な考え方は、オブジェクトメソッドが構築されたインスタンスを返すということです。単純化された例を見てください:

function Dialog (){
    this.open = function(){
        console.log('open dialog');
        return this;
    }

    this.close = function(){
        console.log('close dialog');
        return this;
    }

}

var d = new Dialog();
d.open().close();

すべてのメソッドで「return this」ステートメントに注意してください。

于 2013-05-29T05:32:40.980 に答える