11

如果我想通过替换其中一个函数来调整 jQuery UI 对象的某些功能,我将如何去做呢?

示例:假设我想修改 jQuery 自动完成小部件呈现建议的方式。自动完成对象上有一个方法,如下所示:

_renderItem: function( ul, item) {
    return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( "<a>" + item.label + "</a>" )
        .appendTo( ul );
},

我可以换这个吗?

我认为这可能被称为Monkey Patching

如何?我会使用什么语法?

4

2 回答 2

19

我不了解 jQuery UI,但总的来说,这是您重新定义函数的方式:

(function() {
   var _oldFunc = _renderItem;

   _renderItem = function(ul,item) {
      // do your thing
      // and optionally call the original function:
      return _oldFunc(ul,item);
   }
})();

将 this 包装在匿名函数中的原因是为了创建一个闭包来存储原始函数。这样它就永远不会干扰全局变量。


编辑
要对 jQuery UI 小部件上的 fn 执行此操作,请使用以下语法:

仅供参考:获取功能的方式是这样的:

function monkeyPatchAutocomplete() { 

  // don't really need this, but in case I did, I could store it and chain 
  var oldFn = $.ui.autocomplete.prototype._renderItem; 

  $.ui.autocomplete.prototype._renderItem = function( ul, item) { 
     // whatever
  }; 
} 
于 2010-03-12T22:31:03.210 回答
1

我知道这是一个老问题,但我只需要修复旧项目上的一些错误,并且遇到这种补丁的问题。

最好通过 options 对象使该功能可用,然后将您的特定逻辑放在那里。

修补:

(function monkeyPatchJQueryAutocomplete($) {

  /**
   * Proxies a private
   * prototype method to the
   * options Object
   *
   * @param  {Object} obj
   * @param  {String} funcName
   */
  function proxyPrivateMethodToOptions(obj, funcName) {
    var __super = obj.prototype[funcName];
    obj.prototype[funcName] = function() {
      if (this.options[funcName]) {
        return this.options[funcName].apply(this, arguments);
      }
      return __super.apply(this, arguments);
    };
  }

  // Make the private _renderItem
  // method available through the options Object
  proxyPrivateMethodToOptions($.ui.autocomplete, '_renderItem');

  // We can do this for other methods as well:
  proxyPrivateMethodToOptions($.ui.autocomplete, '_renderMenu');

}($));

用法示例:

$('.some-input').autocomplete({
  _renderItem: function(ul, item) {
    console.log('here we can reference the old func via: ', __super);
    return $("<li>")
      .append($("<a>").text(item.label))
      .appendTo(ul);
  }
});
于 2015-01-16T08:59:42.260 回答