ホームページ > 記事 > ウェブフロントエンド > 3 つの MVVM フレームワーク (vue、angular、avalon_Others) の長所と短所
この記事の主な内容は、公式ドキュメントを参照して要約されています。
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 に協力する必要があると多くの人が言いますが、コミュニティの誰もこれを率先して実行しません。