ホームページ  >  記事  >  ウェブフロントエンド  >  JavaScriptフレームワークのフレームワーク分類と主な機能 設計_JavaScriptスキル

JavaScriptフレームワークのフレームワーク分類と主な機能 設計_JavaScriptスキル

WBOY
WBOYオリジナル
2016-05-16 15:53:361181ブラウズ

内部アーキテクチャと概念の観点から、現在の JavaScript フレームワークは 5 つのカテゴリに分類できます。

最初は、名前空間指向のクラス ライブラリまたはフレームワーク です。配列を作成する場合は new Array() を使用し、オブジェクトを生成する場合は new Object() を使用します。これは完全に Java スタイルです。したがって、特定のオブジェクトをベースとして使用し、それにオブジェクトと二次オブジェクト属性を継続的に追加してコードを整理し、ピラミッドのように構築します。初期の頃は、これが YUI、EXT を表していました (したがって、すべてのダイナミックな企業がそうであるわけではありません)。まだ使用しています)

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

3 番目のタイプは、jQuery で表されるセレクター指向のフレームワークです。フレームワークまたはライブラリ本体全体が特別な配列のようなオブジェクトであり、集中操作が容易になります (セレクターが突然 N 個の要素ノードを選択したため)。 )なので、一緒に処理されました。 jQuery にはいくつかの優れた点があります:

「新しいインスタンス化なし」テクノロジー。$(expr) はインスタンスを返します。明示的な new は必要ありません。
最初にすべてのアクセス ルールを設定します;
データキャッシュシステム。このようにして、ノード イベントを割り当てることができます。
IIFEも発見されました

4 番目のタイプは、ローダーによって接続されるフレームワーク であり、複数の JavaScript ファイルがあり、各 JavaScript ファイルは一定の規則に従って記述されます。その中で最も有名なのはAMDです。モジュール化は、JavaScript が産業化に向かって進んでいることを示しています。「複雑なソフトウェアを煩雑にせずに作成する唯一の方法は、明確なインターフェイスを定義し、いくつかのモジュールを結合することです。この方法では、ほとんどの問題がローカルでのみ発生するため、依然として問題が発生します。全体に影響を与えることなく、局所的な改善と最適化が行われることが期待されます。「Dojo、YUI、Kissy、qwrap、mass、(requirejs、Seajs) など、多くの企業内部フレームワークは基本的にこのアーキテクチャを採用しています。

5 番目のタイプは、明確な階層化アーキテクチャを備えた MV* です。最初は JavaScript MVC (現在は Canjs と呼ばれています)、backbone.js、spinejs で、次に MVVM フレームワークとより一致しています。たとえば、knockout、emberm、angular、avalon、winjs などです。 MVVM フレームワークでは、元の DOM 操作が宣言的バインディングに置き換えられ、フレームワークによって自由に処理されるため、ユーザーはビジネス コードだけに集中できます。

JavaScriptフレームワークの主な機能

jQuery フレームワーク クラス ライブラリのモジュール部分は、主に github 上のソース コードに基づいており、基本的にはモジュールと JavaScript ファイルです。DOM 操作に焦点を当てるという jQuery の考えは最初から正しく、今後もそうなります。今後も互換性を向上させ続けます。数年にわたる開発を経て、jQuery の巨大なプラグインと完全なバグ送信チャネルにより、パフォーマンスが向上し続けます。

Prototype.js初期の王様、4つの部分に分かれています。

言語拡張
DOM 拡張子
Ajax 部分
放棄された部分、新しいバージョンでは、元の機能を実現するために他の方法が使用されます

Prototype.js には、基本的なデータ型や言語から借用した「クラス」など、幅広い言語拡張機能があります。このうち、Enumerable は単なる通常のメソッド パッケージですが、ObjectRange、PeriodicalExecuter、および Templat は (コミュニティの貢献による) Class クラス ファクトリを使用して生成されます。

mootoolsAPI の設計が非常にエレガントで、公式 Web サイトには高品質のプラグインが多数あるため、プロトタイプ拡張機能に対する反対の波の中でも衰えることはありません。

Rightjs: プロトタイプ拡張用のもう 1 つのフレームワークである MochiKit は、非常にユニークで、トップ 10 フレームワークにランクされる Python スタイルのフレームワークです。
Ten: Prototype.js の影響を受けて amachan によって開発された、有名な日本のブログ コミュニティ Hatena の Javascript フレームワークは、スペースにちなんで名付けられたフレームワークの最初の例です。モジュール開発。 詳細な比較の後、次のフレームワークの機能について簡単に結論を導き出すことができます

对基本数据的操作是基础,如jQuery提供的trim camelCase each map等方法,Prototype.js等入侵式框架则在原型上添加camelize等方法
类型的判定比不可少,常见的形式是jsXXX系列
选择器,domReady Ajax是现代框架的标配
DOM操作是重中之重,节点的遍历,样式操作,属性操作也属于它的范畴
现在主流的事件系统都支持事件代理
数据的缓存与处理,目前浏览器也支持data-属性进行操作,但不好用,需要框架封装
动画引擎
插件的易开发和扩展性
提供诸如Deferred这样处理异步的解决方案
即使不专门提供一个类工厂,也应该存在一个名为extend或mixin的方法对对象进行扩展。jQuery虽然没有类工厂,但在jQuery UI中也不得不增加一个,可见其重要性。
自从jQuery出来一个名为noConflict的方法,新兴的框架都带此方法,以求狭缝中生存。
许多框架非常重视Cookie操作。
以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。