Các thư viện JavaScript khác nhau trong một ứng dụng một trang (SPA)

Question

Tôi đang xây dựng một single-page application (SPA) dựa trên thư viện jqWidgets (nó lần lượt được xây dựng ở phía trên cùng của jQuery UI).

Bây giờ tôi muốn sử dụng một thành phần tiện ích có sẵn được xây dựng trên một khung công tác khác (khả năng là Ext JS hoặc jQuery UI).

Tôi lo ngại về các vấn đề có thể xảy ra với khả năng tương thích với CSS; Tôi đọc rất nhiều về chủ đề và tìm thấy về cái gọi là thuộc tính Phạm vi CSS. Thật không may, tôi không thấy bất kỳ văn bản gần đây về chủ đề, vì vậy tôi không chắc chắn về trạng thái của nó.

Có khả năng nào khác để đối phó với vấn đề này trong SPA không? Hoặc cách giải quyết?

Answer 1

Chỉ cần đảm bảo thêm kiểu của riêng bạn sau phong cách thư viện và sau đó bạn sẽ khá an toàn. Nếu bạn gặp phải một số lỗi lạ, chỉ cần loại bỏ các quy tắc CSS cụ thể và áp dụng chúng trên các lớp khác nhau.

Tôi tin rằng hầu hết các lỗi sẽ liên quan trực tiếp đến box-sizing, định vị, margin/padding và định kích thước.

Chúc mừng!

Answer 2

Nếu tôi hiểu chính xác và bạn quan tâm (về cơ bản số tiền quá) xung đột với CSS, sau đó bao gồm biểu định kiểu tùy chỉnh của riêng bạn sau thư viện là điểm bắt đầu tốt nhất; như @rthor đã chỉ ra.

Tuy nhiên điều này có thể không giải quyết được mọi vấn đề, hoàn toàn bởi vì nó cũng phụ thuộc vào độ đặc hiệu của bộ chọn CSS. Có một bài viết hay ở đây trên CSS specificity - cũng nên cho phép bạn chống lại bất kỳ xung đột CSS nào phát sinh hiệu quả.

Phạm vi hiện tại? Đó là một chủ đề khác, và một vấn đề khó hiểu hơn một chút - hoàn toàn là do (ngạc nhiên bất ngờ) việc triển khai trình duyệt khác nhau. Bạn có thể chỉ là một polyfill cho các trình duyệt cũ hơn nhưng đó không phải là tuyệt vời. It's purely a HTML5 feature it seemsUnless you're talking about the :scope psuedo-selector.. which is working draft for CSS Selectors 4

Tôi chắc chắn một số wiz front-end sẽ có thể cung cấp cho bạn thấp xuống cụ thể về phạm vi, như tôi mong đợi giải pháp của tôi để lại một chút mong muốn. Bạn luôn có thể tận dụng các yếu tố container (gasp .. Tôi biết, không lý tưởng.) và đảm bảo tất cả các kiểu nhắm mục tiêu cụ thể đến trẻ em của phần tử vùng chứa.

Về cơ bản ..

<div id="widgetA" class="scope"> <!-- So this is our 'scope' --> 
    <div id="bla bla">.....</div> 
</div> 

Bằng cách đảm bảo tất cả các bộ chọn CSS của bạn bắt đầu với những yếu tố container:

div#widgetA{ /* We essentially get a scoped namespace */ } 

Tuy nhiên mà đi kèm với hung hãn như phi ngữ nghĩa mark-up và quá cụ thể bộ chọn kém hiệu quả. Tuy nhiên, nó có hỗ trợ di sản và là nhanh chóng, nhưng mặc dù một chút của một hack. Nếu bạn sử dụng một cái gì đó như Sass/Less bạn thậm chí có thể nhanh chóng bọc toàn bộ thư viện tập tin CSS trong một quy tắc div.widget{ } và biên dịch nó; cho phạm vi (mặc dù với các hạn chế trên).

Cách khác, từ chế độ xem javascript - nếu bạn nhắm mục tiêu các phần tử cụ thể (và chỉ các yếu tố đó), tôi không thể thấy quá nhiều vấn đề phát sinh từ thư viện áp dụng kiểu dáng của riêng chúng - vì các thư viện không thực sự giả mạo các yếu tố khác.

Chúc may mắn

Answer 3

Gần đây tôi đã phải sử dụng phụ tùng của hai khuôn khổ khác nhau trên cùng một trang (ExtJS và jxlib, thư viện di sản phụ tùng dựa trên mootools

tôi có hai vấn đề:.

1. Đầu tiên có liên quan đến việc định cỡ hộp. ExtJs sử dụng box-sizing: border-box và jxLib box-sizing: content-box. Thêm này vào css là tất cả những gì tôi cần:

   .jxDialog * { 
       box-sizing: content-box !important; 
       -moz-box-sizing: content-box !important; 
       -ms-box-sizing: content-box !important; 
       -webkit-box-sizing: content-box !important; 
   } 
   

2. Ở bên Javascript, tôi chỉ gặp một sự cố và got the solution in this question. Với jQuery, tôi không thể biết liệu bạn có gặp vấn đề hay không.