mơ hồ trong việc giải thích các thông số tùy chọn

Question

Chữ ký của jQuery chức năng .on là

$ (yếu tố) .Trên (sự kiện [, selector] [, dữ liệu], handler);

nơi selector và data là tùy chọn. Do đó, hàm gọi

$ (phần tử) .on (var1, var2, var3);

có thể được hiểu là var2 là selector hoặc là data. Có sự mơ hồ?

Nói chung, sự mơ hồ của các tham số tùy chọn được xử lý như thế nào đối với bất kỳ hàm jQuery nào khác?

Answer 1

Nếu chỉ một trong các thông số chọn và số liệu được cung cấp và giá trị là một chuỗi nó được giả định là một chọn.

Từ jQuery doco for .on():

Đối số dữ liệu có thể là bất kỳ kiểu, nhưng nếu một chuỗi được sử dụng bộ chọn phải hoặc được cung cấp hoặc một cách rõ ràng thông qua như là null để các dữ liệu không nhầm lẫn với một selector. Thực hành tốt nhất là sử dụng một đối tượng (bản đồ) để nhiều giá trị có thể được chuyển thành thuộc tính.

Nguyên tắc tương tự áp dụng cho các phương pháp jQuery khác với thông số tùy chọn.

Answer 2

Bộ chọn là một chuỗi và dữ liệu một đối tượng. Bài kiểm tra nên là một cái gì đó như thế nào.

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

Chỉnh sửa, nguồn jQuery thực tế từ https://github.com/jquery/jquery/blob/master/src/event.js

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

Đối với ví dụ bạn đã cung cấp, các đối số selector và data mong đợi các loại đối tượng khác nhau. Đối số selector phải là Chuỗi và data phải là Đối tượng. Chúng có thể được phân biệt giữa việc sử dụng toán tử typeof. Ví dụ:

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

Lưu ý rằng nếu bạn đã cần phải vượt qua một String vào on như là đối số data, lập luận selector sẽ phải được quy định quá (ngay cả khi bạn chỉ cần vượt qua trong null).

Answer 4

Đây là một phần của nguồn jquery. Về cơ bản, họ đang xem xét các loại tham số và gán chúng cho các tham số khác nếu cần. Ví dụ: nếu mục trong vị trí "bộ chọn" trong danh sách tham số không phải là một chuỗi, chúng cho rằng nó có nghĩa là tham số "dữ liệu", v.v.

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

Tôi có khiếu nại của riêng mình với .on() cũng ...

Bối cảnh this luôn rõ ràng với đại biểu so với liên kết (hoặc bất kỳ lối tắt liên kết nào). Bây giờ với on, bối cảnh có thể thay đổi rất bất ngờ ...

Ví dụ,

//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'); 
}); 

Đây là phương pháp FIRST jQuery bao giờ hết để thay đổi bối cảnh this chỉ bằng cách thông qua một cuộc tranh luận khác nhau.

Thực tế nhanh - delegate - (trong 1.4.2) là phương pháp đầu tiên không sử dụng công cụ chọn để biểu thị ngữ cảnh cho chức năng gọi lại. Nhưng ít nhất nó vẫn còn rõ ràng ... khi bạn thấy .delegate() bạn hiểu những gì đang xảy ra.