jqueryコードをjavascriptに変換する簡単な方法はありますか?[閉まっている]


142

jQueryを使用してjavascript / domで特定のことを達成する例はたくさんあります。ただし、jQueryを使用することは、必ずしもjQueryで記述されたjavascriptソリューションの例を理解しやすくするオプションではありません。

jQueryコードを通常のJavaScriptに変換する簡単な方法はありますか?jQueryのソースコードにアクセスしたり、理解したりする必要はないと思います。


8
私は基本的に、1つのjquery行を10のバニラJavaScript行に変換した何かの後でした... jqueryが使用できない場合...
davidsleeps

1
スクリプトタグを使用してjQueryを含めることができない場合でも、常に縮小されたバージョンをソースファイルの先頭に追加できます。ある種の企業政治以外にjQueryが利用できない理由は見当たりません。
cdmckay 2009年

23
これも上手に利用できます。jQueryを使用するJavaScriptで使用するのは10〜100行程度です。コアメソッドに関数を再コンパイルおよび置換することで帯域幅を節約し、jQueryから他のすべてをロードしません。

5
私は同じ質問を受けました。jQueryの方がシンプルだと多くの人が答えましたが、JavaScriptに既に慣れている開発者は、jQueryの記号/略語を理解するときに問題が発生します。そして、私の質問の理由は、何らかの理由で、取得したjQueryスクリプトがBlackberryで機能しないことです。これはAjaxアップロードスクリプトです。だから私はそれをJavascriptに翻訳する必要があると思います:(

1
既存のアプリ内にJSクラッジを作成しようとしています。jQueryを含めると、アプリに組み込まれているすべてのJS関数が壊れます。これは不十分に記述されたアプリ(AtlassianのJIRA)であり、それらが原因であると確信していますが、これも同じように必要です。
chadoh

回答:


41

最も簡単な方法は、プレーンDOM APIを使用してDOMトラバースと操作を行う方法を学ぶことです(おそらく、これを通常のJavaScriptと呼びます)。

ただし、これは一部の状況では問題になる可能性があります。(そもそもライブラリが発明された理由です)。

「JavaScript DOMトラバース/操作」をグーグルで検索すると、役立つリソース(およびあまり役に立たないリソース)がたくさん表示されます。

このウェブサイトの記事はかなり良いです:http : //www.htmlgoodies.com/primers/jsp/

Nosrednaがコメントで指摘しているように、jQueryが不整合を処理しないため、すべてのブラウザーでテストしてください。


4
また、各ブラウザのさまざまなバージョンに対してテストする必要があります。
Nosredna 2009年

1
デスクトップワークステーションの選択は、jQueryの使用にどのように影響しますか?
Dan Davies Brackett

5
一部の組織でオープンソースライブラリを使用することの政治に共感します。結局のところ、プレーンなDOMトラバーサルにプレーンライト(そしてバグの多い可能性が高い)を書き換えるのに費やしている時間と、JSは会社にとって無駄なお金です。非常に保守的な企業を含む大企業では、jQueryを使用する場合があります:docs.jquery.com/Sites_Using_jQuery:Oracle、Google、Amazon、Dell、バンクオブアメリカ、Intuit、Salesforce。これらはほとんどヒッピー共産主義の会社ではありません。これらは、法務部門が宿題を行い、jQueryを受け入れた非常に現実的な会社です
artlung

2
@davidsleeps-jQueryはMicrosoftによって認可されています...これはVisual Studio 2008に含まれているため、技術的には「Microsoft」ツールになります。それで雇用主は気分が良くなるでしょうか?
Robert Harvey、

4
jqueryと、同じことを行うために記述した一連のjavascript全体との違いは何ですか?何かをインストールしたり、新しい言語でコーディングしたり、依存関係を追加したりするのとは異なります。これは正直言って私が聞いた中で最も愚かなことであり、JavaScriptは許可しますがjQueryは許可しません。jQueryはJAVASCRIPTです!
micmcg 2009年

60

これにより、その方法の90%が得られます。)

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

Ajaxの場合、Fetch APIすべての主要ブラウザの現在のバージョンでサポートされるようになりました。以下のために$.ready()DOMContentLoaded持って近くのユニバーサルサポートをjQueryは、他の一般的なjQuery関数に同等のネイティブメソッドを提供します。

Zeptoは同様の機能を提供しますが、1万zip圧縮されています。jQueryとZeptoのカスタムAjaxビルドといくつかのマイクロフレームワークがありますが、jQuery / Zeptoは確実にサポートしており、10Kは56Kモデムで〜1秒しかありません。


22

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…
  });
});

見てください。


12

私はこれが古いスレッドであることを知っていますが、jqueryに相当するネイティブJavaScriptを示す優れたリソースがあり、ES6の例も含まれています。これは、このテーマを扱った他の記事から私が見つけた中で最も包括的なものです。

バニラJSへのjQuery


6

jQueryコードを通常のJavaScriptに変換する簡単な方法はありますか?

いいえ、特に:

jQueryで記述されたJavaScriptソリューションの例を理解することは困難です。

jQueryとすべてのフレームワークは、コードの理解を容易にする傾向があります。それが理解しにくい場合、バニラJavaScriptは拷問になります:)


15
他の人が実際の答えを持っている
ftrotter

2
また、JQueryはコードをより簡潔(通常は)にしますが、実際にそれが簡単になるかどうかは議論の余地があります。jQueryは、一部のコードを精神的に解析することを困難にする可能性があります。例えば、<input onclick="myfunction(this)">とのmyfunction(field){ field.value = "3"; }より私になりますより多くの意味<input id='thing'>を持つ(function ($) { $(thing).click({ $(thing).val("3");});})()
liljoshu

6

元の投稿とは関係なく、jQueryコードを標準のJavaScriptに自動的にコンパイルする理由がわかります。

16k-またはgzip圧縮されたjQueryライブラリーが何であれ-モバイルブラウザー向けのWebサイトには多すぎる可能性があります。w3cは、モバイルWebサイトに対するすべてのHTTPリクエストを最大20kにすることを推奨しています。

モバイル用のw3c仕様

ですから、簡潔で連鎖的なjQueryでのコーディングを楽しんでいます。しかし、今はモバイル向けに最適化する必要があります。本当に戻って、jQueryライブラリで使用したすべてのヘルパー関数を書き換えるという困難で面倒な作業を実行する必要がありますか?それとも、再コンパイルに役立つ便利なアプリがありますか?

それはとても甘いでしょう。残念ながら、そんなことはないと思います。


6

1

Jeremy Keithの著書「DOM Scripting」は、JavascriptとDOMの使用に関する優れた入門書です。jQueryを使用するかどうかに関係なく、これを強くお勧めします。下で何が起こっているのかを知るのは良いことです。


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.