序文私はかつて 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内の他の関連記事もぜひご注目ください! 以下もご興味があるかもしれません:
|
私の MySQL バージョンは MYSQL V5.7.9 です。古いバージョンを使用してください: ...
1. 基本概念 //任意のコンテナを Flex レイアウトとして指定できます。 。箱{ ディスプレイ...
序文MySQL バージョン 8.0.23 では、新しい機能「Invisible Column (In...
CSS 位置position 属性は、要素の配置タイプを指定します。位置プロパティには 5 つの値が...
目次WiFiワイヤレステクノロジーの紹介1. WiFiテクノロジーの概要2. ESP8266の紹介W...
1. forEach() は map() に似ています。これも渡された関数に各要素を順番に適用します...
目次1.vモデル2. プロパティとイベントのバインディング3. フォーム要素のバインディング3.1 ...
HTML+CSS+JS で Win10 の明るさ調整効果を模倣コード <!doctypehtm...
序文起源は質問 1 です: umask が 022 に設定されている場合、作成するファイルのデフォル...
この記事では、スキン変更効果を実現するためのJavaScriptの具体的なコードを参考までに紹介しま...
この記事では、水平傾斜棒グラフを実装するためのVueの具体的なコードを参考までに共有します。具体的な...
1. リストシンボルを設定するlist-style-type: attribute; //リストの...
よくある質問easyswoole を初めて使用する場合は、次のような問題に遭遇することがよくあります...
しばらくReactを勉強した後、実践してみたいと思います。そこで、個人のブログのウェブサイトを再構築...
序文注: テストデータベースのバージョンはMySQL 8.0ですテーブルを作成し、ユーザー scot...