この記事では、2つの簡単なビジネス要件を実装することにより、AngularJと従来のJavaScript制御DOMの実装の違いを調査し、人気のあるWebフロントエンド開発におけるMVWのようなフレームワークのプログラミングアイデアを理解しようとします。
この要件は非常に一般的です。たとえば、2レベルのメニューは、最初のレベルのメニュー項目をクリックすると、対応するサブメニューアイテムを表示または非表示にする必要があります。
jQuery実装：
コードコピーは次のとおりです。
<！ - html->
<ul>
<li>
アイテム1
<ul>
<li>アイテムチャイルド1 </li>
</ul>
</li>
</ul>
// javascript
$（ 'li.parent_item'）。クリック（function（）{
$（this）.children（ 'ul.child'）。toggle（）;
}）
AngularJS実装：
コードコピーは次のとおりです。
<！ - html->
<ul>
<li ng-click = "hide_child =！hide_child">
アイテム1
<ul ng-hide = "hide_child">
<li>アイテムチャイルド1 </li>
</ul>
</li>
</ul>
従来の操作方法については、詳細に説明しません。 AngularJSの実装には、コードの多くの改良が必要であり、HTMLバージョンのみで十分です。上記のコードは、AngularJのこれらの知識ポイントを使用しています。
1.ディレクティブ
2.発現
ng-clickとng-hideはどちらもフレームワークに付属するディレクティブ（命令）です。前者は、LIタグにイベントハンドラーを提供することに相当します。 HTML要素（li）がクリックされると、expression hide_child =！hide_childが実行されます。最初に、割り当ての式結果（ボーアン値）に基づいてHTML要素を表示（CSSを介して実装）するかどうかを制御するNG-Hideディレクティブを見てみましょう。つまり、Hide_Child変数が真である場合、ULは非表示になります。そうしないと、結果が反対になります。
ここで、Hide_Childは実際には$スコープの変数です。その値の変更は、コントローラーコントローラーを使用してメソッドをラップすることも実装できますが、現在のステートメントは比較的単純で、命令の割り当てに直接記述されます。
上記の単純なコード分析により、AngularJの2つの明らかな機能を見ることができます。
1. DOM操作は命令と式を通じてブロックされ、追加のJavaScriptコードは単純なコードを使用するだけで保存されます。
2。指令と式の適用は、HTMLに直接ネストされています。これは、JQueryが押している目立たないJavaScriptのコードスタイルに多少反対です。
まず別の要件を見てから、上記の結論を詳細に説明しましょう。
要件2：divをクリックして、フォームのラジオボタンの選択をトリガーする
従来のHTMLフォーム要素は、今日のモバイルデバイスで動作するのにそれほど友好的ではありません。たとえば、ラジオボタンのラジオボックスには、このコンポーネントを制御するためにタッチスクリーンに正確な位置決めが必要ですが、マニュアル指定の位置は非常に粗いです。一般的な慣行は、対応するラベルコントロールを追加することですが、テキスト自体のスクリーン占有率は理想的ではなく、明確な情報通信効果はありません。したがって、より大きな領域を持つDivまたはLIタグは通常間接的に動作します。
jQuery実装：
コードコピーは次のとおりです。
<！ - html->
<ul>
<li>
<入力型= "Radio"
id = "option1" />
<ラベル= "option1">オプション1 </label>
</li>
</ul>
// javascript
$（ 'li.selection'）。クリック（function（）{
$（this）.children（ 'input [type = "Radio"]'）。クリック（）;
}）
AngularJS実装：
コードコピーは次のとおりです。
<！ - html->
<ul>
<li ng-repeat = "オプションのオプション"
ng-click = "model.option = option.value"
ng-class = "{active：model.option == option.value}">
<入力型= "Radio"
ng-model = "model.option"
value = "{{option.value}}"
id = "option1" />
<ラベル= "option1">オプション1 </label>
</li>
</ul>
このソリューションでは、追加のJavaScriptコードも関与せず、いくつかの追加の指示を使用しました。比較と参照のために、2つの指示ngクリックとng-modelの表現のみを気にします。
まず、入力要素のNGモデル指令を見てみましょう。ここでの割り当ては、テンプレート上の入力を$ scope.modelオブジェクトのオプション属性に関連付けることを意味します。データバインディングをより深く理解するために、データバインディングを参照できます。この指定された関連付けにより、テンプレート制御はデータモデルに直接結合し、このバインディングは双方向です。これは、ユーザーがコントロール内の値を変更すると（無線入力を確認）、対応するモデルオブジェクトが再割り当てされることを意味します（model.option）。同時に、モデルオブジェクトの値が変更された場合、テンプレートの入力制御もそれに応じて変更を反映します。そして、これは実際には、上記のjQueryの実装では達成されていません。
したがって、AngularJSデータバインディングを介して、LI要素をクリックして入力をトリガーするプロセスを間接的に完了することは次のとおりです。
1。Liタグをクリックして、optionに値を割り当てます。
2。モデルオブジェクトを変更し、対応する入力コントロールを見つけます（値の値はmodel.optionです）。
3.入力コントロールのチェックされたプロパティをアクティブにします
上記の2つのケースを通じて、Webフロントエンドの操作を新しい理解しています。
まず、技術的な実装の観点から、指示、式、データバインディングなどの新しい概念を導入することにより、ユーザーやHTMLコンポーネントと相互運用可能なJavaScriptコードの実装だけでなく、まったく新しい方法でDOMを操作できます。この種の思考の変化は巨大です。
今世紀の初めから、ダイナミックウェブプログラミングの台頭、サーバー側のプログラミングテクノロジーが改善されています。当初から、CGI/PHP/ASPは、言語とプラットフォームから.NET対Javaを作成しました。開発効率とソフトウェアプロセスは、MVCフレームワーク/ORM/AOPなどを促進し、パフォーマンスとビッグデータはNodeJS/NOSQL/Hadoopなどをもたらしましたが、ブラウザのフロントエンドの技術的要件はそれほど急進的ではありませんでした。一方では、サーバー側とデータベースを介して、B/Sモデルのビジネスニーズのほとんどを満たすことができます。一方、ブラウザ自体には、異なるプラットフォームと、スクリプト言語の標準とレンダリングテクノロジーとの互換性、およびコンピューティングパワーとセキュリティに関する考慮事項の違いがあります。
この場合、ほとんどの場合、ブラウザはページのレンダリングとシンプルなユーザーインタラクションを検討する必要があります。したがって、HTML/DOM Plus JavasRipt/CSSは、フロントエンドの主要な作業を達成します。したがって、過去にはフロントエンドの労働者はいませんでした。ウェブデザイナーだけが必要でした。徐々に、フロントエンドの要件が増加し、jQueryはJavaScript操作DOMの最も使用されているパッケージライブラリになりました。この段階では、jQuery/javascriptの主なタスクは、ユーザーのブラウザ端末を提示して対話するためのツールにすぎません。
jQueryの起源を理解した後、控えめなJavaScriptなど、過去に追求されたルールの一部が、当時の実装手段と方法に限定されていたことを知ることは難しくありません。 DOMおよびJavaScriptコードロジックを分離するために、メンテナンスの高い方法を好みました。 JavaScriptのフロントエンドの需要が増加した後、MVC/MVPの多くのフロントエンドフレームワークが登場し、AngularJのいわゆるMVW（モデル視界の場合）、およびJavaScriptとDOMのOne-Size-Fitsアプローチが変更されました。もともと、インターフェイスディスプレイとユーザーインタラクションの直接的な動作を検討しましたが、クライアントデータの拘束力、豊富な指示、依存関係の噴射があります。私たちを待っているのは、真新しいプログラミングモデルと考え方になります。