javascript - 確認 - angularjs 共通 関数




jQueryの背景がある場合、「AngularJSで考える」? (10)

必要なパラダイムシフトについて説明できますか?

命令的対宣言的

jQueryを使用するには、ステップバイステップを発生する必要があるかDOMを教えてください。AngularJSあなたが何をしたいの結果を説明、それをしませんか。もっと詳しくはhere。また、Mark Rajcokの答えをチェックしてください。

クライアントサイドWebアプリケーションの設計と設計の仕方はどうやって違いますか?

AngularJSは、MVCパターンを使用するクライアント側のフレームワーク全体です(グラフィカル表現をチェックします)。懸念の分離に重点を置いています。

最大の違いは何ですか? 私は何をやってやるべきですか? 代わりに何をやってみるべきですか?

jQueryはライブラリです

AngularJSは、MVC、依存関係注入、データバインディングなどのクールなものを数多く組み合わせた、非常にテスト可能な美しいクライアントサイドフレームワークです。

懸念とテストの分離ユニットテストとエンドツーエンドテスト)に焦点を当て、テスト駆動開発を容易にします。

始める最善の方法は素晴らしいチュートリアルです。数時間で手順を進めることができます。しかし、あなたが舞台裏のコンセプトを習得したい場合は、さらに読むための無数のリファレンスが含まれています。

サーバー側の考慮事項/制限はありますか?

既に純粋なjQueryを使用している既存のアプリケーションで使用できます。ただし、AngularJSの機能を十分に活用したい場合は、RESTful手法を使用してサーバー側をコーディングすることを検討してください。

そうすることで、リソースファクトリを活用することができます。これにより、サーバー側のRESTful API抽象化が作成され、サーバー側の呼び出し(get、save、deleteなど)が非常に簡単になります。

jQueryでクライアント側のアプリケーションを開発することに慣れているとしますが、今はAngularJS使用を開始したいと思います。 必要なパラダイムシフトについて説明できますか? 答えを特定するのに役立ついくつかの質問があります:

  • クライアントサイドWebアプリケーションの設計と設計の方法はどうやって異なりますか? 最大の違いは何ですか?
  • 私は何をやってやるべきですか? 代わりに、私は何をやってみるべきですか?
  • サーバー側の考慮事項/制限はありますか?

jQueryAngularJS詳細な比較を探しているわけではありません。


1.ページをデザインしてからDOM操作で変更しないでください

jQueryでは、ページを設計し、それを動的にします。 これは、jQueryが拡張のために設計され、その単純な前提から信じられないほど成長したためです。

しかし、AngularJSでは、アーキテクチャを念頭に置いて最初から始める必要があります。 「私はこのDOMの部分を持っていて、それをXにしたい」と考えることから始めるのではなく、あなたが達成したいことから始め、その後アプリケーションを設計し、最後に視点を設計する必要があります。

2. AngularJSでjQueryを増やさないでください

同様に、jQueryがX、Y、およびZを行うという考え方から始めないでください。モデルとコントローラのためにAngularJSを追加します。 これは本当に魅力的です。なぜなら、新しいAngularJS開発者は、少なくとも「Angular Way」のことに慣れるまでは、jQueryをまったく使用しないことを常にお勧めします。

私は多くの開発者とメーリングリストで、150行または200行のjQueryプラグインを使ってこれらの精巧なソリューションを作成し、コールバックのコレクションとAngularJSに糊付けして混乱させ、 彼らは最終的にそれを働かせる! 問題はほとんどの場合、jQueryプラグインがAngularJSでコードの一部で書き直され、突然すべてがわかりやすくなります。

結論は次のとおりです。解決するときは、最初に「AngularJSで考える」; 解決策について考えることができない場合は、コミュニティにお尋ねください。 結局のところ簡単な解決策がない場合は、jQueryを無料で利用できます。 しかし、jQueryを松葉杖にしたり、AngularJSを習得したりしないでください。

3.常にアーキテクチャという観点から考える

最初に、 シングルページアプリケーションアプリケーションであることがわかります 。 彼らはウェブページではありません 。 だから、クライアントサイドの開発者のように思うだけでなく 、サーバーサイドの開発者のように考える必要があります。 アプリケーションを個々の拡張可能なテスト可能なコンポーネントに分割する方法について考える必要があります。

それではどうしますか? あなたは「AngularJSでどう思いますか?」 jQueryとは対照的に、いくつかの一般原則があります。

ビューは "公式記録"

jQueryでは、プログラムでビューを変更します。 私たちは、以下のようにulとして定義されたドロップダウンメニューを持つことができます:

<ul class="main-menu">
    <li class="active">
        <a href="#/home">Home</a>
    </li>
    <li>
        <a href="#/menu1">Menu 1</a>
        <ul>
            <li><a href="#/sm1">Submenu 1</a></li>
            <li><a href="#/sm2">Submenu 2</a></li>
            <li><a href="#/sm3">Submenu 3</a></li>
        </ul>
    </li>
    <li>
        <a href="#/home">Menu 2</a>
    </li>
</ul>

jQueryのアプリケーションロジックでは、次のようなものを使って起動します。

$('.main-menu').dropdownMenu();

ビューを見ると、ここには機能があることはすぐには分かりません。 小規模なアプリケーションの場合は問題ありません。 しかし、簡単なアプリケーションでは、物事はすぐに混乱し、維持するのが難しくなります。

AngularJSでは、ビューはビューベースの機能の公式記録です。 私たちのul宣言は次のようになります:

<ul class="main-menu" dropdown-menu>
    ...
</ul>

これらの2つは同じことをしますが、AngularJSバージョンでは、テンプレートを見ている人は、何が起こるべきかを知っています。 開発チームの新メンバーが登場するたびに、彼女はこれを見 、そこにdropdownMenuというディレクティブがあること知ることができます。 彼女は正しい答えを直観する必要はありませんし、任意のコードを調べる必要はありません。 ビューは起こるはずだったものを私たちに語った。 とても清潔です。

AngularJSの新しい開発者は、特定の種類のすべてのリンクを見つけて、その上に指示を追加するにはどうすればよいのかという質問をしばしばします。 開発者は私たちが返答すると、いつも驚きます。 しかし、あなたがそれをしない理由は、これが半分のjQuery、半分のAngularJS、そして良いものではないということです。 ここでの問題は、開発者がAngularJSのコンテキストで「jQueryを実行しようとしている」ということです。 それは決してうまくいかない。 ビュー公式な記録です。 ディレクティブの外(これについては後述)では、 決して DOMを決して変更することはありません 。 ディレクティブはビューに適用されるため、意図は明確です。

覚えておいてください:デザインしてからマークアップしないでください。 あなたは設計してから設計する必要があります。

データバインディング

これは、AngularJSの最も素晴らしい機能のうちのひとつであり、前のセクションで述べたDOM操作の種類をたくさん必要としていません。 AngularJSはあなたのビューを自動的に更新します。 jQueryでは、イベントに応答してコンテンツを更新します。 何かのようなもの:

$.ajax({
  url: '/myEndpoint.json',
  success: function ( data, status ) {
    $('ul#log').append('<li>Data Received!</li>');
  }
});

次のようなビューの場合:

<ul class="messages" id="log">
</ul>

懸念が混在していることとは別に、前にも述べたのと同じ意味の問題を抱えています。 しかしもっと重要なのは、DOMノードを手動で参照して更新する必要があったことです。 また、ログエントリを削除したい場合は、それに対してDOMに対してもコードを作成する必要があります。 DOMとは別にロジックをテストするにはどうすればよいですか? プレゼンテーションを変更したい場合はどうすればよいですか?

これはちょっと厄介で些細な虚弱です。 AngularJSでは、これを行うことができます:

$http( '/myEndpoint.json' ).then( function ( response ) {
    $scope.log.push( { msg: 'Data Received!' } );
});

私たちの見解は次のようになります。

<ul class="messages">
    <li ng-repeat="entry in log">{{ entry.msg }}</li>
</ul>

しかし、それについては、私たちの見解は次のようになります。

<div class="messages">
    <div class="alert" ng-repeat="entry in log">
        {{ entry.msg }}
    </div>
</div>

順序なしリストを使用する代わりに、ブートストラップアラートボックスを使用しています。 コントローラーコードを変更する必要はありませんでした。 しかし、もっと重要なのは、ログがどこでどのように更新されるかに関係なく、ビューも変わります。 自動的に。 ニート!

ここでは示していませんが、データバインディングは双方向です。 したがって、これらのログメッセージは、単に<input ng-model="entry.msg" />実行することによって、ビュー内で編集することもできます。 そして、多くの喜びがあった。

明確なモデル層

jQueryでは、DOMはモデルのようなものです。 しかし、AngularJSでは、ビューから完全に独立して、必要な方法で管理できる個別のモデルレイヤーを用意しています。 これは、上記のデータバインディングのために役立ち、懸念の分離を維持し、はるかに大きなテスト容易性を導入する。 他の答えはこの点に言及しているので、私はそれをそのまま残しておきます。

関心事の分離

そして上記のすべてが、この過度に魅力的なテーマに結びついています。あなたの懸念を分けてください。 あなたの意見は、何が起こるべきかの公式記録として機能します(ほとんどの場合)。 モデルはデータを表します。 再利用可能なタスクを実行するためのサービス層があります。 DOM操作を行い、ディレクティブでビューを拡大します。 あなたはそれをすべてコントローラーで接着します。 これは他の回答でも言及されていますが、私が追加する唯一のことはテスト容易性に関係します。これについては、別のセクションで説明します。

依存性注入

懸念の分離を助けるために、 依存性注入 (DI)があります。 サーバー側の言語( JavaからPHP )から来ているなら、既にこのコンセプトに精通しているでしょうが、jQueryから来るクライアント側の人ならば、この概念は愚かから余分なものまで。 しかし、そうではありません。 :-)

広い意味では、DIは、コンポーネントを非常に自由に宣言できることを意味し、他のコンポーネントから宣言することができます。 ロード順やファイルの場所などについて知る必要はありません。 電源がすぐに見えないかもしれませんが、私はただ一つの(共通の)例を提供します:テスト。

アプリケーションでは、サーバー側のストレージをREST APIで実装するサービスが必要であり、アプリケーションの状態によってはローカルストレージも必要になるとします。 私たちのコントローラでテストを実行する場合、我々はサーバーと通信する必要はありません。 コントローラをテストしています。 元のコンポーネントと同じ名前のモックサービスを追加するだけで、インジェクタはコントローラが偽のものを自動的に取得することを保証します。コントローラは違いを知らず、必要もありません。

テストの話...

4.テスト駆動開発 - 常に

これはアーキテクチャ上のセクション3の一部ですが、私はそれを独自のトップレベルセクションとして配置することが非常に重要です。

見た、使用した、書いた多くのjQueryプラグインのうち、いくつかにテストスイートが付属していますか? jQueryはあまりそれに従わないので、あまり多くはありません。 しかしAngularJSはそうです。

jQueryでは、テストする唯一の方法は、テストでDOM操作を実行できるサンプル/デモページでコンポーネントを個別に作成することです。 したがって、コンポーネントを個別に開発し、アプリケーションに統合する必要があります。 どのように不便です! jQueryを使用して開発するときは、テスト駆動開発ではなく反復テストを選択します。 誰が私たちを責めることができますか?

しかし、我々は懸念が分かれているので、AngularJSでテスト駆動開発を繰り返し実行できます! たとえば、我々の現在のルートが何であるかをわかりやすくするためのスーパーディレクティブを私たちのメニューに表示したいとしましょう。 私たちは、アプリケーションの観点から私たちが望むものを宣言することができます:

<a href="/hello" when-active>Hello</a>

さて、存在しないwhen-active指令のテストを書くことができます:

it( 'should add "active" when the route changes', inject(function() {
    var elm = $compile( '<a href="/hello" when-active>Hello</a>' )( $scope );

    $location.path('/not-matching');
    expect( elm.hasClass('active') ).toBeFalsey();

    $location.path( '/hello' );
    expect( elm.hasClass('active') ).toBeTruthy();
}));

テストを実行すると失敗することが確認できます。 今私たちの指示を作成する必要があります:

.directive( 'whenActive', function ( $location ) {
    return {
        scope: true,
        link: function ( scope, element, attrs ) {
            scope.$on( '$routeChangeSuccess', function () {
                if ( $location.path() == element.attr( 'href' ) ) {
                    element.addClass( 'active' );
                }
                else {
                    element.removeClass( 'active' );
                }
            });
        }
    };
});

テストは終了 、メニューは要求通りに実行されます。 当社の開発は反復的かつテスト駆動的です。 邪悪なクール。

5.概念的には、ディレクティブはパッケージ化されていません jQuery

あなたはしばしば "指示のDOM操作を行う"と聞くでしょう。 これは必要です。 正当な関心をもってそれを扱いなさい!

しかし、もう少し深く潜ってみましょう...

いくつかのディレクティブは、すでにビューにあるもの( ngClassと考える)をngClassているため、DOM操作をngClass行い、その後は基本的に完了します。 しかし、ディレクティブが "ウィジェット"のようなものでテンプレートがある場合、ディレクティブは懸念の分離を尊重しなければなりません。 つまり、テンプレートリンク関数とコントローラ関数の実装とはほとんど独立したままにすべきです。

AngularJSには、これを非常に簡単にするためのツールが用意されています。 ngClassを使用すると、クラスを動的に更新できます。 ngModel使用すると、双方向のデータバインドが可能です。 ngShowngHideプログラムで要素を表示または非表示にします。 私たちが自分自身で書くものを含めて、もっと多くのものがあります。 言い換えれば、DOM操作なしであらゆる種類の素晴らしいことを行うことができます。 DOM操作が少ないほど、テストする方が簡単で、スタイルを簡単にでき、将来的に変更しやすくなり、再利用可能で配布可能になります。

私はAngularJSの新しい開発者の多くがjQueryの束を投げる場所としてディレクティブを使用しているのを見ています。 言い換えると、「コントローラでDOM操作を行うことができないので、そのコードを指示に入れる」と考えています。 それは確かにはるかに優れていますが、それはしばしば間違っています。

セクション3でプログラムしたロガーを考えてみましょう。それをディレクティブに入れても、 それでもやはり 「角度的方法」にしたいと考えています。 それでも 、DOM操作は必要ありません! DOMの操作が必要なときはたくさんありますが、あなたが思うよりもはるかに稀です! アプリケーションのどこにでも DOM操作を行う前に、本当に必要かどうかを尋ねてください。 より良い方法があるかもしれません。

ここに、私が最も頻繁に見るパターンを示す簡単な例があります。 トグル可能なボタンが必要です。 (注:この例は少し工夫されており、まったく同じ方法で解決されるより複雑なケースを表現するために冗長なものがあります。)

.directive( 'myDirective', function () {
    return {
        template: '<a class="btn">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            var on = false;

            $(element).click( function () {
                on = !on;
                $(element).toggleClass('active', on);
            });
        }
    };
});

これにはいくつか問題があります:

  1. まず、jQueryは決して必要ありませんでした。 私たちがここで行ったことは何もなく、jQueryが必要でした!
  2. 第二に、私たちのページに既にjQueryがあっても、ここでそれを使う理由はありません。 単にangular.elementを使用することができ、jQueryを持たないプロジェクトにコンポーネントをドロップしてもコンポーネントは引き続き動作します。
  3. 第3に、このディレクティブが動作するためにjQuery 必要であったとしても、jqLit​​e( angular.element )はロードされていると常に jQuery 使用します。 ですから、 $使う必要はありません - 単にangular.element使うことができます。
  4. 第4に、第3と密接に関連しているのは、jqLit​​e要素を$で囲む必要はないということです。 link関数に渡されるelementすでに jQuery要素になります。
  5. 前のセクションで説明した5番目のテンプレートは、テンプレートの要素をロジックに混ぜる理由は何ですか?

このディレクティブは、非常に複雑な場合でも書き直すことができます。

.directive( 'myDirective', function () {
    return {
        scope: true,
        template: '<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
        link: function ( scope, element, attrs ) {
            scope.on = false;

            scope.toggle = function () {
                scope.on = !scope.on;
            };
        }
    };
});

繰り返しますが、テンプレートはテンプレートに含まれているため、必要なスタイルに合ったテンプレートを簡単にスワップして、 ロジックを変更する必要はありません。 再利用性 - ブーム!

テストのような他のメリットはまだあります。簡単です! テンプレートの内容にかかわらず、ディレクティブの内部APIには決して触れないので、リファクタリングは簡単です。 ディレクティブに触れることなく、必要なだけテンプレートを変更できます。 あなたが何を変えても、あなたのテストはまだ合格します。

w00t!

したがって、ディレクティブがjQueryのような関数のコレクションではない場合、それらは何ですか? ディレクティブは実際にはHTMLの拡張です 。 HTMLがあなたが必要とすることをしなければ、あなたのためにそれを行う指示を書いて、それがHTMLの一部であるかのように使用します。

別の言い方をすれば、AngularJSが箱から何かをやっていない場合は、 ngClickngClassなどとngClickにチームがどのように適合するか考えてください。

概要

jQueryを使用しないでください。 それを含めないでください。 それはあなたを後押しするでしょう。 そして、あなたがjQueryで解決する方法をすでに知っていると思うという問題に遭遇したら、 $に達する前に、AngularJSを閉じ込める方法を考えてみてください。 あなたが知らないなら、尋ねなさい! 20回中19回、jQueryを実行する最善の方法はjQueryを必要とせず、jQueryの結果を使ってそれを解決しようとするとより多くの作業ができます。


jQuery

jQueryはgetElementByHerpDerp短いブラウザやクロスブラウザのような長いJavaScriptコマンドを使います。

AngularJS

AngularJSを使用すると、ダイナミックWebアプリケーション(HTMLは静的ページ用に設計されているため)でうまくいくような独自のHTMLタグ/属性を作成できます。

編集:

「私はjQueryのバックグラウンドを持っていますが、どのようにAngularJSで考えるのですか?「私はHTMLのバックグラウンドを持っているので、JavaScriptでどのように考えるのですか?あなたが質問をしているという事実は、これら2つのリソースの基本的な目的を理解していない可能性が高いことを示しています。このため、「AngularJSはディレクティブを使用しますが、jQueryはCSSセレクタを使用してこれを行うjQueryオブジェクトを作成します」というような、リストを通るのではなく、基本的な違いを指摘するだけで問題に答えることにしました。 。この質問は長い答えを必要としません。

jQueryは、ブラウザでのJavaScriptのプログラミングを容易にする方法です。短い、ブラウザ間のコマンドなど

AngularJSはHTMLを拡張<div>しているため、アプリケーションを作成するだけで全体を配置する必要はありません。HTMLは、静的で教育的なWebページであるために設計されたものではなく、アプリケーションで実際に動作します。これは、JavaScriptを使用してラウンドアバウトの方法でこれを実現しますが、基本的にはJavaScriptの拡張ではなくHTMLの拡張です。


命令的→宣言的

jQueryでは、 セレクタを使用してDOM要素を検索し、イベントハンドラをバインド/登録します。 イベントがトリガされると、その(命令的な)コードが実行され、DOMの更新/変更が行われます。

AngularJSでは、DOM要素ではなくビューについて考える必要があります。 ViewsはAngularJS ディレクティブを含む(宣言的な)HTMLです。 ディレクティブは、私たちのためにイベントハンドラをバックグラウンドに設定し、動的なデータバインディングを提供します。 セレクタはほとんど使用されないので、ID(およびいくつかの種類のクラス)の必要性は大幅に減少します。 ビューはモデルに結び付けられます (スコープ経由)。 ビューはモデルの投影です。 イベントはモデル(つまりデータ、スコープのプロパティ)を変更し、それらのモデルを投影するビューは「自動的に」更新されます。

AngularJSでは、データを保持するjQueryで選択されたDOM要素ではなく、モデルについて考えます。 コールバックを登録してユーザーに表示される内容を操作するのではなく、ビューをモデルの投影として考えます。

関心事の分離

jQueryは邪魔にならないJavaScript - ビヘイビア(JavaScript)を構造体(HTML)から分離しています。

AngularJSは、ビュー/構造体(HTML)からビヘイビアを削除するために、 コントローラとディレクティブ(それぞれ独自のコントローラを持つことができ、コンパイルとリンク機能を持つことができます)を使用します。 Angularには、アプリケーションの分離/整理に役立つサービスフィルタもあります

https://.com/a/14346528/215945も参照してhttps://.com/a/14346528/215945

アプリケーション設計

AngularJSアプリケーションを設計するための1つのアプローチ:

  1. あなたのモデルについて考える。 これらのモデルのサービスまたは独自のJavaScriptオブジェクトを作成します。
  2. どのようにあなたのモデルを提示するか、あなたの意見を考えてください。 必要なディレクティブを使用して動的なデータバインディングを取得する、各ビューのHTMLテンプレートを作成します。
  3. (ng-viewとrouting、またはng-controllerを使用して)各ビューにコントローラを接続します。 コントローラには、ビューがそのジョブを実行するために必要なモデルデータだけを検索/取得します。 コントローラを可能な限り薄くしてください。

プロトタイプ継承

JavaScriptのプロトタイプ継承がどのように機能するかを知らなくても、jQueryで多くのことを行うことができます。 AngularJSアプリケーションを開発する場合、JavaScriptの継承を十分に理解していれば、一般的な落とし穴を避けることができます。 推奨読書: AngularJSのスコーププロトタイプ/プロトタイプ継承のニュアンスは何ですか?


jQueryはDOM操作ライブラリです。

AngularJSはMV *フレームワークです。

実際、AngularJSは数少ないJavaScript MV *フレームワークの1つです(多くのJavaScript MVCツールはまだカテゴリライブラリに含まれています)。

フレームワークなので、あなたのコードをホストし、いつ呼び出すべきか、いつ呼び出すかについての決定権を持ちます!

AngularJS自体にはjQuery-Lite版が含まれています。基本的なDOMの選択/操作のために、実際にjQueryライブラリを含める必要はありません(ネットワーク上で実行するために多くのバイトを節約します)。

AngularJSはDOM操作と再利用可能なUIコンポーネントの設計のための "ディレクティブ"という概念を持っているので、DOM操作関連の必要性を感じるときはいつでも使うべきです(指示はAngularJSを使ってjQueryコードを書くべき場所です)。

AngularJSにはいくつかの学習曲線があります(jQueryより:-)。

- > jQueryのバックグラウンドから来ている開発者にとって、私の最初の助言は、「AngularJSのような豊富なフレームワークにジャンプする前にJavaScriptをファーストクラスの言語として学ぶこと」です。私は上記の事実を難しい方法で学んだ。

がんばろう。


「パラダイムシフト」を記述するために、私は短い答えで十分であると思う。

AngularJS 要素の検索方法を変更します

jQueryを、あなたは一般的に使用セレクタ要素を見つけ、その後、それらを配線します:
$('#id .class').click(doStuff);

AngularJS、使用するディレクティブを直接要素をマークするために、それらを配線します。
<a ng-click="doStuff()">

AngularJSは、セレクタを使用して要素を見つける必要はありません(または必要とします)。AngularJSjqLit​​eと本格的なjQueryの主な違いは、jqLit​​eがセレクタをサポートしていないことです。

したがって、人々が「jQueryをまったく含まない」と言っているのは、主にセレクタを使いたくないからです。代わりにディレクティブを使用する方法を学ぶことをお勧めします。直接、選択しないでください!


JavaScript MV *初心者であり、純粋にアプリケーション/サーバー側の問題ではなく、アプリケーションアーキテクチャに重点を置いているので、私は確かに以下のリソースをお勧めします(私はまだ言及されていませんでした)。JavaScript Design Patterns、Addy OsmaniさまざまなJavaScriptデザインパターンを紹介しています。この回答に使用されている用語は、上記のリンクされた文書から取られています。私は受け入れられた答えで本当にうまく言われたことを繰り返すつもりはない。代わりに、このアンサーは、AngularJS(および他の図書館)を動かす理論的背景にリンクしています。

AngularJS(またはEmber.js、Durandal、その他のMV *フレームワーク)は、さまざまなJavaScriptデザインパターンの多くを組み立てる複雑なフレームワークの1つです。

1つのグローバルフレームワークに飛び込む前に、(1)ネイティブJavaScriptコードと(2)これらのパターンのそれぞれについて小さなライブラリを別々にテストすることも簡単でした。これにより、(あなたが個人的に問題に直面しているために)フレームワークがどのような重要な問題に対処するかをより深く理解することができました。

例えば:

  • JavaScriptオブジェクト指向プログラミング(これはGoogleの検索リンクです)。これはライブラリではありませんが、確かにアプリケーションプログラミングの前提条件です。プロトタイプ、コンストラクタ、シングルトン&デコレータパターンのネイティブ実装を教えてくれました
  • jQueryファサードパターンのためのjQuery / Underscore(DOMを操作するためのWYSIWYGのような)
  • prototype.jsのためのプロトタイプ/コンストラクタ/ミックスインパターン
  • RequireJS / Curl.jsためのモジュールパターン/ AMD
  • KnockoutJSため、観察、パブリッシュ/サブスクライブパターン

注:このリストは完全ではなく、「最良の図書館」でもありません。彼らはちょうど私が使用した図書館である。これらの図書館には、より多くのパターンも含まれています。言及されたものは、主な焦点またはオリジナルの意図です。このリストに何かがないと感じたら、コメントに言及してください。私はそれを追加してうれしく思います。


jQuery:DOM要素に対するQUERYing the DOMについて多くのことを考えています。

AngularJS:モデルは真実であり、あなたは常にその角度から考える。

たとえば、DOMの一部の形式で表示する予定のサーバーからデータを取得するときは、jQueryで '1'が必要です。DOM内でこのデータを配置する場所「FIND」を指定します。新しいノードを作成するか、innerHTML設定するだけで、そこに「UPDATE / APPEND」することができます。次に、このビューを更新する場合は、 '3。場所を見つけて '4。更新'。この検索と更新のサイクルはすべて、AngularJSではサーバーからのデータの取得と書式設定の同じコンテキスト内で行われています。

AngularJSを使用すると、既に使用していたモデル(JavaScriptオブジェクト)が表示され、モデルの値によってモデル(明らかに)とビューについての情報が表示され、モデルの操作が自動的にビューに伝播するため、それについて考える必要はありません。あなたはAngularJSの中に、もはやDOM内のものを見つけることはできません。

別の言い方をすれば、jQueryでは、CSSセレクタ、つまりHTMLや色や値を取得できるようにクラスや属性などがどこにあるのdivかを考える必要がありますtdが、AngularJSでは、あなたはこのように考えているでしょう:私はどのモデルを扱っていますか、私はモデルの価値を真に設定します。この値を反映したビューがチェックボックスかtd要素内にあるかどうかは気にしません(jQueryでよく考えなければならない詳細)。

AngularJSのDOM操作では、ディレクティブとフィルタを追加することができます。これは、有効なHTML拡張機能と考えることができます。

AngularJSで経験するもう1つの事柄:jQueryでは、AngularJSでたくさんのjQuery関数を呼び出すと、AngularJSが関数を呼び出すので、AngularJSは「やる方法を教えてくれますが、その利点は価値があります。 AngularJSが望んでいること、AngularJSがあなたの機能を提示する方法を学ぶことを意味し、それに応じてそれを呼び出すことになります。これは、AngularJSをライブラリではなくフレームワークにするためのものの1つです。


実際、AngularJSを使用している場合、jQueryはもう必要ありません。AngularJS自体にはバインディングとディレクティブがあります。これはjQueryでできることの大部分を「置き換える」ものです。

私は通常、AngularJSとCordovaを使ってモバイルアプリケーションを開発しています。私が必要とするjQueryからのものはSelectorだけです。

グーグルでは、スタンドアロンのjQueryセレクタモジュールがあることがわかりました。それはシズル。

そして、AngularJSを使ってjQuery Selector(Sizzleを使用)のパワーを使ってウェブサイトをすばやく開始するための小さなコードスニペットを作成することにしました。

ここでコードを共有しました:https://github.com/huytd/Sizzular : https://github.com/huytd/Sizzular


彼らはリンゴとオレンジです。あなたはそれらを比較したくないです。彼らは2つの異なるものです。AngularJsにはすでにjQuery Liteが組み込まれています。これにより、完全なjQueryバージョンを含まなくても基本的なDOM操作を実行できます。

jQueryはすべてDOM操作に関するものです。そうでなければ対処する必要がありますが、AngularJSのようなコンポーネントにあなたのアプリケーションを分割することができるフレームワークではありません。

AngularJsの素晴らしい点は、ディレクティブでDOM操作を分離/分離できることです。ng-clickなどの組み込みディレクティブが用意されています。すべてのビューロジックまたはDOM操作を含む独自のカスタムディレクティブを作成して、ビジネスロジックを処理する必要があるコントローラまたはサービスでDOM操作コードを混同しないようにすることができます。

Angularはあなたのアプリをコントローラ - サービス - ビュー - などに分解します。

もう1つのことがありますが、これが指令です。これはDOM要素にアタッチできる属性であり、jQueryがAngularJsコンポーネントと競合するのを心配することなく、またはそのアーキテクチャーを使いこなすことなく、jQueryでナットすることができます。

Angularの創設者の一人は、私が出席した会議から聞いたことに、彼らがDOM操作を分離するために本当に懸命に働いていると言いました。







angularjs