Làm cách nào để chạy các phiên bản jQuery khác nhau trên cùng một trang?

Question

Công ty của tôi đã mua sản phẩm hiển thị điều khiển ASP.NET trên trang. Điều khiển này sử dụng jQuery 1.2.3 và thêm một thẻ script vào trang để tham khảo nó. Các nhà phát triển của bộ điều khiển sẽ không hỗ trợ sử dụng điều khiển nếu nó được sửa đổi theo bất kỳ cách nào (bao gồm sửa đổi để tham khảo một phiên bản khác của jQuery).

Tôi sắp bắt đầu phát triển kiểm soát của riêng mình và muốn sử dụng các tính năng và cải tiến tốc độ của jQuery 1.3. Cả hai điều khiển này sẽ cần phải tồn tại trên cùng một trang.

Làm cách nào tôi có thể cho phép kiểm soát được mua sử dụng jQuery 1.2.3 và phát triển tùy chỉnh mới để sử dụng jQuery 1.3? Ngoài ra tò mò, nếu chúng ta sử dụng một điều khiển bổ sung cần thiết để tham khảo thêm một phiên bản jQuery khác thì sao?

Answer 1

Bạn có thể đạt được điều này bằng cách chạy phiên bản jQuery của bạn trong no-conflict mode. Chế độ "Không xung đột" là giải pháp điển hình để jQuery làm việc trên một trang với các khung công tác khác như prototype và cũng có thể được sử dụng ở đây vì nó cơ bản không gian tên mỗi phiên bản jQuery mà bạn tải.

<script src="jQuery1.3.js"></script> 
<script> 
    jq13 = jQuery.noConflict(true); 
</script> 

<!-- original author's jquery version --> 
<script src="jQuery1.2.3.js"></script> 

Sự thay đổi này sẽ có nghĩa là bất kỳ thứ jQuery bạn muốn sử dụng sẽ cần phải được gọi bằng jq13 hơn $, ví dụ

jq13("#id").hide(); 

Đây không phải là một tình huống lý tưởng để có hai phiên bản chạy trên cùng một trang, nhưng phương pháp trên sẽ cho phép bạn sử dụng hai phiên bản khác nhau cùng một lúc.

Ngoài sự tò mò, điều gì sẽ xảy ra nếu chúng tôi sử dụng điều khiển bổ sung cần tham khảo thêm một phiên bản jQuery khác?

Nếu bạn cần phải thêm một phiên bản khác của jQuery, bạn có thể mở rộng trên trên:

<script src="jQuery1.3.js"></script> 
<script> 
    jq13 = jQuery.noConflict(true); 
</script> 
<script src="jQuery1.3.1.js"></script> 
<script> 
    jq131 = jQuery.noConflict(true); 
</script> 

<!-- original author's jquery version --> 
<script src="jQuery1.2.3.js"></script> 

Các biến jq13 và jq131 mỗi sẽ được sử dụng cho các tính năng phiên bản cụ thể mà bạn yêu cầu.

Điều quan trọng là jQuery được nhà phát triển ban đầu sử dụng được tải lần cuối - nhà phát triển ban đầu có khả năng đã viết mã của họ theo giả định rằng $() sẽ sử dụng phiên bản jQuery của họ. Nếu bạn tải phiên bản khác sau phiên bản của chúng, thì $ sẽ bị "tóm gọn" bởi phiên bản cuối cùng bạn tải, điều này có nghĩa là mã của nhà phát triển ban đầu đang chạy trên phiên bản thư viện mới nhất, hiển thị noConflicts hơi dư thừa!

Answer 2

Dường như đơn đặt hàng không quan trọng ... ví dụ: http://gist.github.com/136686. Đầu ra của bàn điều khiển nằm ở trên cùng và tất cả các phiên bản dường như ở đúng vị trí.

Answer 3

Như đã nói ConroyP bạn có thể làm điều này với jQuery.noConflict nhưng đừng quên var khi khai báo biến. Như thế này.

<script src="jQuery1.3.js"></script> 
<script> 
    var jq13 = jQuery.noConflict(true); 
</script> 

<!-- original author's jquery version --> 
<script src="jQuery1.2.3.js"></script> 

Bạn có thể kết nối tất cả $ 's đến jq13 bằng cách thêm (jq13) sau hàm }).như thế này

(function($) { 
... 
})(jq13); 

Answer 4

Trong phiên bản thứ hai khai báo biến là $ .noConflict (true). Và sử dụng biến được khai báo thay cho $ được sử dụng trong mã jquery. Vui lòng kiểm tra mã bên dưới: Mã này được sử dụng sau khi tuyên bố phiên bản thứ hai của jquery:

<script type="text/javascript"> 
var jQuery_1_9_1 = $.noConflict(true); function pageLoad(sender, args) { 

     var $ddl = jQuery_1_9_1("select[name$=drpClassCode]"); 
     var $ddl1 = jQuery_1_9_1("select[name$=drpSubContractors]"); 
     $ddl.select2(); 
     $ddl1.select2(); 

     $ddl.bind("change keyup", function() { 
      $ddl.fadeIn("slow"); 


     }); 

     $ddl.bind("change keyup", function() { 
      $ddl1.fadeIn("slow"); 


     }); 
    } 

Answer 5

làm cho nó sai để làm việc

var jq16 = $.noConflict(false);