すべてのフロントエンド エンジニアには、感情であれ信念であれ、お気に入りの JavaScript フレームワークがあると思います。JavaScriptフレームワークは、便利な開発だけでなく、jquery の優雅なシンプルさ、または Yui の魔法など、純粋な論理的な美しさももたらします。サンドボックス、それらはすべて私たちに無限の想像力を与えてくれます。ただし、js フレームワークはすべての面で完璧を達成することは不可能です。たとえば、オブジェクト指向におけるjqueryの譲歩や、パフォーマンスにおける yui の犠牲はすべて、ある種の不完全な美しさと理想的なリアリズムを人々に伝えます。今日は、yui3 の全体像をより深く理解し、その利点を最大限に活用できるように、フレームワーク設計において yui3 によって行われたこれらの犠牲と譲歩を見てみましょう。
1. 種子のワンステップまたは顆粒化
いわゆるワンステップ シードとは、プロトタイプや jquery などのシード ファイルのスクリプト タグをページに導入するだけで済み、prototype.js または jquery.js を導入するだけで DOM 操作がカプセル化され、イベントなどをファイルに保存し、できるだけ小さくするようにしてください。そうすることの利点は明らかです。フレームワークを使用するのは非常に簡単です。ただし、Yui はこれらの機能を階層的かつ詳細な設計に分割し、概念的に「コア」、「ツール」、「コンポーネント」を抽象化しました。それぞれの小さな機能はファイルに配置され、必要に応じて単独で参照する必要があります。 yui のドキュメントではこの方法が採用されていますが、この設計は明らかに jquery ほど初心者には優しくなく、小さな関数を実装するには 3 つまたは 4 つの js ファイルを導入する必要があります。 yui がこれを行う理由は 2 つあります。1 つは、yui が大きすぎること、そして 1 つのファイルにすべての関数を入れるのは少し信頼できないことです。2 つ目は、yui が動的読み込みフレームワークの設計に道を開くことです。
2. 手動導入または動的ロード
ページに js を書き込む従来の方法は、js ファイルをスクリプト タグのパスとしてページに直接書き込むことです。yui を使用してこの方法でページを導入することもできますが、yui では動的読み込みのためにローダーを使用することをお勧めします。動的にロードされるスクリプトの起源は非常に複雑です。現時点では、主に 3 つの理由があります。まず、たとえリクエストが 304 であっても、ページ内の手書きの js タグは、動的にロードされるファイルを必要としません。リクエストがキャッシュされた後に実際の http リクエストを開始します。第 2 に、動的ロードによりオンデマンドのロードが実現され、js ファイル間の依存関係に応じて重複を排除して並べ替えることができるため、開発者は特別な注意を払う必要があります。第三に、動的読み込みはページ コードのセマンティクスに役立ち、開発者は「取得方法」を気にせずに「必要なもの」だけを気にすることができます。プロジェクトが肥大化し、メンテナンスコストがますます高くなった場合、これらの中小規模の技術は大きなメリットをもたらします。
3. 論理的な起動のための単一の入り口またはサンドボックス
ページ内で JS ロジックを開始するときは、通常、それを onDomReady のようなメソッドに置きます。ページ内に複数のロジックがある場合はどうすればよいでしょうか。たとえば、A はロジック A を実装しており、ページのコードは次のようになります。
<script src="logicA.js" />
<スクリプト>
$.onDomReady(function(){
___LogicA.start();
});
</script>
このコードは通常、ページの最後に記述されます。このロジックに伴う HTML コードはページのどこかに埋め込まれています。このとき、b は最初にこのコードをページに追加する必要があります。最後に、次のように変更します。
<script src="logicA.js" />
<script src="logicB.js" />
<スクリプト>
$.onDomReady(function(){
___LogicA.start();
___LogicB.start();
});
</script>
同様に、B ロジックに付随する HTML コードもページのどこかに埋め込まれています。js ロジックとそれに付随する html コードが分離されているため、関数を削除する際に html は削除されますが、js は忘れられることがよくあります。 . 、または js を削除して html を削除し忘れると、コードを再利用するときに問題が発生します。同様に、デバッグするとき、エンジニアは、2 つのコードが同じファイル内にある場合でも、2 つのウィンドウを開いて、それぞれ js と html に焦点を当てる必要があります。この場合、次のようにコードを記述するとよいでしょう。
このコーディング方法はまさにYui氏が提唱する、いわゆるサンドボックスであり、それぞれのロジックがサンドボックスの中に収められ、互いに干渉することなく独自の処理を行います。第三者がコードを参照すると、これが典型的な HTML 構造と起動ロジック js を含む独立した機能ブロックであることがすぐにわかり、再利用したい場合はブロック全体をコピーするだけで済みます。
<!–論理 HTML コード スニペット–>
<script src="logicA.js" />
<スクリプト>
$.onDomReady(function(){
___LogicA.start();
});
</script>
…
<!–B 論理 HTML コード スニペット–>
<script src="logicB.js" />
<スクリプト>
$.onDomReady(function(){
___LogicB.start();
});
</script>