フロントエンドjsフレームワークの概要と使い方の解説

今日はフロントエンドjsフレームワークの概要と使い方を紹介します。 10個のフロントエンドフレームワークライブラリをまとめました。では、これらのフレームワークライブラリの違いとハイライトを1つずつ紹介します。

1. フロントエンド フレームワーク ライブラリ:

1.Zepto.js

説明: Zepto は、最新の高度なブラウザー用の軽量の JavaScript ライブラリです。jquery と同様の API を備えています。 jquery を使用できる場合は、zepto も使用できます。私も Tencent の友人とのチャットを通じて Zepto について知りましたが、基本的な理解しかありませんでした。

2.SUI Mobile

説明: SUI Mobile は、Framework7 に基づいて開発された UI ライブラリのセットです。非常に軽量で美しく、CDN ファイルを導入するだけで使用できます。iOS 6.0 以降および Android 4.0 以降と互換性があり、クロスプラットフォームの Web アプリの開発に非常に適しています。

用途: ご覧のとおり、ワイヤレス側の Web アプリの開発に使用されます。

3.Node.Js

説明: Node.js は Javascript 実行環境 (ランタイム) です。実際、これは Google V8 エンジンをカプセル化しています。 V8 エンジンは Javascript を非常に高速に実行し、非常に優れたパフォーマンスを発揮します。 Node.js は、いくつかの特殊な使用例を最適化し、ブラウザ以外の環境で V8 をより適切に実行できるようにする代替 API を提供します。 Node.js は Chrome JavaScript ランタイム上に構築されたプラットフォームで、応答が速く、拡張が容易な Web アプリケーションを簡単に構築するために使用されます。 Node.js はイベント駆動型のノンブロッキング I/O モデルを使用して軽量かつ効率的であるため、分散デバイス上でデータ集約型のリアルタイム アプリケーションを実行するのに最適です。

簡単に言うと、Node.js はサーバー側で実行される JavaScript です。

Node.js は、Chrome JavaScript ランタイム上に構築されたプラットフォームです。

Node.js は、Google の V8 エンジンに基づくイベント駆動型 I/O サーバーサイド JavaScript 環境です。V8 エンジンは JavaScript を非常に高速に実行し、非常に優れたパフォーマンスを発揮します。

目的:

1. RESTful API

これは、API をリクエストし、データを整理するだけで、NodeJS にとって最も理想的なアプリケーション シナリオです。返してください。基本的には、データベースからいくつかの値を検索し、それらを応答に組み立てるだけです。応答は少量のテキストであり、受信リクエストも少量のテキストであるため、トラフィックは高くならず、最も多忙な企業の API ニーズも 1 台のマシンで処理できます。

2. Web アプリケーションの UI レイヤーを統合する

現在の MVC アーキテクチャでは、ある意味、Web 開発には 2 つの UI レイヤーがあり、1 つは最終的にブラウザーで表示されるもので、もう 1 つはサーバー側で行われます。ページの生成と結合。

このアーキテクチャが良いか悪いかについては議論しませんが、フロントエンドとバックエンドの依存関係をより適切に分離できる、サービス指向アーキテクチャという別のプラクティスもあります。すべての主要なビジネス ロジックが REST 呼び出しにカプセル化されている場合、上位層はこれらの REST インターフェイスを使用して特定のアプリケーションを構築する方法のみを考慮する必要があることを意味します。これらのバックエンド プログラマは、特定のデータがあるページから別のページにどのように渡されるかを気にしません。ユーザー データの更新が Ajax 経由で非同期的に取得されるか、ページの更新によって取得されるかは気にしません。

3. 大量の Ajax リクエストを含むアプリケーション

たとえば、各ユーザーが異なるページを参照するパーソナライズされたアプリケーションでは、キャッシュが無効であり、ページがロードされるときに Ajax リクエストを開始する必要があります。多数の同時リクエスト。つまり、NodeJS は、同時実行性が高く、I/O が集中し、ビジネス ロジックが少量であるシナリオでの使用に適しています。

4.angular.Js

説明: AngularJS[1] は 2009 年に誕生し、Misko Hevery らによって作成され、後に Google に買収されました。これは、多くの Google 製品で使用されている優れたフロントエンド JS フレームワークです。 AngularJS には多くの機能がありますが、最もコアとなる機能は、MVVM、モジュール化、自動双方向のデータバインディング、セマンティックタグ、Dependency Injectionなどです。

目的: 説明することで、AngularJS、MVVM、モジュール化、自動双方向データバインディングなどの本当の目的を理解できるはずです。単純な dom 操作に加えて、Js プログラミングの力も反映できます。もちろん、用途は状況に応じて変える必要があります。

5.JQuery Mobile

説明: Query Mobile は、携帯電話およびタブレット デバイス上の jQuery のバージョンです。 jQuery Mobile は、jQuery コア ライブラリを主流のモバイル プラットフォームに導入するだけでなく、完全で統合された jQuery モバイル UI フレームワークもリリースします。世界の主流のモバイル プラットフォームをサポートします。 jQuery Mobile 開発チームは次のように述べています: 私たちはこのプロジェクトを開発することに非常に興奮しています。モバイル Web には、開発者が真のモバイル Web サイトを開発できるようにするクロスブラウザー フレームワークが必要です。

目的: jQuery Mobile は、モバイル Web アプリケーションを作成するためのフレームワークです。

jQuery Mobile は、すべての一般的なスマートフォンやタブレットで動作します。

jQuery Mobile は HTML5 と CSS3 を使用して、できるだけ少ないスクリプトでページをレイアウトします。

6.requirejs

説明: RequireJS の目標は、コードのモジュール化を促進することであり、従来の

とは異なるアプローチを使用します。

<script> タグのスクリプト読み込みステップ。これを使用してコードを高速化し、最適化できますが、主な目的はコードをモジュール化することです。スクリプトを使用するときは、URL アドレスの代わりにモジュール ID を使用することをお勧めします。 </script>

RequireJS は、baseUrl を基準とした相対アドレスを持つすべてのコードを読み込みます。 ページのトップレベルの <script> タグには、スクリプト読み込みプロセスを開始するために require.js によって使用される特別な属性 data-main が含まれており、baseUrl は通常、この属性と一致するディレクトリに設定されます。 </script>

目的: モジュール式の動的読み込み。

7.Vue.js

説明: Vue.js は、インタラクティブな Web インターフェイスを構築するためのライブラリです。 MVVM データ バインディングと、シンプルで柔軟な API を備えた構成可能なコンポーネント システムを提供します。技術的に言えば、Vue.js は MVVM パターンのビュー モデル層に焦点を当てており、双方向のデータ バインディングを通じてビューとモデルを接続します。実際の DOM 操作と出力書式設定は、ディレクティブとフィルターに抽象化されます。他の MVVM フレームワークと比較して、Vue.js は簡単に始めることができます。

8.backbone.js

説明: Backbone は、複雑な Javascript アプリケーションのモデル、コレクション、ビューの構造を提供します。モデルはキーと値のデータとカスタム イベントをバインドするために使用され、コレクションには列挙可能な関数の豊富な API が関連付けられ、ビューは イベント処理 関数を宣言し、RESTful JSON インターフェイスを介してアプリケーションに接続できます。

9. React

説明: React は、Facebook と Instagram がユーザー インターフェイスを作成するために使用する JavaScript ライブラリです。多くの人は React を MVC の V (ビュー) と考えています。私たちは、時間の経過とともにデータが変化する大規模なアプリケーションを構築するという問題を解決するために React を作成しました。この目標を達成するために、React は次の 2 つの主なアイデアを採用しています。

10.Ionic

説明: Ionic は、CSS フレームワークと Javascript UI ライブラリの両方です。多くのコンポーネントはその魔法を機能させるために Javascript を必要としますが、多くのコンポーネントはコーディングを必要とせず、AngularIonic 拡張機能などのフレームワーク拡張機能を介して簡単に使用できます。

Ionic はビュー コントロール パターンに従っており、その一般的な理解は Cocoa touch フレームワークに似ています。ビュー コントロール パターンでは、インターフェースのさまざまな部分をサブビュー、または他のビューコントローラーを含むサブビューに分割します。次に、ビュー コントローラーは内部ビューを「駆動」して、対話機能と UI 機能を提供します。この好例は、タブ バーをクリックして一連のビジュアル パネルを切り替える処理を行うタブ バー ビュー コントローラーです。

Ionic で使用できるビュー コントローラーと Javascript ユーティリティについては、API ドキュメントを参照してください。

Ionic は現在、最も有望な HTML5 モバイル アプリケーション開発フレームワークです。 SASS を使用してアプリケーションを構築します。SASS は、開発者が強力なアプリケーションを開発するのに役立つ多くの UI コンポーネントを提供します。 JavaScript MVVM フレームワークと AngularJS を使用してアプリケーションを強化します。データの双方向バインディングを提供し、Web およびモバイル開発者にとってその使用が一般的な選択肢になります。

これらの事例を読んだ後は、その方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連書籍:

html5 での DOM プログラミングの実装手順

h5 を使用して WeChat 支払いプロセスを作成する実装手順

Canvas を使用して時計を作成する手順

以上がフロントエンドjsフレームワークの概要と使い方の解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。