4

我对如何实现 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 中太绿了，无法了解正在发生的事情。

4

2 回答 2

6

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

使用这种方法的优点是您可以通过使用闭包将所有方法保留在原型中而不是在原型中；在这种情况下是一个模块模式。

编辑：好吧，明白了。这就是我让它工作的方式。我称之为“高级 jQuery 样板”。我将方法添加到原型中，我认为将它们保留在外面并没有真正的区别，并且可以更容易地在方法中调用方法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的工作方式。

于 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 回答