様々なフロントエンドフレームの長所と短所

現在利用可能なWebフロントエンドのUIフレームワーク:ブートストラップ、jqueryUI、財団、セマンティックUI、ピュア、UIKitの上の要素、
フレーム、現在入手可能なJSのWebフロントエンド:jQueryの、Zepto、VueJS、AngularJS 、ReactJS、バックボーン、残り火

、jQueryの

利点:

1、轻量级:大小只有18KB。
             2、强大的选择器:JQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及JQuery独创的高级而且复杂的选择器,另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器。
             3、出色的DOM操作的封装:JQuery封装了大量常用的DOM操作
             4、可靠的事件处理机制:JQuery的事件处理机制吸收了JavaScript专家Dean Edwards编写的事件处理函数的精华,是的JQuery在处理事件绑定的时候相当可靠。在预留退路、循序渐进以及非入侵式编程思想方面,JQuery也做得非常不错。
             5、完善的Ajax:JQuery将所有的Ajax操作封装到一个函数$.ajax()里,使得开发者处理Ajax的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。
             6、不污染顶级变量:JQuery只建立一个名为JQuery的对象,其所有的函数方法都在这个对象之下。其别名$也可以随时交流控制权,绝对不会污染其他的对象。该特性是JQuery可以与其他JavaScript库共存,在项目中放心地引用而不需要考虑到后期的冲突。
             7、出色的浏览器兼容性:JQuery能够在IE6.0+,FF 2+,Safari2.+和Opera9.0+下正常运行。JQuery同时修复了一些浏览器之间的的差异,使开发者不必在开展项目前建立浏览器兼容库。
             8、链式操作方式:JQuery中最有特色的莫过于它的链式操作方式——即对发生在同一个JQuery对象上的一组动作,可以直接接连写无需要重复获取对象。这一特点使得JQuery的代码无比优雅。
             9、隐式迭代:当用JQuery找到带有“.myClass”类的全部元素,然后隐藏他们时。无需循环遍历每一个返回的元素。相反,JQuery里的方法都被设计成自动操作的对象集合,而不是单独的对象,这使得大量的循环结构变得不再必要,从而大幅度地减少代码量。
             10、行为层与结构层的分离:开发者可以使用选择器选中元素,然后直接给元素添加事件。这种将行为层与结构层完全分离的思想,可以使JQuery开发人员和HTML或其他页面开发人员各司其职,摆脱过去开发冲突或个人单干的开发模式。同时,后期维护也非常方便,不需要在HTML代码中寻找某些函数和重复修改HTML代码。
             11、丰富的插件支持:JQuery的易扩展性,吸引了来自全球开发者来编写JQuery的扩展插件。目前已经有超过几百种官方插件支持,而且还不断有新插件面试。
             12、完善的文档:JQuery的文档非常丰富,例如JQuery的中文API。
             13、开源:JQuery是一个开源的产品,任何人都可以自由地使用并提出修改意见。

短所:

         1、不能向后兼容:每一个新版本不能兼容早期的版本。举例来说,有些新版本不再支持某些selector,新版jQuery却没有保留对它们的支持,而只是简单的将其移除。这可能会影响到开发者已经编写好的代码或插件。
         2、插件兼容性:与上一点类似,当新版jQuery推出后,如果开发者想升级的话,要看插件作者是否支持。通常情况下,在最新版jQuery版本下,现有插件可能无法正常使用。开发者使用的插件越多,这种情况发生的几率也越高。我有一次为了升级到jQuery 1.3,不得不自己动手修改了一个第三方插件。
         3、多个插件冲突:在同一页面上使用多个插件时,很容易碰到冲突现象,尤其是这些插件依赖相同事件或selector时最为明显。这虽然不是jQuery自身的问题,但却又确实是一个难于调试和解决的问题。
         4、jQuery的稳定性:jQuery没有让浏览器崩溃,这里指的是其版本发布策略。jQuery 1.3版发布后仅过数天,就发布了一个漏洞修正版1.3.1。他们还移除了对某些功能的支持,可能会影响许多代码的正常运行。
         5、对动画和特效的支持差:在大型框架中,jQuery核心代码库对动画和特效的支持相对较差。但是实际上这不是一个问题。目前在这方面有一个单独的jQuery UI项目和众多插件来弥补此点。

二、Zepto

ZeptoはもともとjQueryのは、そのAPIと同様のjQueryのが、小さいファイルサイズで軽量の代替である、モバイルエンドライブラリのために開発されました。Zeptoの最大の強みは、そのファイルのサイズである、唯一の8Kとより、完全に機能するライブラリである1最小の、ささやかながらも、提供するツールZeptoは、開発プロセスのニーズを満たすのに十分です。単純に、携帯電話用コンピュータ側の開発、Zeptoエンド開発のためのjQueryを置きます。
長所:軽量、モバイルエンドの開発に適し
欠点:Zeptoは、Internet Explorerブラウザ(<10)の古いバージョンをサポートしていません。

三、VueJS

それは集中層を見ているので実際には、ないVue.jsフレームワーク、データ駆動型のWebインタフェースライブラリ構築物です。
Vue.jsは、単純なAPI(アプリケーションプログラミングインタフェース)を介してシステムの構成要素を結合効率的で柔軟なデータを提供します。
次の機能をVue.js:

      1.轻量级的框架
      2.双向数据绑定
      3.指令
      4.插件化

利点:

  1. シンプル:公式ドキュメントは角よりも覚えやすく、非常に明確です。

  2. 高速:非同期バッチ更新DOM。

  3. 組み合わせ:非結合コンポーネントとは、アプリケーションの再利用で組み合わせることができます。

  4. コンパクト:〜18キロバイトの分+ gzipで、無依存性。

  5. パワフル:式&依存関係を宣言する必要はありませんが、属性(計算されたプロパティ)を導出することができます。

  6. 優しいモジュール:NPM、バウアーまたはデュオインストールを通じて、すべてのコードを強制せず、角、より柔軟な利用シナリオのさまざまな規定に従います。

短所:

  1. 新生児:Vue.jsは無い角度とても成熟している、新しいプロジェクトです。
  2. 影響の度合いは非常に大きいではありません。Vue.js多様性や他のあまり知られてライブラリの数の豊富さについて少し、グーグル。
  3. これはIE8をサポートしていません。

四、AngularJS

angularJSは、Googleの様々な製品に使用されてきた優れたフロントエンドJSのフレームワークです。
  次の機能をangularJS:

	   1.良好的应用程序结构
    2.双向数据绑定
    3.指令
    4.HTML模板
    5.可嵌入、注入和测试

長所: 
豊富で強力な1つのテンプレート、それは角度指示の富が付属しています。
図2は、サービステンプレート、双方向のデータバインディング、モジュール、経路、フィルタ、すべての機能の依存性の注入などを含む、より完全なフロントエンドフレームである;
3.カスタム命令、複数のカスタム命令は、プロジェクトであってもよいです使用しています。
アジャイル開発チームは非常に有用であるためのJavaの何か(依存性注入)を導入モジュラー大胆に4.ng、簡単に、再利用可能なコードを書くことができます。
インターネット大手のGoogleは、彼が強固な基盤やコミュニティをサポートしていることを意味する、開発する5.angularjs。
  
欠点:
1.angularエントリの概念は簡単ですが、深さの多くの後、学習を理解することはより困難である。
2.ドキュメントは、非常に小さな例、唯一の基本的なAPIではなく、例を書かれた公式文書、あるあることが多い、具体的にはGoogleを使用する方法または直接misko、角度者に聞く。
3.特に良いIE6 / 7の互換性はありません、あなたは自分の手で書かれたコードの一部に対処するためにjQueryを使用することができるということです。
非常に柔軟性の実際の角度のベストプラクティス4命令の小さなチュートリアルアプリケーション、あなたには、いくつかの作家の原則の使用が表示されない場合、それは地球上の何もないようなコードを書くのは簡単で、例えば、まだ操作でjQueryのjsのDOMのようなたくさんのアイデアを持っている。
5.DI依存性注入の圧縮コードが宣言表示する必要がある場合
機構6.AngularJSをルーティングし、それは簡単です。問題
7.検証エラーメッセージが比較的弱い表示され、多くはテンプレートタグ書き込む必要があり
、一つだけを持つことができます8.ngViewをネストできません複数のビュー、URLの角度-UI / UI-ルーター解決が、UI-ルータがありますがコントロールは非常に柔軟ではない、それは入れ子にする必要があります
9. 1.0.Xから1.2.Xへのアップグレードは、バグをアップグレードした後、互換性を引き起こす可能性があり、以前のバージョンと完全に互換性がありません、比較的大きな調整のように見えます

五、ReactJS

主にUIを構築するために使用される反応。あなたは渡すことができます静的なHTML DOM要素となることができる、あなたはまた、動的に変数を渡す、さらにインタラクティブなアプリケーションコンポーネントができ、あなたはUIのレンダリングを支援するために、このような宣言コードなどのパラメータ、様々な種類の中で反応します。

特性を反応させる次のとおりです。 
    1.デザイン文を:宣言型のパラダイムを反応させ、アプリケーションを簡単に記述することができます。

2.効率的な:DOMとの相互作用を最小限にするために、シミュレーションによってDOMを反応します。

3.柔軟性:既知のライブラリやフレームワークでうまく動作することができます反応します。

利点:速度:UI描画処理において、仮想DOMにローカルマイクロオペレーションにより実現実際の更新DOMを反応させます。

2.クロスブラウザの互換性:私たちは、クロスブラウザの問題を解決するDOM仮想助け、それは問題ではありませんでもIE8で、私たちのために標準化されたAPIを提供します。

3.モジュラー:問題が発生した場合や、いくつかのコンポーネントは容易に単離することができるようにモジュラーは、あなたのプログラムのための個別のUIコンポーネントを作成。

4.双方向データフロー:フラックススキーマは一方向のデータ層を作成するために使用されてはFacebookを利用して概念化されたライブラリーの開発と反応するかに応じて、JavaScriptアプリケーションです。

5.均質な、純粋ジャバスクリプト:検索エンジンのクローラは、代わりにJavaScriptを実行すると、アプリケーションが検索エンジンの最適化を支援プリレンダリングのサーバの応答に依存しているため。

6.互換性:例えば、大規模なアプリケーションを構築するため、一方BrowserifyとWebPACKの適切なロードおよびパッケージングするRequireJSを使用。彼らはもはやそれらの困難な作業が困難な行いません。

短所:1.自体を反応させるのは、完全なフレームワークばかりV、ではありませんので、あなたがしたい場合は、大規模なプロジェクトは完全なフレームワーク、そして、基本的な必要性は大規模なアプリケーションを書くことReactRouterとフラックスを追加することです。

六、BackboneJS

モデル(モデル)、(コレクション)のセット、ビュー(ビュー)複雑なWebアプリケーションの構造を提供するBACKBONE.JS。前記モデルデータとカスタムイベントをバインドするために使用されるキー値; API関数の豊富なセットを列挙することができるとともに、ビューのイベントハンドラを宣言することができ、およびインターフェイスRESRful JSONを介してアプリケーションに接続されています。

(:中国の文書Underscore.js、参照してください。注バックボーンにのみ大きく依存Underscore.js(> = 1.5.0)であるhttp://www.html.cn/doc/underscore/を)。RESTfulな制約ベース(フレームパターン・ネットワーク・システム)は、histroyサポートはBackbone.Routerに依存して、DOM処理がjQueryの(> = 1.11.0)を含む、Backbone.Viewに依存し、古いIEブラウザをjson2.jsサポート。(LO-ダッシュとZeptoのAPIの下線とjQueryの模倣は、例えば、同じことが異なる互換性で動作することができます)

七、EmberJS

( - ビュー - コントローラモデル)アーキテクチャのパターンEmber.jsはMVCを使用してWebアプリケーションを開発するためのオープンソースのJavaScriptクライアントフレームワークです。Ember.jsにおいて、ルーティングは、モデル、ビュー・テンプレートハンドル、プロセスモデルコントローラとして使用します。

VUEと反応します:

  • Vueの
    設計、文法シンプル、低コストの学習上のシンプルなAPI
    より高速にレンダリング速度と小さいサイズ
  • 反応
    系を強く設定することができ、レンダリング反応し、浅いレンダリングなどの特性を含み、それによって大幅にコードの保守及びテスト容易性を向上させる、テストツールと組み合わせて反応に使用することができます。
    大規模なアプリケーションや、より良いテスト容易性のために、より適し
    たWebとネイティブアプリケーションエンドの両方に適用される
    大きな生態系を持ってより多くのサポートとツール
  • 共通:
 React和Vue都会构建一个虚拟DOM并同步到真实DOM中,实现快速渲染
    轻量级
    响应式组件
    服务器端渲染
    易于集成路由工具,打包工具以及状态管理工具
    优秀的支持和社区
  • 違い
名前 ビュー 反応します
与えます レンダリングは、レンダリングされたコンポーネント、その変化の各成分に依存追跡する処理であります すべてのサブコンポーネントを再レンダリングします
、テンプレート駆動型の開発を結合双方向のデータを使用してください。(テンプレートが離脱機能及びレイアウトをより良くするために) 反応するアプリケーションは、テンプレートを使用せずに対照的であるが、JavaScriptでJSXでDOMを作成するために、開発者が必要です。
状態 Vueのデータは、ページが更新されます(変異)、変更データ変数の再レンダリングです。(動作状態でのVueの変更だけではなく、よりコンパクトであるが、それは実際にはより速く、より効率的に反応させ、より再レンダリングシステムです。) 不変(不変)である状態(状態)に反応するので、あなたはそれを直接変更することはできませんが、SETSTATEを使用します

おすすめ

転載: blog.csdn.net/qq_37651267/article/details/94436900
おすすめ