Lịch sử và di sản của jQuery

Lịch sử và di sản của jQuery
jQuery - đây là cái phổ biến nhất trên thế giới có một thư viện JavaScript. Cộng đồng phát triển web đã tạo ra nó vào cuối những năm 2000, tạo ra một hệ sinh thái phong phú gồm các trang web, plugin và khung sử dụng jQuery.

Nhưng trong những năm gần đây, vị thế là công cụ hàng đầu để phát triển web của nó đã bị xói mòn. Hãy xem tại sao jQuery trở nên phổ biến và tại sao nó không còn hợp thời nữa, cũng như trong trường hợp nào thì vẫn nên sử dụng nó để tạo các trang web hiện đại.

Tóm tắt lịch sử của jQuery

John Resig (John Resig) đã tạo phiên bản đầu tiên của thư viện vào năm 2005 và xuất bản năm 2006-m, tại một sự kiện có tên BarCampNYC. TRÊN Trang web chính thức của jQuery tác giả đã viết:

jQuery là một thư viện Javascript dựa trên phương châm: Javascript nên rất thú vị khi viết mã. jQuery thực hiện các tác vụ phổ biến, lặp đi lặp lại, loại bỏ tất cả các đánh dấu không cần thiết và làm cho chúng ngắn gọn, trang nhã và rõ ràng.

jQuery có hai ưu điểm chính. Đầu tiên là API tiện lợi để thao tác với các trang web. Đặc biệt, nó cung cấp các phương pháp mạnh mẽ để chọn các phần tử. Bạn không chỉ có thể chọn theo ID hoặc lớp, jQuery còn cho phép bạn viết các biểu thức phức tạp, ví dụ: để chọn các phần tử dựa trên mối quan hệ của chúng với các phần tử khác:

// Select every item within the list of people within the contacts element
$('#contacts ul.people li');

Theo thời gian, cơ chế tuyển chọn trở thành một thư viện riêng Xì xụp.

Ưu điểm thứ hai của thư viện là nó trừu tượng hóa sự khác biệt giữa các trình duyệt. Trong những năm đó, thật khó để viết được mã có thể hoạt động ổn định trên tất cả các trình duyệt.

Việc thiếu tiêu chuẩn hóa có nghĩa là các nhà phát triển cần tính đến nhiều điểm khác biệt giữa các trình duyệt và các trường hợp phức tạp. Hãy xem mã nguồn jQuery đầu tiên này và tìm kiếm jQuery.browser. Đây là một ví dụ:

// If Mozilla is used
if ( jQuery.browser == "mozilla" || jQuery.browser == "opera" ) {
        // Use the handy event callback
        jQuery.event.add( document, "DOMContentLoaded", jQuery.ready );

// If IE is used, use the excellent hack by Matthias Miller
// http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_revisited
} else if ( jQuery.browser == "msie" ) {

        // Only works if you document.write() it
        document.write("<scr" + "ipt id=__ie_init defer=true " + 
                "src=javascript:void(0)></script>");

        // Use the defer script hack
        var script = document.getElementById("__ie_init");
        script.onreadystatechange = function() {
                if ( this.readyState == "complete" )
                        jQuery.ready();
        };

        // Clear from memory
        script = null;

// If Safari  is used
} else if ( jQuery.browser == "safari" ) {
        // Continually check to see if the document.readyState is valid
        jQuery.safariTimer = setInterval(function(){
                // loaded and complete are both valid states
                if ( document.readyState == "loaded" || 
                        document.readyState == "complete" ) {

                        // If either one are found, remove the timer
                        clearInterval( jQuery.safariTimer );
                        jQuery.safariTimer = null;

                        // and execute any waiting functions
                        jQuery.ready();
                }
        }, 10);
}

Và nhờ có jQuery, các nhà phát triển có thể chuyển những lo lắng về tất cả những cạm bẫy này sang vai nhóm phát triển thư viện.

Sau này, jQuery giúp việc triển khai các công nghệ phức tạp hơn như hoạt ảnh và Ajax trở nên dễ dàng hơn. Thư viện thực sự đã trở thành một phụ thuộc tiêu chuẩn cho các trang web. Và ngày nay nó chiếm một phần rất lớn trên Internet. W3Techs tin rằng 74% trang web ngày nay sử dụng jQuery.

Việc kiểm soát việc phát triển jQuery cũng đã trở nên chính thức hơn. Năm 2011 đội đã tạo Bảng jQuery. Và vào năm 2012 Hội đồng jQuery được chuyển đổi thành Quỹ jQuery.

Vào năm 2015, Quỹ jQuery đã sáp nhập với Quỹ Dojo, để tạo JS Foundation, sau đó được sáp nhập với Node.js Foundation thành 2019-m để tạo Tổ chức OpenJS, trong đó jQuery là một trong “dự án đột phá. »

Hoàn cảnh thay đổi

Tuy nhiên, trong những năm gần đây jQuery mất đi sự nổi tiếng của nó. GitHub đã xóa thư viện khỏi giao diện người dùng trang web của tôi. Bootstrap v5 thoát khỏi jQueryvì đó là của anh ấy"sự phụ thuộc lớn nhất của máy khách đối với JavaScript thông thường"(hiện có kích thước 30 KB, được rút gọn và đóng gói). Một số xu hướng phát triển web đã làm suy yếu vị thế của jQuery như một công cụ thiết yếu.

Các trình duyệt

Vì một số lý do, sự khác biệt và hạn chế của trình duyệt đã trở nên ít quan trọng hơn. Đầu tiên, tiêu chuẩn hóa đã được cải thiện. Các nhà phát triển trình duyệt lớn (Apple, Google, Microsoft và Mozilla) đang hợp tác cùng nhau để phát triển tiêu chuẩn web trong khuôn khổ Nhóm làm việc về công nghệ ứng dụng siêu văn bản Web.
Mặc dù các trình duyệt vẫn khác nhau ở một số điểm quan trọng nhưng ít nhất các nhà cung cấp cũng có phương tiện để tìm kiếm và tạo cơ sở dữ liệu chung thay vì chiến tranh thường trực cùng nhau. Theo đó, API trình duyệt đã đạt được những khả năng mới. Ví dụ, Fetch API có khả năng thay thế các hàm Ajax từ jQuery:

// jQuery
$.getJSON('https://api.com/songs.json')
    .done(function (songs) {
        console.log(songs);
    })

// native
fetch('https://api.com/songs.json')
    .then(function (response) {
        return response.json();
    })
    .then(function (songs) {
        console.log(songs);
    });

Phương pháp bộ chọn truy vấn и truy vấnSelectorAll bộ chọn jQuery trùng lặp:

// jQuery
const fooDivs = $('.foo div');

// native
const fooDivs = document.querySelectorAll('.foo div');

Bây giờ bạn có thể thao tác các lớp phần tử bằng cách sử dụng danh sách lớp học:

// jQuery
$('#warning').toggleClass('visible');

// native
document.querySelector('#warning').classList.toggle('visible');

Trang web Bạn có thể không cần jQuery Dưới đây là một số tình huống khác trong đó mã jQuery có thể được thay thế bằng mã gốc. Một số nhà phát triển luôn gắn bó với jQuery vì đơn giản là họ không biết về các API mới, nhưng khi biết, họ bắt đầu sử dụng thư viện ít thường xuyên hơn.

Sử dụng các tính năng gốc giúp cải thiện hiệu suất trang. Nhiều hiệu ứng hoạt hình từ jQuery bây giờ bạn có thể thực hiện hiệu quả hơn nhiều sử dụng CSS.

Lý do thứ hai là trình duyệt được cập nhật nhanh hơn trước rất nhiều. Hầu hết họ sử dụng Chiến lược đổi mới “thường xanh”, ngoại trừ Apple Safari. Chúng có thể được cập nhật ở chế độ nền mà không cần sự tham gia của người dùng và không bị ràng buộc với các bản cập nhật hệ điều hành.

Điều này có nghĩa là các tính năng mới của trình duyệt và các bản sửa lỗi được phân phối nhanh hơn nhiều và các nhà phát triển không phải đợi cho đến khi Tôi có thể sử dụng sẽ đạt tới mức có thể chấp nhận được. Họ có thể tự tin sử dụng các tính năng và API mới mà không cần tải xuống jQuery hoặc polyfill.

Lý do thứ ba là Internet Explorer đang tiến tới trạng thái hoàn toàn không còn phù hợp. IE từ lâu đã là nguyên nhân cản trở sự phát triển web trên toàn thế giới. Lỗi của nó rất phổ biến và do IE thống trị những năm 2000 và không sử dụng chiến lược cập nhật thường xuyên nên các phiên bản cũ hơn vẫn phổ biến.

Năm 2016, Microsoft đẩy nhanh việc ngừng hoạt động IE, ngừng hỗ trợ phiên bản thứ mười trở về trước, hạn chế hỗ trợ cho IE 11. Và ngày càng có nhiều nhà phát triển web bỏ qua khả năng tương thích của IE.

Ngay cả jQuery cũng ngừng hỗ trợ IE 8 trở xuống bắt đầu từ phiên bản 2.0, xuất bản năm 2013. Và mặc dù trong một số trường hợp vẫn cần hỗ trợ IE, chẳng hạn như trên các trang cũ hơn, những tình huống này ngày càng ít phát sinh hơn.

Khung mới

Kể từ khi jQuery ra đời, nhiều framework đã được tạo ra, bao gồm cả các framework hiện đại Phản ứng, có góc cạnh и quang cảnh. Chúng có hai lợi thế quan trọng so với jQuery.

Đầu tiên, chúng giúp dễ dàng tách giao diện người dùng thành các thành phần. Các khung được thiết kế để xử lý việc hiển thị và cập nhật trang. Và jQuery thường chỉ được sử dụng để cập nhật, để lại nhiệm vụ cung cấp trang ban đầu cho máy chủ.

Mặt khác, các thành phần React, Angular và Vue cho phép bạn kết hợp chặt chẽ HTML, mã và thậm chí cả CSS. Giống như việc chúng tôi chia cơ sở mã thành nhiều hàm và lớp độc lập, khả năng chia giao diện thành các thành phần có thể sử dụng lại giúp việc xây dựng và duy trì các trang web phức tạp trở nên dễ dàng hơn.

Ưu điểm thứ hai là các khung gần đây tuân thủ mô hình khai báo, trong đó nhà phát triển mô tả giao diện sẽ trông như thế nào và để khung đó thực hiện tất cả các thay đổi cần thiết nhằm đạt được những gì mong muốn. Cách tiếp cận này trái ngược với cách tiếp cận bắt buộc đặc trưng cho mã jQuery.

Trong jQuery, bạn viết ra một cách rõ ràng các bước để thực hiện bất kỳ thay đổi nào. Và trong khung khai báo, bạn nói: “Theo dữ liệu này, giao diện sẽ trông như thế này”. Điều này có thể làm cho việc viết mã không có lỗi dễ dàng hơn rất nhiều.

Các nhà phát triển đã áp dụng các phương pháp tiếp cận mới để phát triển trang web, đó là lý do tại sao mức độ phổ biến của jQuery đã giảm đi.

Khi nào nên sử dụng jQuery?

Vậy khi nào nên sử dụng jQuery?

Nếu độ phức tạp của dự án tăng lên thì tốt hơn là nên bắt đầu với một thư viện hoặc khung khác cho phép bạn quản lý độ phức tạp một cách có ý nghĩa. Ví dụ: chia giao diện thành các thành phần. Việc sử dụng jQuery trên các trang web như vậy ban đầu có vẻ ổn, nhưng nó sẽ nhanh chóng dẫn đến mã spaghetti mà bạn không chắc đoạn nào ảnh hưởng đến phần nào của trang.

Tôi đã từng ở trong hoàn cảnh như vậy, khi cố gắng thực hiện bất kỳ thay đổi nào, tôi cảm thấy đó là một nhiệm vụ khó khăn. Bạn không thể chắc chắn rằng mình sẽ không phá vỡ bất cứ điều gì vì bộ chọn jQuery phụ thuộc vào cấu trúc HTML do máy chủ tạo ra.

Ở đầu bên kia của thang đo là các trang web đơn giản chỉ yêu cầu một chút tương tác hoặc nội dung động. Tôi cũng sẽ không mặc định sử dụng jQuery trong những trường hợp này vì bạn có thể làm được nhiều việc hơn nữa với API gốc.

Ngay cả khi tôi cần thứ gì đó mạnh mẽ hơn, tôi sẽ tìm một thư viện chuyên dụng, ví dụ: axios cho Ajax hoặc Animate.css cho hoạt hình. Điều này sẽ dễ dàng hơn việc tải tất cả jQuery cho một chức năng nhỏ.

Tôi nghĩ lý do tốt nhất để sử dụng jQuery là nó cung cấp chức năng toàn diện cho giao diện người dùng của trang web. Thay vì học nhiều API gốc hoặc thư viện chuyên biệt, bạn có thể chỉ đọc tài liệu jQuery và làm việc hiệu quả ngay lập tức.

Cách tiếp cận mệnh lệnh không có quy mô tốt nhưng dễ học hơn cách tiếp cận khai báo của các thư viện khác. Đối với một trang web có khả năng hạn chế rõ ràng, tốt hơn là nên sử dụng jQuery và làm việc một cách bình tĩnh: thư viện không yêu cầu lắp ráp hoặc biên dịch phức tạp.

Ngoài ra, jQuery sẽ phù hợp nếu bạn tin tưởng rằng trang web của mình sẽ không phức tạp theo thời gian và nếu bạn không quan tâm đến chức năng gốc, điều này chắc chắn sẽ yêu cầu viết nhiều mã hơn jQuery.

Bạn cũng có thể sử dụng thư viện này nếu bạn cần hỗ trợ các phiên bản IE cũ hơn. Sau đó, jQuery sẽ phục vụ bạn giống như những ngày mà IE là trình duyệt phổ biến nhất.

Thăm dò

jQuery sẽ không biến mất sớm. Cô ấy tích cực phát triểnvà nhiều nhà phát triển thích sử dụng API của nó hơn, ngay cả khi có sẵn các phương thức gốc. Thư viện đã giúp cả thế hệ nhà phát triển tạo ra các trang web hoạt động trên mọi trình duyệt. Mặc dù nó đã được thay thế bằng nhiều cách bởi các thư viện, framework và mô hình mới, nhưng jQuery vẫn đóng một vai trò cực kỳ tích cực trong việc tạo ra web hiện đại.

Trừ khi chức năng của jQuery thay đổi đáng kể, nếu không thì khả năng sử dụng thư viện sẽ tiếp tục giảm chậm nhưng đều đặn trong vài năm tới. Các trang web mới có xu hướng được xây dựng bằng cách sử dụng các khuôn khổ hiện đại hơn ngay từ đầu và các trường hợp sử dụng phù hợp cho jQuery ngày càng trở nên hiếm.

Một số người không thích tốc độ các công cụ phát triển web trở nên lỗi thời, nhưng với tôi đó là bằng chứng về sự tiến bộ nhanh chóng. jQuery đã cho phép chúng tôi làm nhiều thứ tốt hơn. Điều này cũng đúng với những người kế nhiệm của cô.

Nguồn: www.habr.com

Thêm một lời nhận xét