github が jq を使用しない場合は何を使用すればよいでしょうか?

最近、私たちは GitHub.com のフロントエンド コードから jQuery を完全に削除しました。これは、数年かけて段階的に jQuery を削除する段階的なプロセスの終わりを示します。これは私たちにとってマイルストーンとなるイベントです。この記事では、過去にどのように jQuery に依存していたか、時間が経つにつれて jQuery が必要なくなったことに気づきましたが、最終的には別のライブラリやフレームワークに置き換えず、標準のブラウザーを使用したことについて説明します。API は、私たちが実行するすべてのものを実装します。必要。

初期の頃、jQuery は私たちにとって大きな意味を持っていました

GitHub.com は jQuery 1.2.1 の使用を開始しましたそれは、Google が Chrome ブラウザをリリースする 1 年前のことでした。 CSS セレクターを介して DOM 要素をクエリしたり、要素のスタイルを動的にレンダリングしたりする標準的な方法はなく、他の多くの API と同様に、Internet Explorer の XMLHttpRequest インターフェイスにはブラウザ間の不一致が発生していました。

jQuery を使用すると、DOM の操作、アニメーションや「AJAX」リクエストの作成が簡単になります。基本的に、Web 開発者はより最新で動的な Web エクスペリエンスを作成できます。何よりも、あるブラウザー用に jQuery で開発されたコードは、他のブラウザーでも動作します。 GitHub の初期の頃、jQuery を使用すると、小規模な開発チームはコードを各 Web ブラウザーに合わせて調整することなく、迅速にプロトタイプを作成し、新しい機能を開発できました。

jQuery のシンプルなインターフェイスに基づいて構築された拡張ライブラリは、GitHub.com フロントエンドの基本的な構成要素にもなりました: pjax (https://github.com/defunkt/jquery-pjax) と facebox ( https://github.com/defunkt/facebox)。

私たちは、このような便利で不可欠なライブラリを作成および保守してくれた John Resig と jQuery の貢献者を決して忘れません。

後の Web 標準

GitHub は、長年にわたって数百人のエンジニアを擁する企業に成長し、徐々に JavaScript コードの開発を担当する専任チームを設立しました。品質。私たちは技術的負債を除外してきましたが、依存関係によって技術的負債が増大し、最初はある程度の価値が得られることもありますが、その価値も時間の経過とともに減少します。

jQuery を、最新のブラウザーでサポートされる Web 標準の急速な進化と比較できます。

$(selector) パターンは、querySelectorAll();

を使用して置き換えることができます。

Element.classList を使用して CSS クラス名の切り替えを実装できるようになりました;

CSS は JavaScript の代わりにスタイル シートで定義されたビジュアル アニメーションをサポートするようになりました;

が使用できるようになりました Fetch Standard は $ を実行します.ajax リクエスト;

addEventListener() インターフェイスは十分に安定しており、プラットフォーム間で使用できます;

軽量ライブラリを使用してイベント委任パターンをカプセル化できます;

開発によりJavaScript 言語の場合、jQuery によって提供される構文糖の一部が冗長になりました。

さらに、チェーン構文は、私たちが望むコードの書き方を満たせません。

最後に、フローを使用して型に注釈を付け、ビルド時に静的型チェックを実行し始めましたが、ほとんどすべての jQuery メソッドが同じ結果を返すため、チェーン構文は静的分析には適していないことがわかりました。当時私たちが Flow を選択したのは、@flow 弱モードのような機能により、型なしのコード ベースに型を段階的に適用できるためです。

結局のところ、jQuery を削除するということは、Web 標準への依存度を高め、MDN Web ドキュメントをフロントエンド開発者にとっての事実上のデフォルトのドキュメントにし、将来的により回復力のあるコードを維持し、30 KB の依存関係を削減できることを意味します。バンドルから削除され、ページの読み込みと JavaScript の実行が高速化されます。

カスタム要素

近年宣伝されている新しいテクノロジーはカスタム要素です。これはブラウザにネイティブなコンポーネント ライブラリであり、ユーザーはダウンロードする必要がありません。 、余分なバイトを解析してコンパイルします。

2014 年から、v0 仕様に基づいていくつかのカスタム要素を作成しました。ただし、規格はまだ変化しているため、あまり力を入れていません。カスタム要素をより広範囲に採用し始めたのは、Web Components v1 仕様がリリースされ、Chrome と Safari に実装された 2017 年になってからです。

jQuery が削除される一方で、カスタム要素を抽出するパターンも検討しています。たとえば、モーダル ダイアログの表示に使用されるフェイスボックスを 要素 (https://github.com/github/details-dialog-element) に変換します。

当社の漸進的強化の哲学は、カスタム要素にも適用されます。これは、マークアップに動作を追加する前に、可能な限り多くのマークアップ コンテンツを保存することを意味します。たとえば、 はデフォルトで元のタイムスタンプを表示しますが、これは時刻をローカル タイム ゾーンに変換するためにアップグレードされますが、 の場合は、

要素に埋め込まれている場合、 JavaScript を使用せずにインタラクティブであり、アクセシビリティの強化によりアップグレードされました。

以上がgithub が jq を使用しない場合は何を使用すればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。