JQuery を放棄すべきでしょうか?

JQuery を放棄すべきでしょうか?

序文

私はかつて jQuery が大好きでした。正直に言うと、JavaScript を学ぶ前に jQuery を学びました。つまり、これを書くことで、私はある意味 jQuery を裏切っていることになります。

jQuery を使用すべきでない理由についての記事がたくさんあることは承知していますが、ここでは個人的な経験を共有したいと思いました。

jQuery 以外の場合は何を使うのでしょうか?

Web の発展により、新しいテクノロジーが常に新しいテクノロジーによって推進され、古いテクノロジーは消滅していきます。いくつかのプログラミング言語がかつては栄えていたのに、今では消えてしまったのと同じです。 jQuery も例外ではないと思います。かつては素晴らしいプログラミング体験をもたらしてくれた jQuery ですが、そろそろお別れを言う時が来ています。

jQuery を諦める理由は何ですか? Vue のおかげです!私の以前の記事を読んだことがあるなら、私が Vue.js のファンだということはお分かりいただけると思います。 Vue.js は多くのツールを提供しており、jQuery よりもはるかに便利だと言えます。

DOMとイベント

クリック イベントの例を見てみましょう。

フレームワークの初期化を省略したことに注意してください。

Vue SFC (慌てないでください。これは単一ファイルコンポーネントを意味します):

<テンプレート>
    <button @click="handleClick">クリックして、強く押してください</button>
</テンプレート>

<スクリプト>
    エクスポートデフォルト{
        メソッド: {
            ハンドルクリック() {
                alert('友よ、ボタンをクリックしました');
            }
        }
    }   
</スクリプト>

jQuery で記述すると次のようになります:

<button id="myButton">クリックしてください</button>

<スクリプト>
    $('button#myButton').click({
        alert('今回はjQueryを使用します');
    });
</スクリプト>

Vue.js にはコードが多いと思われるかもしれませんが、それは正しいのですが、間違いでもあります。 Vue.js にはこれ以上のコードはありません。実際、handleClick() { ... } 以外の部分はフレームワークの構造であり、他の動作と共有されています。 Vue.js の方が見た目がきれいで、コードも読みやすいと思います。

まだ疑問が残っているかもしれません。なぜまだ Vue.js を使用しているのでしょうか? それは、鍋がやかんに黒いと言うようなものではないでしょうか?能力があるなら、それを使わないでください!実際には、プレーンな JavaScript を使用してこれを行うことができます。

<button id="myButton">クリックしてください</button>

<スクリプト>
    document.getElementById('myButton').addEventListener('click', function() {
       alert('ネイティブ js からのご挨拶'); 
    });
</スクリプト>

つまり、jQuery は特別なものであるかのように見せかけて、私たちの知らないうちにコードをネイティブ JavaScript に変換するだけです。

DOM 要素の選択に関しては、ネイティブ JavaScript で簡単に行うことができます。

document.getElementById('myButton'); // jQuery => $('#myButton');
document.getElementsByClassName('a'); // jQuery => $('.a');
document.querySelectorAll('.parent .a'); // jQuery => $('.parent .a');

AJAX リクエスト

おそらく、jQuery の最も一般的な用途は AJAX です。
jQuery が $.ajax() を提供し、それぞれ特定の $.post() と $.get() も使用できることは誰もが知っています。これらの API は、AJAX リクエストの送信や結果の取得などに役立ちます。

ネイティブ JavaScript で使用できるメソッドは、XMLHttpRequest と fetch の 2 つです。

XMLHttpRequest も古いアンティークであり、fetch とはまったく同じではありません。

Fetch は XMLHttpRequest よりも新しく、より一般的に使用されており、promise ベースです。

Fetch はデフォルトでは Cookie を送信せず、HTTP ステータス コードが 404 や 500 などのエラー コードを返しても拒否されないため、基本的に .catch() は実行されませんが、response.ok は false になります。

ここでは詳細に比較することはしません。

さらに 2 つのコードを見てみましょう。

jQuery は次のとおりです。

$.ajax({
  メソッド: "POST",
  URL: "http://localhost/api",
  データ: { 名前: "Adnan", 国: "イラン" }
}).done(応答 => console.log(応答))
  .fail(() => console.log('error'));

サンプルコードはjQueryの公式ドキュメントから引用したものです。

フェッチは次のとおりです:

フェッチ(
    'http://localhost/api',
    {
        メソッド: 'POST'
        本文: { 名前: "Adnan", 国: "イラン" }
    }
  ).then(応答 => console.log(応答));

どちらのコードも同じことを行いますが、fetch はどのライブラリにも属していません。

次に示すように、fetch は async/await と組み合わせて使用​​することもできます。

非同期関数 getData() {
    レスポンスを待機してフェッチします('http://localhost/api' {
        メソッド: 'POST'
        本文: { 名前: "Adnan", 国: "イラン" }
    });
    応答を返します。
}

私自身も feth を使用していますか?実はそうではありません。いくつかの理由から、私はそれをあまり信頼していないからです。そこで私は、Promise ベースで非常に信頼性の高い axios というライブラリを使用しています。

上記のコードは、axios を使用して次のように記述されます。

アクシオス({
    メソッド: 'POST'、
    URL: 'http://localhost/api',
    データ: { 名前: "Adnan", 国: "イラン" }
}).then(応答 => console.log(応答))
  .catch(err => console.log(err));

Axios は async/await と組み合わせて使用​​することもできます。

非同期関数 getData() {
    レスポンスを待機します。axios.post('http://localhost/api' {
        名前:「アドナン」
        国:「イラン」
    });
    応答を返します。
}

要約する

私は以前は jQuery が大好きで、プロジェクトを初期化した後、最初に jQuery をインストールしていましたが、今はもう jQuery を使用しません。

他のライブラリやフレームワークの方が jQuery よりも便利かつ簡潔にタスクを実行できるため、jQuery はもう必要ないと思います。

jQuery をベースにしたプラグインは多数あるかもしれませんが、基本的には対応する Vue.js または React.js コンポーネントの代替品があります。

以上がJQueryを捨てるべきかどうかの詳細です。JQueryについてさらに詳しく知りたい方は、123WORDPRESS.COM内の他の関連記事もぜひご注目ください!

以下もご興味があるかもしれません:
  • Vue で jQuery を導入して使用する方法
  • Vue に jQuery 呼び出しを実装させる 2 つの方法
  • jQueryは消滅するのか?リッチテキストを書くのにVueを使わないのはなぜか
  • jQueryとVueの詳細な比較
  • VueプロジェクトへのJQuery-uiプラグインの導入
  • Vue プロジェクトで Jquery-contextmenu プラグインを使用する手順
  • jQuery+vue.js で実装された複数選択ドロップダウン リスト機能の例
  • vue-cli は jQuery、Bootstrap、popper を導入します
  • Angular、Vue、JQueryの違いを詳細に分析
  • VueはjQueryを導入し、指定した位置へのスムーズなスクロールを実現

<<:  セマフォによるTomcatの異常終了の解決方法

>>:  mysql5.7.21 の異常起動を修正する方法

推薦する

CSSアニメーションを使用して背景のシームレスな無限ループを実装する例

1. 需要絵が左から右へ無限ループで動く2. コードモバイルデバイスに適用されているため、rem 単...

複数の HTML ページで HTML コードをまとめて呼び出す方法

方法 1: スクリプト方式を使用する:共通ヘッダー ファイル head.js または共通フッター フ...

JSはフロントエンドのページング効果を実現します

この記事の例では、フロントエンドのページング効果を実現するためのJSの具体的なコードを参考までに共有...

Linux で gdb を使用してコア ファイルをデバッグする方法

1.コアファイルプログラム実行中にセグメンテーション エラー (コア ダンプ) が発生すると、プログ...

MySQL infobrightのインストール手順

目次1. 次のように、「rpm -ivh インストール パッケージ」コマンドを使用して rpm パッ...

mysql5.7.33 で誤って ibdata ファイルを削除した後にデータを回復する方法

目次1. シナリオの説明: 2. 事例のデモンストレーション: 2.1. MySQLの障害発生前にデ...

Centos7 への mysql8.0rpm のインストール チュートリアル

まず、図をダウンロードしてください 1. まず、centos7に付属しているmariadbをアンイン...

Windows に異なる (2 つの) バージョンの MySQL データベースをインストールする詳細なチュートリアル

1. 原因: SQL ファイルをインポートする必要があるのですが、インポートできません。この文を実行...

ウェブデザインで注意すべき検索最適化の知識

1. 新サイトホームページのリンクレイアウト1. リンク配置の位置:リンク配置の位置によって、リンク...

WeChatアプレットタブの左右スライドスイッチ機能実装コード

効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある1. 核となる考え方ス...

Mysqlはブール型の演算を設定します

Mysqlはブール型を設定します1. Tinyintタイプテストテーブルを作成し、blフィールドをブ...

Linux スクリプトの基礎を詳しく紹介

目次1. スクリプトvim環境2. シェルスクリプトで環境を定義する方法3. シェルスクリプト内の翻...

Ubuntu システムでタイムゾーンと時刻を変更する方法

Linux コンピュータには 2 つの時間があります。1 つはハードウェア時間 (BIOS に記録さ...

N キロメートル以内のデータを検索する MySQL の簡単な例

地球の円周率と半径、検索ポイントの経度と緯度から、検索ポイントと検索データテーブル間の距離はNキロメ...

MySQL で戻り値ありと戻り値なしのストアド プロシージャを書く 2 つの方法

プロセス1: 戻り値あり: proc_addNum が存在する場合はプロシージャを削除します。 プロ...