Nhóm Bootstrap sắp hoàn thành nhiệm vụ loại bỏ hoàn toàn jQuery khỏi khung của mình để chuyển sang JavaScript. Bootstrap là một khung nguồn mở cho các giải pháp di động đáp ứng trên web Show
Nhóm gần đây đã phát hành phiên bản 4. 3 của khung với kế hoạch loại bỏ jQuery. Nhóm đã viết trong một bài đăng trên blog: “Con mèo đã ra khỏi túi — chúng tôi đang loại bỏ sự phụ thuộc lớn nhất vào phía máy khách của mình đối với JavaScript thông thường”. “Chúng tôi đã làm việc này trong một thời gian dài và có một yêu cầu kéo đang được tiến hành và sắp hoàn thành. ” Theo yêu cầu kéo, điều này đã được thực hiện từ năm 2017. Khi Bootstrap được phát hành mà không có jQuery, các nhà phát triển vẫn có thể sử dụng plugin khung nếu jQuery được phát hiện, nhóm giải thích Động thái loại bỏ jQuery đã làm dấy lên nhiều tranh cãi trong cộng đồng phát triển “Toàn bộ nỗ lực này dường như mang lại lợi ích đáng ngờ cho tôi,” một nhà phát triển nhận xét. “Trong khi trước đó là 'jQuery cho MỌI THỨ', thì bây giờ có vẻ như ngược lại. 'xóa jQuery khỏi MỌI THỨ', điều này cũng ngớ ngẩn không kém. jQuery thực hiện rất nhiều thứ hữu ích và tất cả những thứ được coi là một dự án khá gọn gàng. Nó không nên được sử dụng cho mọi thứ, nhưng dành nhiều thời gian để loại bỏ nó chỉ vì nó không còn [khuôn khổ tuyệt vời] trong tuần có vẻ như là một sự lãng phí công sức. ” Trong khi những người khác cảm thấy như jQuery tốt cho nhiều thứ hữu ích, thì bây giờ nó không được duy trì và ít được quan tâm hoặc hỗ trợ “Nó 'chậm' so với các khung khác hiện đang sử dụng Shadow Dom và có thể được thay thế bằng các tính năng có nguồn gốc từ JS - điều đó có gì không thích?” . “Ít phụ thuộc hơn, yêu cầu mạng và mã hiệu quả hơn luôn đáng để nỗ lực. ” Các dự án sắp tới khác bao gồm cải thiện các nhánh Bootstrap để phát triển và chuyển sang Hugo Thẻ bài viếtBootstrap, JavaScript, jQuery Đăng ký SDTimes Giới thiệu về Christina CardozaChristina Cardoza là Biên tập viên Tin tức của SD Times. Cô chịu trách nhiệm giám sát các tin tức hàng ngày được xuất bản trên trang web cũng như bản tin hàng tuần của công ty, Tin tức vào Thứ Hai. Cô ấy nói về Agile, DevOps, AI, machine learning, thực tế hỗn hợp và bảo mật phần mềm. Cô ấy là một mọt sách không thể phủ nhận, người yêu thích truyện tranh Marvel và Chiến tranh giữa các vì sao. Trên Theo dõi cô ấy trên Twitter tại @chriscatdoza Bootstrap 5 là một khung CSS nguồn mở và miễn phí hướng đến phát triển web giao diện người dùng đầu tiên trên thiết bị di động, đáp ứng Trong trường hợp bạn chưa biết, Bootstrap 5 alpha đã chính thức ra mắt. Nó đã loại bỏ jQuery dưới dạng phụ thuộc, đã bỏ hỗ trợ cho Internet Explorer 9 và 10, đồng thời mang đến một số cập nhật tuyệt vời cho các tệp Sass, đánh dấu và API tiện ích mới Hướng dẫn này sẽ chỉ cho bạn cách bắt đầu sử dụng VanillaJS thay vì jQuery khi xây dựng trang web bằng phiên bản Bootstrap 5 mới nhất Bắt đầuBạn sẽ cần đưa Bootstrap 5 vào dự án của mình. Có một số cách để thực hiện việc này, nhưng để đơn giản, chúng tôi sẽ đưa vào khung thông qua CDN Trước hết, hãy tạo một trang Bao gồm biểu định kiểu Sau đó bao gồm Popper. js và tệp JavaScript Bootstrap chính trước khi kết thúc thẻ Tò mò về ý nghĩa của các thuộc tính thuộc tính toàn vẹn. cho phép trình duyệt kiểm tra nguồn tệp để đảm bảo rằng mã không bao giờ được tải nếu nguồn đã bị thao túng thuộc tính chéo. xuất hiện khi yêu cầu được tải bằng 'CORS', hiện là yêu cầu kiểm tra SRI khi không được tải từ 'cùng nguồn gốc' Tuyệt quá. Bây giờ chúng tôi đã đưa thành công phiên bản Bootstrap mới nhất vào dự án của mình. Một trong những điểm khác biệt rõ ràng là chúng tôi không còn phải yêu cầu jQuery làm phụ thuộc nữa, tiết kiệm khoảng 82. Băng thông 54 KB nếu ở trạng thái thu nhỏ Chuyển từ jQuery sang Vanilla JSTrước khi bắt đầu với phần này, bạn nên biết rằng vẫn có thể sử dụng Bootstrap 5 với jQuery theo tài liệu chính thức Chúng tôi khuyên bạn nên sử dụng Vanilla JavaScript nếu lý do duy nhất bạn sử dụng jQuery là dành cho bộ chọn truy vấn, bởi vì bạn có thể làm điều tương tự với Bước đầu tiên là tạo một tệp JavaScript và đưa nó vào trước phần cuối của thẻ body nhưng sau hai phần còn lại bao gồm Vậy khi nào bạn thực sự cần sử dụng Javascript với Bootstrap 5? Hơn nữa, với các thành phần như phương thức, danh sách thả xuống và băng chuyền, bạn có thể muốn thay đổi chúng theo chương trình dựa trên hành động của người dùng hoặc logic ứng dụng Khởi tạo chú giải công cụ thông qua Vanilla JavaScriptTất cả chúng ta đều thích chú giải công cụ, nhưng chúng không hoạt động trừ khi chúng được khởi tạo thông qua JavaScript. Trước tiên hãy bắt đầu bằng cách tạo một phần tử chú giải công cụ bên trong tệp Di chuột qua nút sẽ không hiển thị chú giải công cụ, vì theo mặc định, đây là tính năng chọn tham gia của Bootstrap và nó cần được khởi chạy thủ công bằng JavaScript. Nếu bạn muốn làm điều đó với jQuery, đây là giao diện của nó Sử dụng Vanilla JS, bạn sẽ cần sử dụng đoạn mã sau để bật chú giải công cụ Đoạn mã trên làm gì mà nó chọn phần tử có id duy nhất là "chú giải công cụ" và sau đó tạo một đối tượng chú giải công cụ Bootstrap. Sau đó, bạn có thể sử dụng điều đó để thao tác trạng thái của chú giải công cụ, chẳng hạn như hiển thị hoặc ẩn chú giải công cụ theo chương trình Đây là một ví dụ về cách bạn có thể hiển thị/ẩn nó thông qua các phương thức Nếu bạn muốn bật tất cả chú giải công cụ, bạn cũng có thể sử dụng đoạn mã sau Điều xảy ra ở đây là chúng tôi chọn tất cả các phần tử có thuộc tính và giá trị Chuyển đổi mức độ hiển thị của các phần tử của bạn bằng cách sử dụng các phương thức Thu gọn JavaScriptTính năng thu gọn trên Bootstrap là một cách rất tiện dụng khác để hiển thị và ẩn các phần tử thông qua thuộc tính dữ liệu hoặc JavaScript Dưới đây là ví dụ về cách chúng tôi có thể hiển thị hoặc ẩn thẻ khi một nút nhất định đang được nhấp. Trước tiên hãy tạo đánh dấu HTML Vì vậy, chúng tôi đã tạo một nút có id Sau đó, chúng ta cần tạo một đối tượng có thể thu gọn bằng phần tử thẻ mới được chọn Tác dụng của cờ Bây giờ chúng ta cần thêm một trình xử lý sự kiện cho nút cho hành động nhấp chuột Và cuối cùng, chúng ta cần chuyển đổi thẻ bằng cách sử dụng đối tượng có thể thu gọn mà chúng ta đã khởi tạo như thế này Đó là nó. Bây giờ thẻ sẽ được hiển thị/ẩn bất cứ khi nào nhấp vào nút. Tất nhiên, tất cả những điều này có thể được thực hiện bằng cách sử dụng tính năng thuộc tính dữ liệu từ Bootstrap, nhưng bạn có thể muốn chuyển đổi một số thành phần nhất định dựa trên lệnh gọi API hoặc logic trong ứng dụng của mình Phần kết luậnNếu bạn đã làm theo hướng dẫn này, giờ đây bạn có thể sử dụng khung CSS phổ biến nhất mà không cần yêu cầu jQuery trong dự án của mình. Điều này cho phép bạn tiết kiệm tới 85 KB dữ liệu và làm cho trang web của bạn nhanh hơn. Xin chúc mừng ? Nếu bạn đánh giá cao hướng dẫn này và thích sử dụng Bootstrap làm khung CSS cho các dự án của mình, tôi mời bạn xem một số chủ đề, mẫu và Bộ giao diện người dùng Bootstrap miễn phí và cao cấp mà chúng tôi xây dựng tại Themesberg ❤️ QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO QUẢNG CÁO Tôi đam mê xây dựng giao diện người dùng và mã hóa đẹp mắt. Tôi làm công việc toàn thời gian với tư cách là người đồng sáng lập và Giám đốc điều hành của Themesberg, nơi chúng tôi phát triển các chủ đề, mẫu và Bộ giao diện người dùng chất lượng cao Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu Bootstrap 5 có hoạt động với jQuery không?Bootstrap 5 được thiết kế để sử dụng mà không cần jQuery, nhưng vẫn có thể sử dụng các thành phần của chúng tôi với jQuery . Nếu Bootstrap phát hiện thấy jQuery trong đối tượng cửa sổ, nó sẽ thêm tất cả các thành phần của chúng ta vào hệ thống plugin của jQuery; . tooltip() để bật chú giải công cụ.
Tại sao jQuery bị xóa khỏi Bootstrap 5?Không chỉ Bootstrap mà nhiều công ty khác đã nghĩ đến việc tách khỏi jQuery. Ví dụ: năm ngoái, GitHub đã dần dần loại bỏ jQuery khỏi giao diện người dùng của họ chủ yếu do sự phát triển nhanh chóng của các tiêu chuẩn web và jQuery mất dần tính liên quan theo thời gian .
Bootstrap 5 hiện có ổn định không?Bootstrap v5. 2. 0 cuối cùng cũng ổn định . Chúng tôi đã khắc phục nhiều lỗi hơn, cải thiện nhiều tài liệu hơn, viết các hướng dẫn mới và xây dựng các ví dụ về môi trường chức năng mới, v.v.
Bootstrap 5 có cần Popper JS không?Bạn phải bao gồm popper. tối thiểu. js trước bootstrap. js hoặc sử dụng bootstrap. bó. tối thiểu. js/khởi động. bó. js chứa Popper để cửa sổ bật lên hoạt động. Cửa sổ bật lên yêu cầu plugin chú giải công cụ làm phần phụ thuộc. |
