Question

我对如何实现所使用的JavaScript模式感兴趣，例如，在jQuery UI对话框中：

$.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中太绿了，无法了解正在发生的事情。

Answer 1

我不确定jQuery UI是如何做到的（你必须查看源代码），但这是一种方法https://gist.github.com/elclanrs/5668357

使用这种方法的好处是你可以通过使用闭包来保持所有方法的私有而不是原型。在这种情况下的模块模式。

编辑： Aight，明白了。这就是我开始工作的方式。我称之为“高级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));

现在我有两个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的工作方式类似。

Answer 2

这称为“链接模式”。基本思想是对象方法返回构造实例，看简化示例：

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

注意'在每种方法中都返回此'语句。

向我澄清这个javascript模式

2 个答案: