jQueryを使用してjavascript / domで特定のことを達成する例はたくさんあります。ただし、jQueryを使用することは、必ずしもjQueryで記述されたjavascriptソリューションの例を理解しやすくするオプションではありません。
jQueryコードを通常のJavaScriptに変換する簡単な方法はありますか?jQueryのソースコードにアクセスしたり、理解したりする必要はないと思います。
jQueryを使用してjavascript / domで特定のことを達成する例はたくさんあります。ただし、jQueryを使用することは、必ずしもjQueryで記述されたjavascriptソリューションの例を理解しやすくするオプションではありません。
jQueryコードを通常のJavaScriptに変換する簡単な方法はありますか?jQueryのソースコードにアクセスしたり、理解したりする必要はないと思います。
回答:
最も簡単な方法は、プレーンDOM APIを使用してDOMトラバースと操作を行う方法を学ぶことです(おそらく、これを通常のJavaScriptと呼びます)。
ただし、これは一部の状況では問題になる可能性があります。(そもそもライブラリが発明された理由です)。
「JavaScript DOMトラバース/操作」をグーグルで検索すると、役立つリソース(およびあまり役に立たないリソース)がたくさん表示されます。
このウェブサイトの記事はかなり良いです:http : //www.htmlgoodies.com/primers/jsp/
Nosrednaがコメントで指摘しているように、jQueryが不整合を処理しないため、すべてのブラウザーでテストしてください。
これにより、その方法の90%が得られます。)
window.$ = document.querySelectorAll.bind(document)
Ajaxの場合、Fetch APIがすべての主要ブラウザの現在のバージョンでサポートされるようになりました。以下のために$.ready()
、DOMContentLoaded
持って近くのユニバーサルサポートを。 jQueryは、他の一般的なjQuery関数に同等のネイティブメソッドを提供します。
Zeptoは同様の機能を提供しますが、1万zip圧縮されています。jQueryとZeptoのカスタムAjaxビルドといくつかのマイクロフレームワークがありますが、jQuery / Zeptoは確実にサポートしており、10Kは56Kモデムで〜1秒しかありません。
2012年1月19日にjeffrey Way からjqueryからjavascriptへの変換に関するこの非常に印象的なチュートリアルを見つけました *Copyright © 2014 Envato*
。
http://net.tutsplus.com/tutorials/javascript-ajax/from-jquery-to-javascript-a-reference/
好むと好まざるとにかかわらず、ますます多くの開発者がjQueryを通じて最初にJavaScriptの世界を紹介されています。多くの点で、これらの新人は幸運な人です。多数の新しいJavaScript APIにアクセスできるため、DOMトラバーサル(多くの人々がjQueryに依存しているもの)の処理がかなり簡単になります。残念ながら、彼らはこれらのAPIを知りません。
この記事では、さまざまな一般的なjQueryタスクを実行し、それらを最新のJavaScriptとレガシーJavaScriptの両方に変換します。
私はそれをOPへのコメントで提案しました、そして彼の提案の後、私はそれを公開して、誰もが参照するための答えがあります。
また、彼のインスピレーション魔女について述べたジェフリーウェイは理解のための良い入門書であるようです:http://sharedfil.es/js-48hIfQE4XK.html
ティーザーがあり、jQueryと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…
});
});
見てください。
私はこれが古いスレッドであることを知っていますが、jqueryに相当するネイティブJavaScriptを示す優れたリソースがあり、ES6の例も含まれています。これは、このテーマを扱った他の記事から私が見つけた中で最も包括的なものです。
jQueryコードを通常のJavaScriptに変換する簡単な方法はありますか?
いいえ、特に:
jQueryで記述されたJavaScriptソリューションの例を理解することは困難です。
jQueryとすべてのフレームワークは、コードの理解を容易にする傾向があります。それが理解しにくい場合、バニラJavaScriptは拷問になります:)
<input onclick="myfunction(this)">
とのmyfunction(field){ field.value = "3"; }
より私になりますより多くの意味<input id='thing'>
を持つ(function ($) { $(thing).click({ $(thing).val("3");});})()
元の投稿とは関係なく、jQueryコードを標準のJavaScriptに自動的にコンパイルする理由がわかります。
16k-またはgzip圧縮されたjQueryライブラリーが何であれ-モバイルブラウザー向けのWebサイトには多すぎる可能性があります。w3cは、モバイルWebサイトに対するすべてのHTTPリクエストを最大20kにすることを推奨しています。
ですから、簡潔で連鎖的なjQueryでのコーディングを楽しんでいます。しかし、今はモバイル向けに最適化する必要があります。本当に戻って、jQueryライブラリで使用したすべてのヘルパー関数を書き換えるという困難で面倒な作業を実行する必要がありますか?それとも、再コンパイルに役立つ便利なアプリがありますか?
それはとても甘いでしょう。残念ながら、そんなことはないと思います。
javascriptについて学びたい場合は、これらのDouglas Crockfordビデオをご覧ください。彼らはとても良い。
Jeremy Keithの著書「DOM Scripting」は、JavascriptとDOMの使用に関する優れた入門書です。jQueryを使用するかどうかに関係なく、これを強くお勧めします。下で何が起こっているのかを知るのは良いことです。