序文私はかつて 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 です。 ネイティブ 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内の他の関連記事もぜひご注目ください! 以下もご興味があるかもしれません:
|
1. 需要絵が左から右へ無限ループで動く2. コードモバイルデバイスに適用されているため、rem 単...
方法 1: スクリプト方式を使用する:共通ヘッダー ファイル head.js または共通フッター フ...
この記事の例では、フロントエンドのページング効果を実現するためのJSの具体的なコードを参考までに共有...
1.コアファイルプログラム実行中にセグメンテーション エラー (コア ダンプ) が発生すると、プログ...
目次1. 次のように、「rpm -ivh インストール パッケージ」コマンドを使用して rpm パッ...
目次1. シナリオの説明: 2. 事例のデモンストレーション: 2.1. MySQLの障害発生前にデ...
まず、図をダウンロードしてください 1. まず、centos7に付属しているmariadbをアンイン...
1. 原因: SQL ファイルをインポートする必要があるのですが、インポートできません。この文を実行...
1. 新サイトホームページのリンクレイアウト1. リンク配置の位置:リンク配置の位置によって、リンク...
効果画像: 1. はじめに独自のアプレットでこのような機能を実装する必要がある1. 核となる考え方ス...
Mysqlはブール型を設定します1. Tinyintタイプテストテーブルを作成し、blフィールドをブ...
目次1. スクリプトvim環境2. シェルスクリプトで環境を定義する方法3. シェルスクリプト内の翻...
Linux コンピュータには 2 つの時間があります。1 つはハードウェア時間 (BIOS に記録さ...
地球の円周率と半径、検索ポイントの経度と緯度から、検索ポイントと検索データテーブル間の距離はNキロメ...
プロセス1: 戻り値あり: proc_addNum が存在する場合はプロシージャを削除します。 プロ...