Monkey Patch Chosen jQuery 库 - Chosen 始终未定义

Question

我正在尝试修补 Chosen jQuery 库中的两个函数，但是，无论我尝试引用什么原始函数，控制台返回的 Chosen 都是未定义的。

这是我的代码。

        function(){
        var _no_results = window.jQuery.fn.chosen.prototype.no_results;
        var _no_results_clear = window.jQuery.fn.chosen.prototype.no_results_clear;

        window.jQuery.fn.chosen.prototype.no_results = function (terms) {
            console.log('nr');
            var no_results_html;
            no_results_html = $('<li class="no-results">' + this.results_none_found + ' "<span></span>"</li>');
            no_results_html.find("span").first().html(terms);
            if (this.options.no_results_callback) {
                this.options.no_results_callback(no_results_html, terms);
            }
            return this.search_results.append(no_results_html);
            //return _no_results.apply(terms);
        }


        window.jQuery.fn.chosen.prototype.no_results_clear = function (terms) {
            console.log('nrc');
            var no_results_html;
            no_results_html = $('<li class="no-results">' + this.results_none_found + ' "<span></span>"</li>');
            no_results_html.find("span").first().html(terms);
            if (this.options.no_results_clear_callback) {
                this.options.no_results_clear_callback(no_results_html, terms);
            }
            return this.search_results.find(".no-results").remove();
            //return _no_results_clear.apply(terms);
        }
    }

有什么想法吗？

Answer 1

似乎所选库的旧版本（例如 v0.9.14）曾经公开 Chosen 和 AbstractChosen，但最新版本（截至 2019 年 3 月 25 日的 v1.8.7）都没有公开。相反，当前版本利用.data(key, value) jQuery method 在chosen 键下存储对Chosen 对象的引用。您可以尝试将其与初始化的选择列表和 Object.getPrototypeOf JavaScript method 结合使用以覆盖 Chosen 或 AbstractChosen 函数。

例如，假设您页面上的某处有：

<select id="futureChosenSelect" ... >
  <option value="HiMom">Hi Mom!</option>
  ...
</select>

你已经配置了 <select> 并选择了：

$('#futureChosenSelect').chosen();

您应该能够使用以下内容覆盖函数：

Object.getPrototypeOf( $('#futureChosenSelect').data('chosen') ).no_results = function(terms) { ... };

Answer 2

不要复制原型，这不是 jQuery 的工作方式。在内部，它将插件和变量存储在映射中（名称-> 函数）。这应该有效：

 var _no_results = window.jQuery.jQuery.fn['chosen'].no_results;
 var _no_results_clear = window.jQuery.fn['chosen'].no_results_clear;

 window.jQuery.fn['chosen'].no_results = function (terms) { 
    ...
    _no_results.apply(this, terms);
 }

 window.jQuery.fn['chosen'].no_results_clear = function (terms) { 
    ...
    _no_results_clear.apply(this, terms);
 }

我曾经这样做是为了替换选择器链内部日志的 jQuery 内部函数。 Check here how it works (github)