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 の異常起動を修正する方法

推薦する

MySQLのルートパスワードをリセットする最も簡単な方法

私の MySQL バージョンは MYSQL V5.7.9 です。古いバージョンを使用してください: ...

CSS3 Flex エラスティックレイアウトのサンプルコードの詳細な説明

1. 基本概念 //任意のコンテナを Flex レイアウトとして指定できます。 。箱{ ディスプレイ...

MySQL 8.0の新機能、隠しフィールドの詳細な説明

序文MySQL バージョン 8.0.23 では、新しい機能「Invisible Column (In...

CSS 位置固定左と右の二重配置実装コード

CSS 位置position 属性は、要素の配置タイプを指定します。位置プロパティには 5 つの値が...

WiFi 開発 | WiFi ワイヤレス テクノロジーの紹介

目次WiFiワイヤレステクノロジーの紹介1. WiFiテクノロジーの概要2. ESP8266の紹介W...

js配列forEachインスタンスの詳細な使用方法

1. forEach() は map() に似ています。これも渡された関数に各要素を順番に適用します...

Vue フォーム入力バインディング v-model

目次1.vモデル2. プロパティとイベントのバインディング3. フォーム要素のバインディング3.1 ...

Win10の明るさ調整効果を模倣するHTML+CSS+JSサンプルコード

HTML+CSS+JS で Win10 の明るさ調整効果を模倣コード <!doctypehtm...

新しい Linux ファイル権限設定における umask の詳細な理解

序文起源は質問 1 です: umask が 022 に設定されている場合、作成するファイルのデフォル...

スキン効果を実現するJavaScript(背景の変更)

この記事では、スキン変更効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...

Vueは水平の斜めの棒グラフを実装します

この記事では、水平傾斜棒グラフを実装するためのVueの具体的なコードを参考までに共有します。具体的な...

CSSはリストのスタイルを設定し、ナビゲーションメニューの実装コードを作成します。

1. リストシンボルを設定するlist-style-type: attribute; //リストの...

Easyswoole ワンクリック インストール スクリプトとパゴダ インストール エラー

よくある質問easyswoole を初めて使用する場合は、次のような問題に遭遇することがよくあります...

Reactホームページの読み込みが遅い問題のパフォーマンス最適化事例の詳細な説明

しばらくReactを勉強した後、実践してみたいと思います。そこで、個人のブログのウェブサイトを再構築...

MySQL で特定の親行のすべての子行を見つけるソリューション

序文注: テストデータベースのバージョンはMySQL 8.0ですテーブルを作成し、ユーザー scot...