web-dev-qa-db-ja.com

AngularJSはjQueryよりも優れていますか？

私は主にjQueryライブラリを使用しており、AngularJSの使用を開始しました。 howに関するいくつかのチュートリアルを読んでAngularを使用しましたが、それを使用する理由やタイミング、またはjQueryを使用した場合と比較してどのような利点があるかについてはわかりません。

AngularはMVCを考えるように思われます。これはおそらく、Webページをテンプレートとデータの組み合わせとして表示することを意味します。動的データがあると思うときはいつでも{{data bindings}}を使用します。 Angularは、$ scopeハンドラーを提供します。これは、静的に、またはWebサーバーへの呼び出しを介して入力できます。これは、Webページを設計するJSPの方法に特徴的に似ています。これにはAngularが必要ですか？

しないデータ操作（たとえば、マウスホバーでの色の変更、クリックでの要素の非表示/表示）を含む単純なDOM操作の場合、jQueryまたはVanilla JSで十分です。これは、角度のmvcのmodelがページ上のデータを反映するものであり、したがって、色、表示/非表示、その他の変更はmodelには影響しません。 Angularには、DOM操作に関してjQueryまたはVanilla JSよりも利点がありますか？

プラグインでjQueryができることと比較して、開発に役立つAngularは何ができますか？

jqueryangularjs
168
Amarsh

データバインディング

あなたはあなたのWebページを作り回り、動的なデータがあると感じるときはいつでも{{data bindings}}を入れ続けます。 Angularはあなたに（静的にあるいはWebサーバーへの呼び出しを通して）設定できる$ scopeハンドラを提供します。

これはデータバインディングについての十分な理解です。私はあなたがそれを持っていると思います。

DOM操作

データ操作を必要としない単純なDOM操作（例：マウスオーバー時の色の変更、クリック時の要素の表示/非表示）では、jQueryまたはold-school jsで十分できれいです。これは、AngularのMVCのモデルがページ上のデータを反映するものであることを前提としているため、色、表示/非表示などのCSSプロパティはモデルに影響しません。

私は、「単純な」DOM操作がよりクリーンであることについてのあなたの論点をここで見ることができますが、ごくまれにそしてそれは本当に「単純な」ものでなければならないでしょう。 DOM操作は、データバインディングと同じように、Angularが非常に優れている分野の1つであると思います。これを理解すると、Angularがその見解をどのように考慮しているかを理解するのにも役立ちます。

Angularの方法とDOM操作のVanilla jsのアプローチを比較することから始めます。伝統的に、私たちはHTMLを何もしないと考え、それをそのように書く。そのため、 "onclick"などのインラインjsは、 "やること"をHTMLの文脈の中に置くが "しない"ため、悪い習慣です。 Angularは頭の上でその概念を反転させます。あなたがあなたの見解を書いているとき、あなたはHTMLを多くのことを「する」ことができると思います。この機能はangleディレクティブで抽象化されていますが、それらが既に存在しているか、あなたが書いたのであれば、「どのように」それが行われるかを考える必要はありません。角度はあなたが使用することを可能にします。これはまた、あなたのすべてのビューロジックがあなたのJavaScriptファイルではなく、本当にビューに含まれていることを意味します。繰り返しますが、あなたのJavaScriptファイルに書かれているディレクティブはHTMLの機能を向上させると考えることができるので、あなたはDOMにそれ自体を操作することを心配させます（いわば）。簡単な例で説明します。

これが私たちが使用したいマークアップです。直感的な名前を付けました。

<div rotate-on-click="45"></div>

最初に、 この機能をカスタムAngular Directiveを介してHTMLに渡した場合は、すでに完了したことになります 。それは新鮮な空気の一息です。そのことについてもう少し詳しく説明します。

JQueryによる実装

ライブデモはこちら（クリック）。

function rotate(deg, elem) {
  $(elem).css({
    webkitTransform: 'rotate('+deg+'deg)', 
    mozTransform: 'rotate('+deg+'deg)', 
    msTransform: 'rotate('+deg+'deg)', 
    oTransform: 'rotate('+deg+'deg)', 
    transform: 'rotate('+deg+'deg)'    
  });
}

function addRotateOnClick($elems) {
  $elems.each(function(i, elem) {
    var deg = 0;
    $(elem).click(function() {
      deg+= parseInt($(this).attr('rotate-on-click'), 10);
      rotate(deg, this);
    });
  });
}

addRotateOnClick($('[rotate-on-click]'));

Angularを使った実装

ライブデモはこちら（クリック）。

app.directive('rotateOnClick', function() {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var deg = 0;
      element.bind('click', function() {
        deg+= parseInt(attrs.rotateOnClick, 10);
        element.css({
          webkitTransform: 'rotate('+deg+'deg)', 
          mozTransform: 'rotate('+deg+'deg)', 
          msTransform: 'rotate('+deg+'deg)', 
          oTransform: 'rotate('+deg+'deg)', 
          transform: 'rotate('+deg+'deg)'    
        });
      });
    }
  };
});

かなり明るく、とてもきれいで、それは単なる簡単な操作です。 私の意見では、角度的なアプローチはすべての点で勝ちます。特に、機能がどのように抽象化され、DOMでの操作が宣言されるのか。この機能はhtml属性を介して要素にフックされているので、セレクタを介してDOMを問い合わせる必要はありません。2つのNiceクロージャがあります - ディレクティブファクトリ用の1つのクロージャです。 link関数（またはcompile関数）のディレクティブの使用ごとに1つのクロージャー。

双方向データバインディングとDOM操作のためのディレクティブは、Angularを素晴らしいものにするための始まりにすぎません。 Angularはすべてのコードがモジュール化され、再利用可能で、簡単にテスト可能であることを促進します。また、単一ページのアプリルーティングシステムも含まれます。 jQueryは一般的に必要な便利さ/クロスブラウザメソッドのライブラリですが、Angularは単一ページのアプリを作成するための完全な機能を備えたframeworkです。 。 Angularスクリプトには、実際には独自の "lite"バージョンのjQueryが含まれているため、最も重要なメソッドのいくつかを利用できます。したがって、jQueryを使用してAngular ISを使用すると（軽く）、アプリを作成する過程でAngularを使用すると、より「魔法」が得られると主張できます。

これはより関連性の高い情報のための素晴らしい記事です：私がjQueryのバックグラウンドを持っている場合、どうやって“ AngularJSで考える”ことができますか？

一般的な違い.

上記の点は、OPの具体的な懸念に向けられています。他の重要な違いについても概説します。私は各トピックについても追加の読書をすることを勧めます。

AngularとjQueryを合理的に比較することはできません。

Angularはフレームワーク、jQueryはライブラリです。フレームワークにはそれぞれの場所があり、ライブラリにはそれぞれの場所があります。しかし、優れたフレームワークの方がライブラリよりもアプリケーションを書く上で大きな力を持っていることは疑いの余地はありません。それがまさにフレームワークの要点です。あなたのコードをプレーンなJSで書くことを歓迎します、あるいは共通の関数のライブラリを追加することができます、またはあなたが大部分を達成するのに必要なコードを劇的に減らすためにフレームワークを追加することができます。したがって、より適切な質問は次のとおりです。

なぜフレームワークを使うのですか？

優れたフレームワークは、モジュール式（したがって再利用可能）、DRY、読み取り可能、高性能、そして安全になるようにコードを設計するのに役立ちます。 jQueryはフレームワークではないので、これらの点では役に立ちません。我々は皆jQueryスパゲッティコードの典型的な壁を見ました。これはjQueryのせいではありません - コードを構築する方法を知らない開発者のせいです。しかし、開発者がコードの構築方法を知っていたら、先ほど説明した基盤（アーキテクチャなど）を提供するためのある種の最小限の「フレームワーク」を作成したり、何かを追加することになります。例えば、あなたはよいコードを書くためのフレームワークの一部としてRequireJSを追加するかもしれません。

これが現代のフレームワークが提供していることです。

  • テンプレート作成
  • データバインディング
  • ルーティング（シングルページアプリ）
  • クリーンでモジュール式の再利用可能なアーキテクチャ
  • セキュリティ
  • 利便性のための追加機能/機能

Angularについてさらに説明する前に、Angularが唯一の種類ではないことを指摘しておきます。たとえばDurandalは、jQuery、Knockout、RequireJSの上に構築されたフレームワークです。繰り返しますが、jQueryそれ自体では、Knockout、RequireJS、およびそれらの上に構築されたフレームワーク全体が提供できるものを提供することはできません。それは匹敵しません。

あなたが惑星を破壊する必要があり、あなたがデススターを持っている場合、デススターを使う。

角度付き（再訪）。

フレームワークが何を提供するかについての私の以前のポイントを基にして、私はAngularがそれらを提供する方法を賞賛し、なぜこれが実際にjQuery単独よりも優れているのかを明らかにしたいです。

DOMリファレンス.

上の例では、機能を提供するためにjQueryがDOMにフックする必要があることは絶対に避けられません。つまり、ビュー（html）は機能性（ "画像スライダー"のようなある種の識別子でラベル付けされているため）に関心があり、JavaScriptはその機能の提供に関心があるということです。 Angularは抽象化によってその概念を排除します。 Angularを使用して適切に記述されたコードは、ビューが独自の動作を宣言できることを意味します。時計を表示したい場合は、

<clock></clock>

完了しました。

はい、それを意味するためにはJavaScriptを使用する必要がありますが、jQueryのアプローチとは逆の方法でこれを行っています。私たちのAngularディレクティブ（それはそれ自身の小さな世界にあります）はhtmlを「増強」しており、htmlはそれ自身に機能性をフックします。

MVW Architecure /モジュール/依存性注入

Angularはあなたのコードを構造化する直接的な方法をあなたに与えます。ビューのものはビュー（html）に属し、拡張ビュー機能はディレクティブに属し、他のロジック（ajax呼び出しなど）および関数はサービスに属し、サービスとビューのビューへの接続はコントローラーに属します。他にも、サービスの設定や変更などを処理するのに役立つ角度コンポーネントがいくつかあります。作成した機能は、アプリケーション全体で依存性注入を処理するInjectorサブシステムを介して、必要な場所で自動的に使用できます。アプリケーション（モジュール）を書くとき、私はそれを他の再利用可能なモジュールに分割し、それぞれが独自の再利用可能なコンポーネントを持ち、それからそれらをより大きなプロジェクトに含めます。 Angularの問題を解決すると、将来再利用するのに便利で構造化された方法で自動的に解決され、次のプロジェクトに簡単に含めることができます。これらすべてに対するHUGEのボーナスは、コードのテストがはるかに簡単になることです。

Angularで物事を「機能させる」のは簡単ではありません。

よかった。前述のjQueryスパゲッティコードは、何かが「動作する」ようにしてから先に進んだ開発者から生まれました。あなたは悪いAngularコードを書くことができますが、Angularがそれについてあなたと戦うので、そうすることははるかに難しいです。これはあなたがそれが提供するきれいなアーキテクチャを（少なくともいくらか）利用しなければならないことを意味します。言い換えれば、Angularを使って悪いコードを書くのは難しいですが、きれいなコードを書くほうが便利です。

Angularは完璧には程遠いです。 Web開発の世界は常に成長し変化し続けており、問題を解決するための新しい優れた方法があります。たとえば、FacebookのReactとFluxはAngularよりも優れた点がいくつかありますが、それぞれ欠点があります。完璧なものは何もありませんが、Angularは今までも今もなお素晴らしいです。 jQueryがかつてWebの世界を前進させるのに役立ったのと同様に、Angularもそうであるように、そしてまた多くが来るでしょう。

274
m59