jQuery と AngularJS_AngularJS の違いの簡単な分析-jsチュートリアル-php.cn

私は最近 angularjs を勉強していますが、これまでの jQuery や jQuery に基づいたさまざまなライブラリの設計概念とはまったく異なるということを感じています。これを理解できない場合は、以前に angularjs を学習してください。もしそうなら、長い間勉強した後でも、これが何に使えるのか、どのように使用するのか、UIとどのように組み合わせればよいのか、まだわかっていない可能性があります。記事を見つけました。これについては stackoverflow で説明しましたが、読んだ後は非常に有益でした。これを基に、全員が一緒に学べるように中国語に翻訳しました。

元の質問: jQuery を使用してクライアントアプリケーションを開発することに慣れている場合、必要なパラダイムの変更について説明していただけますか?

1. クライアント Web アプリケーションを設計するときの最大の違いは何ですか?

2. どのテクノロジーの使用を中止し、どのテクノロジーを代替として使用する必要がありますか?

3. サーバー側で考慮する必要があることや制限はありますか?

答え:

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

jQuery では、まずページをデザインしてから、そのコンテンツを動的に変更します。これは、jQuery がこの前提でコンテンツを拡張し、大幅に追加および変更するように設計されているためですが、 angularjs では、最初に頭の中で構造を設計する必要があります。、

最初から、「DOM 要素があり、それに何かをさせたい」という考えを捨てて、「どのようなタスクを達成する必要があるか」に置き換える必要があります。それからアプリケーションを設計し、最後にビュービューを設計する必要があります。層"。

2. jQuery の拡張に angularjs を使用しないでください

したがって、jQuery に特定のことを実行させ、その後 angularjs の機能を追加してモデルとコントローラーを管理させるという考えは持たないでください。したがって、私は通常、AngularJS 開発の初心者に、少なくとも AngularJS 開発モデルに適応するまでは、同時に jQuery を使用することをお勧めしません。しかし、実際に AngularJS の方法に適応し始めると、これは非常に難しいことに気づくでしょう。人を惹きつけるもの。

多くの開発者が angularjs コールバックと $apply メソッドを使用して 150 ～ 200 行のコードで jQuery プラグインをカプセル化しているのを見てきました。この方法ではコードが非常に複雑に見えますが、実際にはこれらのプラグインを実行できます。問題は、ほとんどの場合、jQuery プラグインは angularjs で書き換えることができ、使用するコードの量が非常に少ないことです。同時に、この書き換えによってコードが直感的で理解しやすくなり、これは明らかに angularjs で行うよりも優れています。 jQuery コードを直接カプセル化します。

結局のところ、問題に遭遇したときは、まず angularjs の観点から考える必要があり、解決策が見つからない場合は、コミュニティに助けを求めることができます。 jQuery を使用してください。jQuery を頼りにしないでください。そうしないと、AngularJS をマスターすることはできません。

3. アーキテクチャ中心に考える

まず、単一ページのアプリケーションは Web アプリケーションであることを知っておいてください。これらは従来の複数ページの Web サイトではないため、サーバーとクライアントの開発者として同時に考える必要があります。アプリケーションを独立した拡張可能でテスト可能な部分に分割する方法。

それでは、次に AngularJS の考え方をどのように活用すればよいのでしょうか。jQuery と比較した後の基本的なガイドラインをいくつか示します。

以下はアプリケーションのビュー層です:

jQuery では、ul を使用してこのビューを動的に変更し、ドロップダウンメニューを定義します

コードをコピーコードは次のとおりです:

                                                                                                                                    
jQuery では、次のロジックを使用してこのドロップダウンメニューを使用します

コードをコピー

コードは次のとおりです:

$('.main-menu').dropdownMenu(); このビューを振り返ってみると、その機能はそれほど単純ではないことがわかります。小規模なアプリケーションの場合はこれで問題ありませんが、大規模なアプリケーションの場合、このアプローチは混乱を招き、保守が困難になります。 angularjs では、このビューは実際にはビューベースの関数であり、次のように ul を定義できます

コードをコピーします

コードは次のとおりです:

...

2 つのメソッドは実際には同じことを行いますが、AngularJS メソッドでは、このビューテンプレートを見れば誰でも次に何をすべきかがわかります。新しいメンバーが開発チームに加わるたびに、ここを見ると、ビューを操作するためのドロップダウンメニューと呼ばれる命令があることが分かります。正解を推測したり、他のコードを確認したりする必要はなく、ビューが何をするのかを直接教えてくれます。、jQueryよりも簡単です。

一部の AngularJS 初心者はよくこの質問をします: 特定のタイプのすべてのリンクを見つけて、それに基づいてディレクティブを追加するにはどうすればよいですか。しかし、私たちが「このようにすべきではありません。半分 jQuery 半分 angularjs の考えです」と答えると、 」と驚かれるでしょう。 

問題は、AngularJS のコンテキストで jQuery を使用して何かを実行しようとしているということですが、これは一般に良い方法ではありません。追加されたディレクティブの外側で DOM 操作を行う必要はありません。ビューに直接アクセスできるため、意図はすでに明らかです。最初に設計してから変更するのではなく、最初に構造を作成してから、このフレームワーク内で設計することを忘れないでください。

データバインディング

これは、データバインディングの点で AngularJS の最も注目すべき機能であり、DOM を操作する方法を放棄し、これはすべて AngularJS によって行われ、ビューを自動的に更新する必要はありません。 dom を操作するコードを記述します。jQuery では、次の方法でイベントに応答し、ビューを変更することがよくあります。

コードをコピーします

コードは次のとおりです:

$.ajax({ URL: '/myEndpoint.json', 成功: 関数 (データ、ステータス) { $('ul#log').append('

データを受信しました!

'); } });

そのようなビューと比較して

コードをコピーします

コードは次のとおりです:

混乱の問題に加えて、先ほど述べた自分の意思をどのように示すかという問題もあります。しかし、さらに重要なのは、この DOM ノードを手動で参照して更新する必要があることです。この場合、DOM ノードをどのようにテストすればよいでしょうか。表示方法を変更しますか?

上記のコードは乱雑で壊れやすいように見えますが、AngularJS では次のことができます。

コードをコピーコードは次のとおりです:

$http( '/myEndpoint.json' ).then( function (response) {

$scope.log.push( { msg: 'データを受信しました!' } );

});

ビューは次のようになります

コードをコピーしますコードは次のとおりです:

{{entry.msg }}

その場合、私たちのビューは次のようになります

コードをコピーしますコードは次のとおりです:

ここでは ul を使用せず、Bootstrap のポップアップボックスを使用しますが、コントローラー内のコードを変更する必要はありません。さらに重要なのは、データがどのように変更されたとしても、ビューレイヤーは自動的に変更されることです。したがって、これは非常に簡単です。

ここではデモは行いませんが、データバインディングは双方向であることを知っておく必要があります。ディレクティブを追加することでデータを編集できます。他にも楽しい場所がたくさんあります。

差分モデル層

jQuery では DOM はモデルに似ていますが、AngularJS では jQuery とは異なるモデル層があるため、ビューから完全に独立して管理できます。このアプローチは、データバインディングを実行し、懸念事項の分離を維持するのに役立ち、テスト容易性が向上します。

関心事の分離

上記はすべて、この全体的なトピックに関連しています。分離に焦点を当て、ビューレイヤーでレコードを表示し、モデルレイヤーでデータを表し、これらの再利用可能なタスクを実行するサービスレイヤーを用意します。ディレクティブを使用して DOM 操作を実行し、ビューを拡張してコントローラーに接続します。これが、テスト容易性の向上について他の場所で述べた理由です。

依存性の注入

懸念事項の分離を解決するのに役立つのは、サーバー側の開発者 (Java または PHP) であれば、この概念にすでに慣れているかもしれませんが、クライアント側に携わっている場合は、依存関係注入 (DI) です。このコンセプトは少し冗長で、純粋に流行っているのではないかと思われるかもしれませんが、実際にはそうではありません。

広い観点から見ると、DI はコンポーネントを自由に宣言し、そのコンポーネントからインスタンス化できることを意味しますが、これは当然のことです。ロード順序やファイルの場所などを知る必要はありません。その魔法はすぐには分かりませんが、例としてテストを示します。

アプリケーションでは、REST API を介してサーバー側のストレージを実行するために、アプリケーションの状態とローカルストレージに依存するサービスが必要であると述べましたが、コントローラーをテストするときに、その後サーバーと通信する必要はありません。すべてコントローラーをテストしているだけです。元のコンポーネントと同じモックサービスを追加するだけで、コントローラー自体が違いを認識する必要はありません。

テストについて話しましょう。

4. テスト駆動開発

この部分はアーキテクチャの 3 番目の部分ですが、非常に重要なので最も重要な位置に置く必要があります。

私たちが見たり、使用したり、書いたりしたすべての jQuery プラグインのうち、テストコンポーネントを備えているものはいくつありますか?実際のところ、これは jQuery がテスト中に制御するのが難しいためですが、AngularJS はこれとは異なります。

jQuery でテストする唯一の方法は、デモページを使用して独立したコンポーネントを作成し、テストで DOM 操作を実行できるようにすることです。次に、別のコンポーネントを開発してアプリケーションに統合する必要があります。これは非常に不便です。多くの場合、jQuery を使用して開発するとき、実際にはテスト駆動開発ではなく、繰り返しの開発が多くなります。これを責めることはできますか?

しかし、AngularJS では分離ポイントに焦点を当てることができるため、テスト駆動開発を行うことができます。たとえば、メニュー内の現在のパスを記述するディレクティブがあり、次のようにビューで宣言できます。

コードをコピーコードは次のとおりです:

Hello

さて、この存在しない命令がアクティブなときにテストするテストを作成できます

コードをコピーコードは次のとおりです:

it( 'ルートが変更された場合は「active」を追加する必要があります', inject(function() {
var elm = $compile( 'Hello' )( $scope );

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

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

テストケースを直接実行すると、失敗することがわかります。この時点で、次のようにコマンドを作成する必要があります。

コードをコピーコードは次のとおりです:

.directive( 'whenActive', function ( $location ) {

戻り値 {

スコープ: true、

リンク: 関数 (スコープ、要素、属性) {

scope.$on( '$routeChangeSuccess', function () {

If ( $location.path() == element.attr( 'href' ) ) {

element.addClass( 'active' );

}

else {

element.removeClass( 'active' );

}

});

}

};

});

このテストケースをもう一度実行すると、テストが成功し、要求どおりにメニューが表示されることがわかります。これは非常に優れた反復的でテスト可能なものです。

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

DOM 操作は命令内でのみ実行できるという話をよく聞きますが、これは必須であり、真剣に受け止める必要があります。

早速始めてみましょう、

一部のディレクティブ (ngClass など) はビューを装飾するだけなので、dom を直接操作しても問題ない場合もありますが、ディレクティブがウィジェットに似ていて独自のテンプレートがある場合は、別の問題として扱う必要があります。これは、そのテンプレートをリンクや他のコントローラー機能の実行ロジックから分離する必要があることを意味します。

AngularJS には、この分離を容易にする完全なツールセットがあります。ngClass ディレクティブを使用するとクラスを動的に更新でき、ngBind を使用すると双方向のデータバインディングを実行でき、ngShow と ngHide を使用すると

私たちが独自に作成した多くの命令を含め、プログラムで要素を表示したり非表示にしたりできます。言い換えれば、DOM 操作を行わずにすべての作業を完了できるため、DOM 操作が少なくなり、命令のテストが容易になり、スタイル属性の指定が容易になり、将来の変更も容易になります。再利用や配布が容易になります。

多くの AngularJS 初心者がディレクティブを使用して、jQuery コードの大きなシーケンスをカプセル化しているのを見てきました。つまり、コントローラー内で dom 操作を実行できないため、それをディレクティブに入れることができますが、これよりもはるかに優れています。 dom を直接操作していますが、それでも間違っています。

上記のレコードを見てください。ディレクティブに入れても、dom 操作を実行しない Angular の方法で操作する必要があります。 DOM 操作が必要になることはよくありますが、この状況は思っているよりもはるかにまれです。 DOM 操作を行う必要がある場合、私たちはまず、これをここで行う必要があるかどうかを自問します。これがより良い方法です。

以下は、トグルボタンが必要な、私がよく見るパターンを示す簡単な例です。

コードをコピーコードは次のとおりです:

.directive( 'myDirective', function () {
戻り値 {
テンプレート: '切り替えてください!'、
リンク: 関数 (スコープ、要素、属性) {
var on = false;

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

上記の例では、次のエラーがあります:

1. まず第一に、jQuery は必要ありません。ここでの動作には jQuery はまったく必要ありません。

2. 次に、ページに jQuery を導入したが、それを使用する理由がない場合でも、このプロジェクトに jQuery が導入されていなくても、angular.element を使用してコンポーネントを実行できます。。

3. 3 番目に、命令で jquery が必要であると仮定すると、jqLite を使用して置き換えることができるため、$ を使用する必要はなく、angular.element;

4. 4 つ目は、3 番目の点と密接に関連していますが、link 関数に渡される element 要素は、すでに jQuery オブジェクトである必要はありません。

5. 前に述べたように、テンプレートとロジックを組み合わせてみませんか?

上記のコマンドは次のように書き換えることができ、最も複雑な場合でも非常に単純に見えるようになります。

コードをコピーコードは次のとおりです:

.directive( 'myDirective', function () {
戻り値 {
スコープ: true、
テンプレート: '切り替えてください!',
リンク: 関数 (スコープ、要素、属性) {
スコープ.on = false;

scope.toggle = function () {
スコープ.on = !scope.on;
};
}
};
});

テンプレート要素は template 属性内にあり、そのスタイルを簡単に置き換えることができ、ロジックをまったく変更する必要がないため、完全な再利用が実現します。

テストがしやすい、テンプレートに何を入れてもコマンドAPIが変わらないのでリファクタリングがしやすいなどのメリットもあります。手順を変更せずにテンプレートを何度でも変更できます。どのように変更しても、テストは常に合格します。

つまり、命令は関数などの jQuery コードの集合ではなく、HTML コードの拡張です。HTML コードで必要な機能を実現できない場合は、それを実装する命令を書くことができます。それをHTMLのように使用してください。

別の言い方をすると、AngularJS が余分なことをしないのであれば、ngClick と ngClass 命令をどのように使用できるかを考えてみましょう。

概要

常に jquery を使用する必要はありません。参照さえしないでください。問題に戻ると、途中で止まってしまいます。AngularJS で jquery の方法で問題を解決する方法はご存知でしょうが、使用する場合は、 $ などのセレクターを使用すると、AngularJS を実際にどのように実装するかについて考える必要があります。jQuery を使用せずに実装する方法がわからない場合は、jQuery を使用しないことが最善の方法です。作業量が増加するだけです。