Question

jQuery函数.on的签名是

$（elements）.on（events [，selector] [，data]，handler）;

其中selector和data是可选的。因此，函数调用

$（elements）.on（var1，var2，var3）;

可以var2解释为selector或data。有歧义吗？

更一般地说，如何处理任何其他jQuery函数的可选参数的歧义？

Answer 1

如果只提供了一个选择器和数据参数，并且值是一个字符串，则假定它是一个选择器。

来自jQuery doco for .on()：

data参数可以是任何类型，但如果使用了字符串，则必须提供选择器或将其显式传递为null，以便数据不会被误认为是选择器。最佳做法是使用对象（map），以便可以将多个值作为属性传递。

类似的原则适用于带有可选参数的其他jQuery方法。

Answer 2

Selector是一个字符串，数据是一个对象。测试应该是这样的。

if (typeof var2 === 'string') {
   // var2 is selector
} else {
   // var2 is data
}

编辑，来自https://github.com/jquery/jquery/blob/master/src/event.js

的实际jQuery源代码

on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
    var origFn, type;

    // Types can be a map of types/handlers
    if ( typeof types === "object" ) {
        // ( types-Object, selector, data )
        if ( typeof selector !== "string" ) {
            // ( types-Object, data )
            data = selector;
            selector = undefined;
        }
        for ( type in types ) {
            this.on( type, selector, data, types[ type ], one );
        }
        return this;
    }

Answer 3

对于您提供的示例，selector和data参数需要不同类型的对象。 selector参数应该是String，data应该是Object。可以使用typeof运算符区分它们。例如：

if(typeof selector === "string") {
    //We know that the 2nd argument is actually a selector string
}

请注意，如果您确实需要将on作为data参数传递给selector，则必须同时指定null参数（即使您只是传入{{ 1}}）。

Answer 4

这里有一些jquery源代码。基本上，他们正在查看参数的类型，并根据需要将它们分配给其他参数。例如，如果参数列表中“selector”位置的项不是字符串，则它们假定它是“data”参数，依此类推。

on: function( types, selector, data, fn, /*INTERNAL*/ one ) {
    var origFn, type;

    // Types can be a map of types/handlers
    if ( typeof types === "object" ) {
        // ( types-Object, selector, data )
        if ( typeof selector !== "string" ) {
            // ( types-Object, data )
            data = selector;
            selector = undefined;
        }
        for ( type in types ) {
            this.on( type, selector, data, types[ type ], one );
        }
        return this;
    }

    if ( data == null && fn == null ) {
        // ( types, fn )
        fn = selector;
        data = selector = undefined;
    } else if ( fn == null ) {
        if ( typeof selector === "string" ) {
            // ( types, selector, fn )
            fn = data;
            data = undefined;
        } else {
            // ( types, data, fn )
            fn = data;
            data = selector;
            selector = undefined;
        }
    }

Answer 5

我对.on（）也有自己的疑虑......

this的上下文始终非常清楚，委托与绑定（或任何绑定的快捷方式）。现在使用on，上下文可能会突然改变......

例如，

//This is pretty clear, you now want to turn the paragraph tag red when clicked
$('p').on('click', function () {
   $(this).css('color', 'red');
});

//Woah... so the context of `this` just changed by a single argument
//this now refers to all anchor tags that are descendants of paragraph tags.
$('p').on('click', 'a', function () {
   $(this).css('color', 'red');
});

这是第一个通过传递不同的参数来改变this的上下文的jQuery方法。

快速事实 - delegate - （在1.4.2中）是第一个不使用选择器来表示回调函数的上下文的方法。但至少它仍然很清楚......当你看到.delegate（）时，你就会明白发生了什么。

解释可选参数时的歧义

5 个答案: