ホームページ ウェブフロントエンド jsチュートリアル 3 つの MVVM フレームワーク (vue、angular、avalon_Others) の長所と短所

3 つの MVVM フレームワーク (vue、angular、avalon_Others) の長所と短所

May 16, 2016 pm 03:03 PM
angular vue

この記事の主な内容は、公式ドキュメントを参照して要約されています。

Vue.js

Vue.js @You Yuxi は、Web インタラクティブ インターフェイスを作成するためのライブラリであり、合理化された MVVM です。技術的な観点から見ると、Vue.js は MVVM モデルの ViewModel 層に焦点を当てています。双方向のデータ バインディングを通じてビュー レイヤーとモデル レイヤーを接続します。実際の DOM カプセル化と出力形式は、ディレクティブとフィルターに抽象化されます。他のライブラリと比較すると、Vue.js は小さいながらも美しいライブラリであり、作者の主な目的は、API を介してリフレクティブ データ バインディングとコンポーザブル ビュー コンポーネントを作成することであると、作者の考えが非常に明確であると感じます。

利点:

シンプル: 公式ドキュメントは非常に明確で、Angular よりも学びやすいです。
高速: 非同期バッチ モードで DOM を更新します。
構成: 分離された再利用可能なコンポーネントでアプリケーションを構成します。
コンパクト: ~18kb min+gzip、依存関係なし。
強力: 依存関係を宣言しない式と計算されたプロパティ。
モジュールに優しい: NPM、Bower、または Duo を通じてインストールできます。すべてのコードが Angular のさまざまな規制に従う必要がなく、使用シナリオはより柔軟です。

欠点:

Newborn: Vue.js は、2014 年 3 月 20 日にリリースされた新しいプロジェクト、バージョン 0.10.0 リリース候補です。github の最新バージョンはバージョン 0.11.4 で、Angular ほど成熟していません。
影響はそれほど大きくありません。Google で調べたところ、Vue.js の多様性や豊富さは他の有名なライブラリに比べて劣っていることがわかりました。
IE8 はサポートしていません: (笑)、AngularJS 1.3 も IE8 のサポートを放棄しましたが、@ Stu Zhengmei 先生の avalon は IE6+ をサポートしているため、最適化するために多大な努力が必要です。これは、IE8 をサポートする必要があるプロジェクトにとっては良くありませんが、これは Web フロントエンド開発の傾向でもあり、IE の下位バージョンは、フロントエンドの考え方に準拠するのではなく、歴史の舞台から撤退する必要があります。古いバージョンを使用している人 アップグレードしない人。 @玉博先生がおっしゃっていましたが、とても良いことだと思います。「最近、IE6 と 7 をサポートするのは機能ではなくなりましたが、残念です。私たちは Alipay が IE6 と 7 をサポートしないように一生懸命取り組んでいます。楽しみにしています。」もっと多くの兄弟たちに参加してもらいたい。」

AngularJS

AngularJS は最近非常に人気があり、多くのフォロワーがいます。スーパーヒーロー的な JavaScript MVW フレームワーク
公式声明は非常にシンプルで、「完全に JavaScript で記述されたクライアント側テクノロジー。他の長年確立された Web テクノロジー (HTML、CSS、JavaScript) と組み合わせて使用​​することで、Web アプリケーション開発をこれまでよりも簡単かつ迅速に行うことができます。」としています。学んでみると、新たな特殊効果の数々に魅了されると思います。

利点:

動的ビュー: js がこの方法で HTML の属性を拡張できるとは考えたこともありませんでしたが、AngularJs は静的 HTML に多くの拡張機能を追加し、HTML を生き生きとさせているように感じます。
完璧: テンプレート、双方向データ バインディング、ルーティング、モジュール化、サービス、依存関係注入、その他の機能を含む、比較的完全なフロントエンド MVW フレームワークです。テンプレートは強力で豊富な宣言型で、豊富な Angular が付属しています。説明書。 。
Google のメンテナンス: AngularJS は間違いなく強力なバックエンドを備えており、プロモーションとメンテナンスの点で Vue.js や avalon よりも明らかな利点があり、コミュニティも非常に活発であり、その開発をうまく推進できます。
AngularJS と Ionic: Ionic: 高度な HTML5 ハイブリッド モバイル アプリ フレームワーク、これら 2 つは良い友達です。Ionic は AngularJS を使用して、リッチで強力なアプリケーションの開発に最適なフレームワークを作成します。前回、Yu Zhihu は Web アプリ開発に関する関連質問に答えましたが、どのフレームワークとパッケージ化されたアプリ プラットフォームが最高のパフォーマンスと効率を備えていますか? - Tang Wei の答え、詳細はここでご覧いただけます。

欠点:

規模が大きく包括的: 私にとって、学習曲線は非常に曲がりくねっていて、理解するのが困難です。
覆して書き直す: 少し前に、AngularJS 2.0 が以前のフレームワークを覆して書き直すことを発見しました。これらは基本的に 2 つのフレームワークであるということです。2.0 のリリース後には、次のことが必要になります。 「最初から始める」と言いましたが、「戻ってきてください」とも言いました。/article/79637.htmこの記事では、AngularJS2.0 の変更点について非常に詳しく説明しています。
IE8以下には対応していないようです。2.0はリリースされるまで待ちましょう。

Avalon.js

Avalon.js は、@ Stu Zhengmei によって作成されたシンプルで使いやすいミニ MVVM フレームワークで、2012 年 9 月 15 日に初めてリリースされました。同じビジネス ロジックに対するさまざまなビューのプレゼンテーションの問題を解決するために開発されました。 。教師が彼の Avalon.js を宣伝し、多くのチュートリアルを公開しているのをよく見かけますが、これは間違いなく Avalon.js を学習する中国の人々にとって非常に便利です。

メリット

使い方は簡単で、HTMLでバインディングを追加し、JSでavalon.defineでViewModelを定義し、avalon.scanメソッドを呼び出すだけで動きます。
IE6 (他の MVVM フレームワーク、KnockoutJS(IE6)、AngularJS(IE9)、EmberJS(IE8)、WinJS(IE9))、および avalon.mobile と互換性があり、IE10 などの新しいバージョンのブラウザーでより効率的に実行できます
依存関係なし、5000 行未満、圧縮後のサイズは 50KiB 未満
パイプ文字スタイルのフィルター関数をサポートし、フォーマットされた出力を容易にします
ローカル更新の粒度は、テキスト ノード、機能ノード
に調整されました。 操作対象のノードは最初のスキャンでビュー更新関数にバインドされてキャッシュされているため、セレクターが現れる余地はありません。
DOM 操作コードをほぼ絶滅させる
CSS のような重複カバレッジ メカニズムを使用して、各 ViewModel パーティションがページを交互にレンダリングできるようにします
ノードが削除されると、対応するビュー更新関数がインテリジェントにアンロードされてメモリを節約します
データを操作するということはDOMを操作することを意味し、ViewModelに対する操作はViewとModelに同期されます
独自の AMD モジュール ローダーが付属しているため、他のローダーと統合する必要がありません。

デメリット

1. 配列フィルタリングは angular ほど包括的ではありません。ms-text、ms-html にのみ使用できます。

2. 英語の文書がなく、宣伝も制限されています

3. OniUI のスキンは十分に美しくありません。boostrap に協力する必要があると多くの人が言いますが、コミュニティの誰もこれを率先して実行しません。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、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衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

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

SublimeText3 中国語版

SublimeText3 中国語版

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

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

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

VueでBootstrapの使用方法 VueでBootstrapの使用方法 Apr 07, 2025 pm 11:33 PM

vue.jsでBootstrapを使用すると、5つのステップに分かれています。ブートストラップをインストールします。 main.jsにブートストラップをインポートしますブートストラップコンポーネントをテンプレートで直接使用します。オプション:カスタムスタイル。オプション:プラグインを使用します。

VUEのボタンに関数を追加する方法 VUEのボタンに関数を追加する方法 Apr 08, 2025 am 08:51 AM

HTMLテンプレートのボタンをメソッドにバインドすることにより、VUEボタンに関数を追加できます。 VUEインスタンスでメソッドを定義し、関数ロジックを書き込みます。

vue.jsでJSファイルを参照する方法 vue.jsでJSファイルを参照する方法 Apr 07, 2025 pm 11:27 PM

vue.jsでJSファイルを参照するには3つの方法があります。タグ;; mounted()ライフサイクルフックを使用した動的インポート。 Vuex State Management Libraryを介してインポートします。

VueでWatchの使用方法 VueでWatchの使用方法 Apr 07, 2025 pm 11:36 PM

Vue.jsの監視オプションにより、開発者は特定のデータの変更をリッスンできます。データが変更されたら、Watchはコールバック関数をトリガーして更新ビューまたはその他のタスクを実行します。その構成オプションには、すぐにコールバックを実行するかどうかを指定する即時と、オブジェクトまたは配列の変更を再帰的に聴くかどうかを指定するDEEPが含まれます。

Vue Multi-Page開発とはどういう意味ですか? Vue Multi-Page開発とはどういう意味ですか? Apr 07, 2025 pm 11:57 PM

VUEマルチページ開発は、VUE.JSフレームワークを使用してアプリケーションを構築する方法です。アプリケーションは別々のページに分割されます。コードメンテナンス:アプリケーションを複数のページに分割すると、コードの管理とメンテナンスが容易になります。モジュール性:各ページは、簡単に再利用および交換するための別のモジュールとして使用できます。簡単なルーティング:ページ間のナビゲーションは、単純なルーティング構成を介して管理できます。 SEOの最適化:各ページには独自のURLがあり、SEOに役立ちます。

Vueによる前のページに戻る方法 Vueによる前のページに戻る方法 Apr 07, 2025 pm 11:30 PM

vue.jsには、前のページに戻る4つの方法があります。$ router.go(-1)$ router.back()outes< router-link to ="/" Component Window.history.back()、およびメソッド選択はシーンに依存します。

VUEトラバーサルの使用方法 VUEトラバーサルの使用方法 Apr 07, 2025 pm 11:48 PM

Vue.jsには配列とオブジェクトを通過するには3つの一般的な方法があります。V-Forディレクティブは、各要素をトラバースしてテンプレートをレンダリングするために使用されます。 V-BindディレクティブをV-Forで使用して、各要素の属性値を動的に設定できます。 .mapメソッドは、配列要素を新しい配列に変換できます。

Vueにタグをジャンプする方法 Vueにタグをジャンプする方法 Apr 08, 2025 am 09:24 AM

VUEでタグのジャンプを実装する方法には、HTMLテンプレートでAタグを使用してHREF属性を指定する方法が含まれます。 VUEルーティングのルーターリンクコンポーネントを使用します。 JavaScriptでこれを使用します。$ router.push()メソッド。パラメーターはクエリパラメーターに渡すことができ、ルートは動的ジャンプのルーターオプションで構成されています。

See all articles