jQuery cœur - phương pháp noConflict()

Hướng dẫn tham khảo lõi jQuery

Mô hình

Sử dụng phương pháp noConflict() để đặt tên mới cho biến jQuery:

var jq=$.noConflict();

Thử nghiệm trực tiếp

Định nghĩa và cách sử dụng

Phương pháp noConflict() chuyển quyền kiểm soát biến $ của jQuery.

Phương pháp này giải phóng quyền kiểm soát của jQuery đối với biến $.

Phương pháp này cũng có thể được sử dụng để đặt tên tùy chỉnh mới cho biến jQuery.

Lưu ý:Rất hữu ích khi một thư viện JavaScript khác sử dụng $ cho hàm của mình.

Cú pháp

jQuery.noConflict(removeAll)
Tham số Mô tả
removeAll Giá trị boolean. Chỉ ra liệu có cho phép hoàn toàn khôi phục biến jQuery hay không

Giải thích

Nhiều thư viện JavaScript sử dụng $ làm tên hàm hoặc biến, jQuery cũng vậy. Trong jQuery, $ chỉ là tên tắt của jQuery, vì vậy ngay cả khi không sử dụng $ cũng đảm bảo tất cả các chức năng. Nếu chúng ta cần sử dụng thư viện JavaScript khác ngoài jQuery, chúng ta có thể gọi phương pháp $.noConflict() để trả lại quyền kiểm soát cho thư viện đó:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  // Mã sử dụng $ của thư viện khác
</script>

Có thể kết hợp với phương pháp .ready() để đặt tên tắt cho đối tượng jQuery, kỹ thuật này rất hiệu quả:

<script type="text/javascript" src="other_lib.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
  $.noConflict();
  jQuery(document).ready(function($) {
    // Mã sử dụng $ của jQuery
  });
  // Mã sử dụng $ của thư viện khác
</script>

Ngoài ra, bằng cách truyền tham số true vào phương pháp này, chúng ta có thể trả lại quyền kiểm soát của $ và jQuery cho thư viện ban đầu. Hãy suy nghĩ kỹ trước khi sử dụng!

Đây là phiên bản cực đoan hơn so với phương pháp noConflict đơn giản, vì nó sẽ hoàn toàn định nghĩa lại jQuery. Thường được sử dụng trong các tình huống cực đoan, chẳng hạn như bạn muốn chèn jQuery vào một môi trường xung đột cao. Lưu ý: Sau khi gọi phương pháp này, rất có thể dẫn đến lỗi plugin.

Mô hình

Ví dụ 1

Định tuyến lại đối tượng mà $ tham chiếu về đối tượng ban đầu:

jQuery.noConflict();
jQuery("div p").hide(); // Sử dụng jQuery
$("content").style.display = "none"; // Sử dụng $ của thư viện khác

Ví dụ 2

Khôi phục sử dụng biệt danh $, sau đó tạo và thực hiện một hàm, trong phạm vi hàm này, $ vẫn là biệt danh của jQuery. Đối tượng $ ban đầu là không hợp lệ. Hàm này rất hiệu quả đối với hầu hết các plugin không phụ thuộc vào các thư viện khác:

jQuery.noConflict();
(function($) { 
  $(function() {
    // Sử dụng $ làm biệt danh của jQuery
  });
})(jQuery);
... // Mã của các thư viện khác sử dụng $ làm biệt danh

Ví dụ 3

Có thể kết hợp jQuery.noConflict() với ready viết tắt để làm cho mã gọn hơn:

jQuery.noConflict()(function() {
    // Sử dụng mã jQuery
});
... // Mã của các thư viện khác sử dụng $ làm biệt danh

Ví dụ 4

Tạo một biệt danh mới để sử dụng jQuery đối tượng trong thư viện tiếp theo:

var j = jQuery.noConflict();
j("div p").hide(); // Mã dựa trên jQuery
$("content").style.display = "none"; // Mã $ dựa trên thư viện khác

Ví dụ 5

Chuyển hoàn toàn jQuery vào một không gian tên mới:

var dom = {};
dom.query = jQuery.noConflict(true);

Kết quả:

dom.query("div p").hide(); // Bản mã jQuery mới
$("content").style.display = "none"; // Mã của thư viện $ khác
jQuery("div > p").hide(); // Bản mã jQuery khác

Hướng dẫn tham khảo lõi jQuery