Chức năng không gian tên trong jQuery

Question

Sự khác nhau giữa hai đoạn mã này là gì? Cả hai đều hoạt động hoàn hảo, vậy tại sao sử dụng .dropdown.data-api trong một hàm? Tôi đọc về không gian tên trên internet, nhưng tôi không rõ về điều đó. Bất cứ ai có thể cho tôi biết việc sử dụng các chức năng không gian tên là gì?

$('html').on('click.dropdown.data-api', 
    function() { 
    $el.parent().removeClass('open') 
    }) 
} 

$('html').on('click', 
    function() { 
    $el.parent().removeClass('open') 
    }) 
} 

Answer 1

Đặt tên cho sự kiện cho phép bạn nhắm mục tiêu một sự kiện cụ thể bạn muốn, giả sử, hủy liên kết hoặc kích hoạt sự kiện đó.

Hãy tưởng tượng bạn có hai sự kiện cùng loại được liên kết với cùng một phần tử.

$('.something').on('click', function() { /* do something */ }); 
$('.something').on('click', function() { /* do something else */ }); 

Vì chúng tôi đã không đặt tên cho một trong hai sự kiện, hiện tại rất khó để hủy liên kết hoặc kích hoạt một sự kiện nhưng không phải là sự kiện khác. Bây giờ hãy xem xét:

$('.something').on('click.one', function() { /* do something */ }); 
$('.something').on('click.two', function() { /* do something else */ }); 

Bởi vì thời gian này mỗi sự kiện có không gian tên riêng, giờ đây chúng tôi có thể kích hoạt hoặc hủy liên kết một hoặc khác, để người khác bị ảnh hưởng.

$('.something').off('click.one'); //unbind the 'one' click event 
$('.something').trigger('click.two'); //simulate the 'two' click event 

[EDIT - như @jfrej đúng chỉ ra dưới đây, không gian tên có nghĩa là đôi khi bạn thậm chí không cần phải tham khảo tên loại sự kiện. Vì vậy, nếu bạn có sự kiện di chuột qua và nhấp chuột cả trên một không gian tên duy nhất, bạn có thể hủy liên kết cả hai với off('.namespace').]