javascript - Duck Punching/Monkey Patching 破坏了 Tablesorter

Question

我有一个文本框，其中输入了逗号分隔/分隔的值，我必须确保其中的条目是唯一的。解决了使用 Paul Irish's Duck Punching example #2并将其绑定(bind)到该文本框的 onblur。

输入到文本框中的值被分解到一个表中。由于表格可能会变得很长，我找到了 Mottie's Tablesorter出色地工作。

问题是，Duck Punching 代码破坏了 Tablesorter。 Tablesorter 的样式传递得很好，但表格实际上并没有排序。但是，当我注释掉 Duck Punching 代码时，Tablesorter 奇迹般地起作用了。

我的编码技能还不够，我无法弄清楚为什么两者会发生冲突。如有任何帮助，我们将不胜感激。

我没有修改 Tablesorter 代码或向其中添加任何特殊的排序元素……现在只是按照非常基本的示例进行操作。这是 Duck Punching 代码，我只是对其进行了修改，以包含我需要具有唯一条目的文本框的 var。

 function ValidateTextBox1()
{    
(function($){
var arr = document.getElementById("TextBox1").value.split(',');
    var _old = $.unique;

    $.unique = function(arr){

        // do the default behavior only if we got an array of elements
        if (!!arr[0].nodeType){
            return _old.apply(this,arguments);
        } else {
            // reduce the array to contain no dupes via grep/inArray
            return $.grep(arr,function(v,k){
                return $.inArray(v,arr) === k;
            });
        }
    };
})(jQuery);

 }

上面的函数在一个单独的 js 文件中，通过 onblur 为 TextBox1 调用。

然后，我有一个运行以下命令的按钮:

function GenerateTable()
{  

var Entry1 = document.getElementById("TextBox1").value
var Entry2 = document.getElementById("TextBox2").value
var content = "<table id=myTable class=tablesorter ><thead><tr><th>Entry 1 Values</th><th>Entry 2 Value</th></tr></thead><tbody>"
var lines = Entry1.split(","),
i;
for (i = 0; i < lines.length; i++)
    content += "<tr><td>" + (Entry1.split(",")[i]) + "</td><td>" + Entry2 + "</td></tr>";
    content += "</tbody></table>"


$("#here_table").append(content);
$(function(){
  $("#myTable").tablesorter({
      theme: 'default'
 });
});

}

该函数将在特定 DIV 中生成/附加表格。

如果我留在 TextBox1 的验证代码中，该表将生成但不可排序(尽管它仍然设法拉动主题)。

如果我删除验证码，表格将生成并可排序。

Answer 1

上面的 validateText 框函数将无法按预期工作。在这种情况下，甚至不需要“打鸭子”。

这是我修复脚本的方法 ( demo ):

HTML

<textarea id="textbox1">6,1,7,5,3,4,3,2,4</textarea><br>
<textarea id="textbox2">column 2</textarea><br>
<button>Build Table</button>
<div id="here_table"></div>

脚本(需要 jQuery 1.7+)

(function($) {

    // bind to button
    $(function () {
        $('button').on('click', function () {
            // disable button to prevent multiple updates
            $(this).prop('disabled', true);
            generateTable();
        });
    });

    function unique(arr) {
        return $.grep(arr, function (v, k) {
            return $.inArray(v, arr) === k;
        });
    }

    function generateTable() {
        var i,
            $wrap = $('#here_table'),
            // get text box value, remove unwanted
            // spaces/tabs/carriage returns & create an array
            val = $('#textbox1').val().split(/\s*,\s*/),
            // get unique values for Entry1
            entry1 = unique( val ),
            entry2 = $('#textbox2').val(),
            content = "";
        // build tbody rows
        for (i = 0; i < entry1.length; i++) {
            content += "<tr><td>" + (entry1[i] || '?') + "</td><td>" + entry2 + "</td></tr>";
        }
        // update or create table
        if ($wrap.find('table').length) {
            // table exists, just update the data
            $wrap.find('tbody').remove();
            $wrap.find('table')
                .append(content)
                .trigger('update');
        } else {
            // table doesn't exist, build it from scratch
            $wrap
                .html('<table id=myTable class=tablesorter><thead><tr>' +
                    '<th>Entry 1 Values</th>' +
                    '<th>Entry 2 Value</th>' +
                    '</tr></thead><tbody>' + content + '</tbody></table>')
                .find('table')
                .tablesorter({
                    theme: 'blue'
                });
        }
        // enable the button to allow updating the table
        $('button').prop('disabled', false);
    }

})(jQuery);

我尝试添加一些注释以更清楚地说明每个步骤的作用。请随时要求任何澄清。