Cách khắc phục lỗi xung đột jquery với adsense năm 2024

Thông thường , khi sử dụng jQuery chúng ta thường sử dụng kí tự $ ở đằng trước các hàm và biến. Tuy nhiên các thư viện khác như prototype.js, MooTools, hoặc YUI cũng sử dụng kí tự $ này. Và vì thế mà khi chúng ta sử dụng cùng một lúc các thư viện này với jQuery, thì sẽ xảy ra xung đột và phát sinh ra lỗi.

Hôm nay, mình sẽ chia sẻ cho các bạn các cách để có thể giải quyết xung đột khi sử dụng cùng một lúc jQuery và các thư việc js khác.

Cách 1 : Đặt jQuery vào chế độ No-Conflict Mode

Khi đặt jQuery vào chế độ no-conflict, bạn sẽ có thể thay thế kí tự $ ở đằng trước bằng các kí tự khác.

Putting jQuery into no-conflict mode. >

Trong đoạn code trên, kí tự $ đã được thay thế bởi $j, do đó sẽ giúp cho chúng ta tránh trùng lắp với các thư viện khác sử dụng kí tự $ ở đằng trước.

Cách 2 : Sử dụng $ như là một tham số

Nếu bạn không thích với cách 1 là thay thế dấu $ ở đằng trước, thì bạn có thể làm theo như cách sau :

Another way to put jQuery into no-conflict mode. >

Bằng cách chèn dấu $ như là một tham số vào hàm jQuery( document ).ready(), bạn sẽ tránh được xung đột giữa jQuery và các thư viện khác.

Cách 3 : Chèn khai báo jQuery đứng trước các thư viện khác.

Nếu bạn chèn jQuery trước những thư viện khác, bạn sẽ có thể sử dụng jQuery khi bạn làm việc với thư viện jQuery , nhưng kí tự $ sẽ được dùng cho các thư viện khác.

Loading jQuery before other libraries. >

Cách 4 : Sử dụng cách gọi trực tiếp

Với cách này, các bạn vẫn có thể sử dụng dấu $ như mặc định, và cũng không cần phải đặt jQuery trước các thư viện khác, chỉ đơn giản sử dụng như sau :

Using the $ inside an immediately-invoked function expression. >

Với 4 cách mà mình chia sẻ cho các bạn trong bài viết này là những cách mà mình thấy hữu hiệu và thường xuyên áp dụng khi mình cũng gặp các sự cố xung đột. Tuy nhiên sẽ còn có nhiều cách khác và nếu các bạn biết thì đừng quên chia sẻ cho mình và mọi người đều biết dưới dạng comments nhé.

Khi viết 1 chức năng nào đó trong liên quan đến javascript bạn sẽ không tránh khỏi việc xung đột code giữa jquery với các thư viện, điều này làm bạn tốn thời gian fix lỗi của bạn trong khi bạn viết hoàn toàn đúng sau đây là các cách để giải quyết việc xung đột đó.

Cách 1 : Sử dụng cách gọi trực tiếp

Với cách này, các bạn vẫn có thể sử dụng dấu $ như mặc định, và cũng không cần phải đặt jQuery trước các thư viện khác, chỉ đơn giản sử dụng như sau :

Cách 2 : Đặt jQuery vào chế độ No-Conflict Mode

Khi đặt jQuery vào chế độ no-conflict, bạn sẽ có thể thay thế kí tự $ ở đằng trước bằng các kí tự khác.

Trong đoạn code trên, kí tự $ đã được thay thế bởi $j, do đó sẽ giúp cho chúng ta tránh trùng lắp với các thư viện khác sử dụng kí tự $ ở đằng trước.

Nếu bạn cảm thẩy việc viết như trên hơi khó chịu và thấy nó không thích với mình lắm thì bạn có thể sử dụng cách thứ 2 dưới đây để tránh xung đột xảy ra:

Có vẻ như là code nhìn có vẻ hay hơn ví dụ 1

Cách 3 : Chèn khai báo jQuery đứng trước các thư viện khác.

Nếu bạn chèn jQuery trước những thư viện khác, bạn sẽ có thể sử dụng jQuery khi bạn làm việc với thư viện jQuery , nhưng kí tự $ sẽ được dùng cho các thư viện khác.

Cách 4 : Sử dụng $ như là một tham số

Nếu bạn không thích với cách 1 là thay thế dấu $ ở đằng trước, thì bạn có thể làm theo như cách sau :

Bằng cách chèn dấu $ như là một tham số vào hàm jQuery( document ).ready(), bạn sẽ tránh được xung đột giữa jQuery và các thư viện khác.

Cách 5: Kiểm tra lại danh sách các thư viện của bạn

Nguyên nhân cũng có thể xảy ra nếu bạn sử dụng jquery ở các trang CDN, nếu dùng ngôn ngữ bình dân là, các bạn ko load thư viện jquery trên host của các bạn mà load trực tiếp từ các trang cung cấp jquery, hoặc là cùng lúc load cả 2, cho dù nó là cùng phiên bản hay khác phiên bản. Ví dụ:

//Begin


//End

Cách tốt nhất là kiểm tra lại đường dẫn chính xác không, chỉ nên dùng 1 trong 2 mà thôi. Còn nếu trong trường hợp plugin A sử dụng phiên bản 1.5.1 thì ok, nhưng plugin B phải dùng phiên bản 1.71. thì sao? Đừng lo, chỉ cần bạn sử dụng đoạn code sau, bạn cứ hiểu như là nếu lần đầu sinh còn gái mà cần con trai nối dõi thì sinh lần tiếp theo vậy. Bây giờ các bạn cứ sửa lại đường dẫn đến 2 file jQuery kia thành đường dẫn website của bạn là được. Nhớ là 2 file này phải tồn tại trên host nhé.