Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Hướng dẫn jquery tránh xung đột với thư viện khác

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP - ASP' được đăng bởi vnfit.com, 24/2/15.

Lượt xem: 6,524

  1. vnfit.com Banned

    Tránh xung đột với thư viện khác (Avoiding Conflicts with Other Libraries )

    [​IMG]

    Về cơ bản thì jquery là một thư viện cái này ai cũng hiểu và gần như tất cả mọi cái của nó đều là các plugins được nằm trong jQuery namespace. Như một quy tắc thông thường khi mọi cái được viết chung thì nó rất dễ bị xung đột. Một số thư viện khác nhau sẽ xung đột với nhau. Vì vậy bài viết dưới đây sẽ giúp bạn tránh các xung đột không cần thiết đó.

    Mặc định thì bạn hay dùng $() hoặc $ nhưng nó là dạng viết gọn của jquery() mà thôi. Tuy nhiên xảy ra trường hợp nếu có một thư viện nào đó mà cũng dùng $() thì điều đó sẽ xảy ra lỗi xung đột ngay. Lúc đó thì có mà cực đau đầu không hiểu lí do vì sao.

    Thêm jQuery.noConflict() tránh bị xung đột
    Như ví dụ dưới đây bạn để ý chỗ mình bôi màu nhé.

    <!-- Putting jQuery into no-conflict mode. -->
    <script src="prototype.js"></script>
    <script src=" jquery.js"></script>
    <script>

    var $j = jQuery.noConflict();
    // $j is now an alias to the jQuery function; creating the new alias is optional.

    $j(document).ready(function() {
    $j( "div" ).hide();
    });

    // The $ variable now has the prototype meaning, which is a shortcut for
    // document.getElementById(). mainDiv below is a DOM element, not a jQuery object.
    window.onload = function() {
    var mainDiv = $( "main" );
    }

    </script>
    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:

    <!-- Another way to put jQuery into no-conflict mode. -->
    <script src="prototype.js"></script>
    <script src=" jquery.js"></script>
    <script>

    jQuery.noConflict();

    jQuery( document ).ready(function( $ ) {
    // You can use the locally-scoped $ in here as an alias to jQuery.
    $( "div" ).hide();
    });

    // The $ variable in the global scope has the prototype.js meaning.
    window.onload = function(){
    var mainDiv = $( "main" );
    }

    </script>
    Có vẻ như là code nhìn có vẻ hay hơn ví dụ 1
    Thêm thư viện jQuery trước các thư viện khác
    Như ví dụ dưới đây bạn sẽ thêm thư viện jquery vào trước prototype.js nhưng hãy sử dụng Jquery() thay vì sử dụng $() để tránh xung đột vẫn có thể xảy ra

    <!-- Loading jQuery before other libraries. -->
    <script src=" jquery.js"></script>
    <script src="prototype.js"></script>
    <script>

    // Use full jQuery function name to reference jQuery.
    jQuery( document ).ready(function() {
    jQuery( "div" ).hide();
    });

    // Use the $ variable as defined in prototype.js
    window.onload = function() {
    var mainDiv = $( "main" );
    };

    </script>
    Tổng kết:
    Với những cách đươc nêu ra ở trên rất mong rằng các bạn sẽ tránh được các xung đột cơ bản khi sử dụng nhiều thư viện javascript cùng một lúc để đạt được cái bạn mong muốn.

    Nguồn: vnfit.com/hoc-jquery-tu-co-ban-den-nang-cao-p3-tranh-xung-dot-voi-thu-vien-khac/

    ...
Từ khóa:

Ủng hộ diễn đàn