Tìm kiếm trang web

javascript - Nếu nhiều phiên bản của các tệp JS (Bootstrap) được tham chiếu trong HTML, phiên bản nào được ưu tiên?

HTML tải các thư viện của nó từ đầu trang đến cuối trang đúng không? Nếu bạn có một phiên bản cũ hơn của một framework/thư viện (ví dụ: jQuery hoặc Bootstrap) được tham chiếu bên dưới phiên bản mới hơn thì sao?

Làm thế nào để hai phiên bản của Bootstrap được tham chiếu trong HTML ưu tiên?

  1. Thư viện cuối cùng được nạp có chiếm ưu tiên không?

  2. Phiên bản JS mới nhất có được ưu tiên không?

  3. Hai phiên bản JS có tải dồn hay không?

Điều này có áp dụng cho các thư viện khác như CSS không?

Xin lỗi nếu tôi sử dụng sai các thuật ngữ web ở đây. Tôi vẫn còn khá mới trong phát triển web và cách các thành phần khác nhau hoạt động cùng nhau. Cảm ơn!

  • Bootstrap 3.0.2
  • Phiên bản mới Bootstrap 3.3.7

Câu trả lời #1

Nếu chúng là các tệp khác nhau (.js và .min.js) thì cả hai sẽ được tải tích lũy. Nếu chúng định nghĩa cùng các biến JavaScript, trong cùng một phạm vi, thư viện xuất hiện sau sẽ/có thể thắng. Điều này xảy ra vì các biến được định nghĩa trong thư viện đầu tiên sẽ được gán lại giá trị mới từ thư viện thứ hai. Trong ví dụ của bạn, việc bao gồm cả phiên bản nén và không nén của bootstrap.js trên trang của bạn, bất kỳ phiên bản nào được bao gồm cuối cùng sẽ thắng.

Điều này cũng sẽ xảy ra với CSS nếu hai thư viện sử dụng cùng một bộ chọn/tên lớp chính xác với cùng mức độ đặc hiệu. Vì vậy, một lần nữa với ví dụ của bạn về việc bao gồm cả hai phiên bản CSS của Bootstrap, phiên bản thứ hai sẽ được áp dụng. Vì chúng là hai phiên bản khác nhau, có thể sẽ có một chút ảnh hưởng chồng lấn từ thư viện được tham chiếu đầu tiên sang thư viện thứ hai, vì vậy bạn có thể nhận thấy một số hiệu ứng phụ kỳ lạ.

Thông tin cho bạn: Có lẽ bạn đã biết điều này, nhưng một người đọc khác có thể sẽ bị cám dỗ để bao gồm cả hai. Không nên thực hành việc bao gồm cả hai bộ tệp này vì nó có thể dẫn đến kết quả không mong muốn, làm tăng trọng lượng trang và số lượng yêu cầu gửi đến máy chủ, điều này ảnh hưởng đến thời gian tải trang của bạn và cuối cùng là trải nghiệm của người dùng.

Câu trả lời #2

Nhiều phiên bản JavaScript có thể cùng tồn tại trên cùng một trang.

Điều này có thể xảy ra trên các trang sử dụng các framework khác nhau được hỗ trợ bằng các phiên bản jQuery khác nhau. Hầu hết các nhà phát triển sẽ cố gắng tránh sử dụng nhiều phiên bản của các thư viện, tuy nhiên nếu sửa một trang của khách hàng đã được viết bằng nhiều phiên bản, bạn có thể không có sự tiện nghi đó.

Để trả lời trực tiếp câu hỏi của bạn, hàm cuối cùng trong một thư viện JavaScript sẽ được ưu tiên với điều kiện chúng được định nghĩa hoàn toàn giống nhau, nếu không hai thư viện về cơ bản sẽ hợp nhất. Nếu một hàm thay đổi từ hai sang ba đối số, cả hai sẽ vẫn hoạt động và sẽ hành xử như thể chúng được nạp chồng theo thiết kế.

Có những cách để tham chiếu đến phiên bản của tệp JS bằng cách sử dụng một biến làm bí danh như ví dụ dưới đây, cũng như một số thư viện hỗ trợ nhiều thành phần như Adobe AEM thông qua Thư mục Thư viện phía Client và tiền tố các thành phần với một bí danh nhưng nó được tích hợp vào toàn bộ giải pháp.

Đây là một ví dụ cho JQuery

<script src='jquery-1.3.2.js'></script>
<script>
var jq132 = jQuery.noConflict();
</script>
<script src='jquery-1.4.2.js'></script>
<script>
var jq142 = jQuery.noConflict();
</script>

Mỗi framework có thể hoạt động khác nhau khi nhiều phiên bản được tải, đó là lý do tại sao các nhà phát triển có lẽ cố gắng tránh điều đó nếu có thể.

Với Cascading Style Sheets (CSS) kiểu cuối cùng được ưu tiên

Nếu bạn cần ghi đè một kiểu của bootstrap thì nó nên được đặt ở cuối cùng. Điều này giả định mức độ cụ thể chính xác như một quy tắc với độ cụ thể cao hơn sẽ ưu tiên hơn một quy tắc chung hơn bất kể nó được tải ở đâu.