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

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

May 16, 2016 pm 03:53 PM

内部アーキテクチャと概念の観点から、現在の 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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? 独自のJavaScriptライブラリを作成および公開するにはどうすればよいですか? Mar 18, 2025 pm 03:12 PM

記事では、JavaScriptライブラリの作成、公開、および維持について説明し、計画、開発、テスト、ドキュメント、およびプロモーション戦略に焦点を当てています。

ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? ブラウザでのパフォーマンスのためにJavaScriptコードを最適化するにはどうすればよいですか? Mar 18, 2025 pm 03:14 PM

この記事では、ブラウザでJavaScriptのパフォーマンスを最適化するための戦略について説明し、実行時間の短縮、ページの負荷速度への影響を最小限に抑えることに焦点を当てています。

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか? Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? ブラウザ開発者ツールを使用してJavaScriptコードを効果的にデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:16 PM

この記事では、ブラウザ開発者ツールを使用した効果的なJavaScriptデバッグについて説明し、ブレークポイントの設定、コンソールの使用、パフォーマンスの分析に焦点を当てています。

誰がより多くのPythonまたはJavaScriptを支払われますか? 誰がより多くのPythonまたはJavaScriptを支払われますか? Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? ソースマップを使用して、マイナイドJavaScriptコードをデバッグするにはどうすればよいですか? Mar 18, 2025 pm 03:17 PM

この記事では、ソースマップを使用して、元のコードにマッピングすることにより、Minified JavaScriptをデバッグする方法について説明します。ソースマップの有効化、ブレークポイントの設定、Chrome DevtoolsやWebpackなどのツールの使用について説明します。

Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Console.log出力の違い結果:なぜ2つの呼び出しが異なるのですか? Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

初心者向けのタイプスクリプト、パート2:基本データ型 初心者向けのタイプスクリプト、パート2:基本データ型 Mar 19, 2025 am 09:10 AM

エントリーレベルのタイプスクリプトチュートリアルをマスターしたら、TypeScriptをサポートするIDEで独自のコードを作成し、JavaScriptにコンパイルできるはずです。このチュートリアルは、TypeScriptのさまざまなデータ型に飛び込みます。 JavaScriptには、NULL、未定義、ブール値、数字、文字列、シンボル(ES6によって導入)とオブジェクトの7つのデータ型があります。 TypeScriptはこれに基づいてより多くのタイプを定義し、このチュートリアルではすべてを詳細に説明します。 ヌルデータ型 JavaScriptのように、Typescriptのnull

See all articles