Có cách nào dễ dàng để chuyển đổi mã jquery sang javascript không? [đóng cửa]

Có rất nhiều ví dụ về việc đạt được những thứ nhất định trong javascript / dom bằng jQuery. Tuy nhiên, sử dụng jQuery không phải lúc nào cũng là một tùy chọn có thể khiến việc hiểu các ví dụ về các giải pháp javascript được viết bằng jQuery trở nên khó khăn.

Có cách nào dễ dàng để chuyển đổi mã jQuery sang javascript thông thường không? Tôi đoán mà không cần phải truy cập hoặc hiểu mã nguồn jQuery.

Cách đơn giản nhất là chỉ học cách thực hiện thao tác và duyệt DOM với api DOM đơn giản (có thể bạn sẽ gọi đây là: JavaScript bình thường).

Điều này tuy nhiên có thể là một nỗi đau cho một số điều. (đó là lý do tại sao các thư viện được phát minh ở nơi đầu tiên).

Googling cho "thao tác / thao tác DOM javascript" sẽ cung cấp cho bạn nhiều tài nguyên hữu ích (và một số ít hữu ích hơn).

Các bài viết trên trang web này là khá tốt: http://www.htmlgoodies.com/primers/jsp/

Và như Nosredna chỉ ra trong các bình luận: hãy chắc chắn kiểm tra trong tất cả các trình duyệt, bởi vì bây giờ jQuery sẽ không xử lý các mâu thuẫn cho bạn.

Điều này sẽ giúp bạn đạt được 90% theo cách đó; )

window.$ = document.querySelectorAll.bind(document)

Đối với Ajax, API Fetch hiện được hỗ trợ trên phiên bản hiện tại của mọi trình duyệt chính . Đối với $.ready(), DOMContentLoadedcó gần hỗ trợ phổ quát . Bạn có thể không cần jQuery cung cấp các phương thức gốc tương đương cho các hàm jQuery phổ biến khác.

Zepto cung cấp chức năng tương tự nhưng có trọng lượng 10 nghìn được nén. Có các bản dựng Ajax tùy chỉnh cho jQuery và Zepto cũng như một số khung vi mô , nhưng jQuery / Zepto có hỗ trợ vững chắc và 10KB chỉ ~ 1 giây trên modem 56K.

Tôi vừa tìm thấy hướng dẫn khá ấn tượng này về chuyển đổi jquery sang javascript từ Jeffrey Way vào ngày 19 tháng 1 năm 2012 *Copyright © 2014 Envato* :

http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/

Cho dù chúng ta có thích hay không, ngày càng có nhiều nhà phát triển được giới thiệu về thế giới JavaScript thông qua jQuery. Theo nhiều cách, những người mới này là những người may mắn. Họ có quyền truy cập vào rất nhiều API JavaScript mới, điều này làm cho quá trình duyệt DOM (điều mà nhiều người phụ thuộc vào jQuery) dễ dàng hơn đáng kể. Thật không may, họ không biết về các API này!

Trong bài viết này, chúng tôi sẽ thực hiện một loạt các tác vụ jQuery phổ biến và chuyển đổi chúng thành cả JavaScript hiện đại và kế thừa.

Tôi đã đề xuất nó trong một bình luận cho OP, và sau gợi ý của anh ấy, tôi xuất bản nó có một câu trả lời cho mọi người tham khảo.

Ngoài ra, Jeffrey Way đã đề cập về phù thủy truyền cảm hứng của mình dường như là một mồi tốt để hiểu: http : // Sharedfil.es/js-48h IfQE4XK.html

Có một lời trêu ghẹo, tài liệu này so sánh jQuery với javascript:

$(document).ready(function() {
  // code…
});

document.addEventListener("DOMContentLoaded", function() {
  // code…
});

$("a").click(function() {
  // code…
})

[].forEach.call(document.querySelectorAll("a"), function(el) {
  el.addEventListener("click", function() {
    // code…
  });
});

Bạn nên xem qua.

Tôi biết đây là một chủ đề cũ nhưng có một tài nguyên tuyệt vời hiển thị javascript gốc tương đương với jquery, nó thậm chí bao gồm các ví dụ ES6. Đây là bài viết toàn diện nhất mà tôi đã tìm ra trong số các bài viết khác về chủ đề này.

jQuery sang Vanilla JS

Có cách nào dễ dàng để chuyển đổi mã jQuery sang javascript thông thường không?

Không, đặc biệt là nếu:

hiểu các ví dụ về các giải pháp javascript được viết bằng jQuery [là] khó.

JQuery và tất cả các khung có xu hướng làm cho việc hiểu mã dễ dàng hơn. Nếu điều đó khó hiểu, thì javilla javascript sẽ bị tra tấn :)

Tôi có thể thấy một lý do, không liên quan đến bài viết gốc, để tự động biên dịch mã jQuery thành JavaScript tiêu chuẩn:

16k - hoặc bất cứ thư viện jQuery được rút gọn, rút ​​gọn nào - có thể là quá nhiều cho trang web của bạn dành cho trình duyệt di động. W3c đang khuyến nghị rằng tất cả các yêu cầu HTTP cho các trang web di động nên tối đa là 20k.

thông số kỹ thuật w3c cho điện thoại di động

Vì vậy, tôi thích mã hóa trong jQuery đẹp, ngắn gọn và bị xiềng xích của tôi. Nhưng bây giờ tôi cần tối ưu hóa cho điện thoại di động. Tôi có nên thực sự quay lại và thực hiện công việc khó khăn, tẻ nhạt khi viết lại tất cả các hàm trợ giúp mà tôi đã sử dụng trong thư viện jQuery không? Hoặc có một số loại ứng dụng tiện lợi sẽ giúp tôi biên dịch lại?

Điều đó sẽ rất ngọt ngào. Đáng buồn thay, tôi không nghĩ rằng một điều như vậy tồn tại.

Nếu bạn muốn học javascript, hãy xem những video Douglas Crockford này. Họ rất tốt.

1. Ngôn ngữ lập trình Javascript: Lịch sử, Ngôn ngữ, Tính năng nâng cao, Nền tảng, Tiêu chuẩn, Phong cách [ slide tải xuống ]
   • Xem mục blog YUI
2. Lý thuyết về DOM [ slide tải xuống ]
   • Xem mục blog YUI
3. Javascript nâng cao: Kế thừa, mô-đun, gỡ lỗi, hiệu quả, JSON [ slide tải xuống ]
   • Xem mục blog YUI

Cuốn sách " DOM Scripting " của Jeremy Keith là một giới thiệu tuyệt vời để làm việc với Javascript và DOM. Tôi đánh giá cao nó, cho dù bạn có muốn sử dụng jQuery hay không. Thật tốt khi biết những gì đang diễn ra bên dưới.

Có một số cuốn sách tốt có sẵn. Tôi thích ppk trên JavaScript. Đây là chương 8 trên DOM .