javascript - jQuery attr 方法可以设置点击处理程序和内部文本

Question

阅读 jQueryUI 对话框代码，我发现，jQuery .attr()方法有一些未记录的行为:

<button id="btn1">1</button>
<button id="btn2">2</button>

$(function() {
    var props = {
        text: 'Click it!',
        click: function () {
            console.log('Clicked btn:', this);
        }
    };

    $('#btn1').attr(props, true);    // Changes #btn1 inner text to 'Click it!' 
                                     // and adds click handler
    $('#btn2').attr(props);          // Leaves #btn2 inner text as it is and fires 
                                     // click function on document ready
});

• 你能解释一下它是如何工作的吗？为什么我应该将 true 设置为之后的第二个参数属性值对映射？
• 我可以在我的项目中安全地使用此功能吗？

Answer 1

我在这里有点猜测，因为我不熟悉 jQuery 源代码。 jQuery.attr调用jQuery.access，jQuery.access函数上面的注释是这样的:

// Multifunctional method to get and set values of a collection
// The value/s can optionally be executed if it's a function

经过进一步调查，text() 函数还调用了 jQuery.access:

    attr: function( name, value ) {
        return jQuery.access( this, jQuery.attr, name, value, arguments.length > 1 );
    },
    .........
    text: function( value ) {
        return jQuery.access( this, function( value ) {
        ......
    },

您正在使用 attr 来设置文本和事件处理程序，这不是 attr 的用途。然而，它们似乎都使用相同的函数来完成工作，因此使用未记录的参数只是偶然地给你预期的行为。

我认为依赖未记录的行为来完成您在这里尝试做的事情是不可靠的，因为 jQuery 的任何 future 升级都可能破坏您的代码。