すべてのフロントエンド エンジニアには、感情であれ信念であれ、お気に入りの 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 つ目は、動的にロードされるフレームワーク設計への道を開くことです。
2. 手動導入または動的ロード
ページに js を書き込む従来の方法は、js ファイルをスクリプト タグのパスとしてページに直接書き込むことです。yui を使用してこの方法でページを導入することもできますが、yui では動的読み込みのためにローダーを使用することをお勧めします。動的にロードされるスクリプトの起源は非常に複雑です。現時点では、主に 3 つの理由があります。1 つは、リクエストが 304 であっても、HTTP リクエストを占有することです。動的にロードされたファイルがキャッシュされた後の実際の http リクエスト。第 2 に、動的ロードはオンデマンドロードを実現でき、js ファイルに基づいて実行できます。相互依存関係の重複排除と並べ替え、手書きのタグを含む 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>