JavaScript フレームワークの分類についての簡単な説明_基礎知識

現在のJavaScriptフレームワークは、内部アーキテクチャとコンセプトから分けると5つのカテゴリーに分類できます。

タイプ 1

new Array() を使用した配列の作成、new Object() を使用したオブジェクトの生成など、名前空間指向のクラス ライブラリまたはフレームワークの出現は完全に Java スタイルであるため、常に特定のオブジェクトをルートとして使用できます。オブジェクト属性またはセカンダリ オブジェクト属性を追加してコードを整理し、ピラミッドのように積み上げます。代表作は初期のYUI、EXTなど。

タイプ 2

登場したのは、有名な Prototype や mootools、Base2、Ten などのクラス ファクトリ指向のフレームワークです。基本的に、最も基本的な名前空間を除いて、他のモジュールはクラス ファクトリから派生したクラス オブジェクトです。特に mootools 1.3 では、すべての型が Type 型にカプセル化されます。

タイプ 3

は、jQuery で表されるセレクター指向のフレームワークです。フレームワークまたはライブラリ本体全体は特別な配列オブジェクトであり、集中操作が容易になります。セレクターは通常、一度に N 個の要素ノードを選択するため、それらはまとめて処理されます。 jQuery にはいくつかの優れた機能が含まれています。「新規インスタンス化なし」テクノロジー、$(expr) は明示的に新規作成せずにインスタンスを返します。すべてのアクセス ルールを最初に設定します。データ キャッシュ システムです。このようにして、ノードのイベントをコピーできます。さらに、IIFE (Immediately-Invoked Function Expression) も発見されました。

タイプ 4

はローダーと直列に接続されたフレームワークであり、それらはすべて複数の JavaScript ファイルを持ち、各 JavaScript ファイルは一定のルールに従って記述されます。この中で最も有名なのは AMD です。モジュール性は、JavaScript が産業化に向かって進んでいることを示しています。 『The Art of Unix Programming』にリストされている多くの「黄金律」の最初はモジュールで、「複雑なソフトウェアを失敗せずに書く唯一の方法は、明確に定義されたインターフェイスを持つ多数の単純なモジュールを組み合わせることであり、最初に、ほとんどの問題は局所的にのみ発生するため、全身に影響を与えることなく局所的な領域を改善または最適化することがまだ期待されています。」 Dojo、YUI、kissy、qwrap、mass など、多くの企業内フレームワークは基本的にこのアーキテクチャを採用しています。

タイプ 5

これは、明確な階層構造を備えた MV* フレームワークです。 1 つ目は JavaScript MVC (現在は CanJS と呼ばれています)、backbonejs、spinejs、そして実際のフロントエンドにより近い MVVM フレームワーク (Knockout、ember、angular、avalon、winjs など) です。 MVVM フレームワークでは、元の DOM 操作が宣言的バインディングに置き換えられ、フレームワーク自体によって処理されるため、ユーザーはビジネス コードのみに集中する必要があります。

以下はフレームワークの特徴に関する結論です。

基本的なデータ型の操作が基本です。たとえば、jQuery では、trim、camelCase、each、map などのメソッドが提供されており、Prototype.js などの侵入型フレームワークの場合は、プロトタイプに Camelize などのメソッドが追加されます。

タイプの決定は必須であり、一般的な形式は isXXX シリーズです。

セレクター、domReady、および Ajax は、最新のフレームワークの標準機能です。

DOM 操作が最優先され、ノード トラバーサル、スタイル操作、属性操作もその範囲に属します。細分化されるかどうかはフレームワークの規模によって異なります。

ブラウザのスニッフは廃止され、機能検出が使用されています。ただし、機能の検出には依然として制限があります。レンダリングのバグ、セキュリティ ポリシー、または特定のブラウザ バージョンの特定のバグの修正を対象とする場合は、依然としてブラウザ スニッフィングを使用する必要があります。ただし、フレームワークのコアを削除して、モジュールまたはプラグインとして単独で使用する必要があります。

現在、主流のイベント システムはイベント プロキシをサポートしています。

データのキャッシュと処理。現在、ブラウザーはこの目的のために data-* 属性も提供していますが、これらは使いにくく、フレームワークによるさらなるカプセル化が必要です。

アニメーション エンジン。フレームワークが Prototype.js のような script.aculo.us のようなトップレベルのアニメーション フレームワークによってサポートされていない限り、それも追加することをお勧めします。

プラグインの簡単な開発と拡張性。

非同期を処理するための Deferred などのソリューションを提供します。

クラス ファクトリが特に提供されていない場合でも、オブジェクトを拡張するための extend または mixin という名前のメソッドが必要です。 jQuery にはクラス ファクトリがありませんが、jQuery UI にクラス ファクトリを追加する必要があることから、その重要性がわかります。

jQuery が noConflict と呼ばれるメソッドを発表して以来、新興フレームワークは狭いギャップで生き残るためにこのメソッドを採用しています。

多くのフレームワークは Cookie の操作を非常に重要視しています。