2

ディレクティブを発見している間、次のことにぶつかりました：

<div ng-app="twitterApp">
  <div ng-controller="AppCtrl">
    <div enter>Roll over to load more tweets</div>
  </div>
</div>

var app = angular.module('twitterApp', []);   
app.controller("AppCtrl", function ($scope) {
  $scope.loadMoreTweets = function () {
    alert("Loading tweets!");
  }
})

app.directive("enter", function () {
  return function (scope, element, attrs) {
    element.bind("mouseenter", function () {
      scope.loadMoreTweets();
    })
  }
})

彼らは次のように述べています。

したがって、次のようになります。

<div ng-app="twitterApp">
  <div ng-controller="AppCtrl">
     div enter="loadMoreTweets()">Roll over to load more tweets</div>
  </div>
</div>

app.directive("enter", function () {
  return function (scope, element, attrs) {
    element.bind("mouseenter", function () {
       scope.$apply(attrs.enter);
    })
  }
})

しかし、それは戻っていません:

     **<div onClick="loadMoreTweets()">Roll over to load more tweets</div>**

これは私を混乱させます。このようにして、JavaScript が HTML と再び混ざり合ってしまいます。そして、私たちはそれを避けようとしていませんか? 最近は addEventListener() と attachEvent() を使用していますが、これは間違っていると思いますか。

4

2 に答える 2

4

これが私の2セントです。

HTML からすべてのスクリプト呼び出しを必ずしも削除しようとしているわけではありません。スクリプトが機能するために HTML に依存したくないということです。このようにして、HTML を置き換えることができ、配管 (この場合は AngularJS) が引き続き機能することがわかります。壁の角度のある側 (コントローラー、サービス) から、DOM の知識を必要とするもの (ディレクティブは別として) を参照する必要はありません。

これにより、ビジネス ロジック (後でテストできます) とビュー (AI が改善されるまでは人間によるテストがほとんど必要です) が明確に分離されます。

ビューが基になるスクリプトの知識を持っていることを避けられないクリックイベントなどの場合があります。一方が他方を使用すると、それらは接続されます。良い点は、インターフェイスを同じに保つ必要があるAngular側にあり、ビューを台無しにすることなく実際の実装を変更できます(常にインターフェイスと依存関係を置き換えることができます)。

基本的に、このディレクティブを記述して、パラメーターを使用して機能を拡張し、特定のタスクを 1 つだけ実行するのではなく、任意の関数を呼び出すようにすると、このコードを複製して微調整する必要がなくなります (DRY を繰り返さないでください)。

デカップリングはもちろん重要ですが、相互に連携するパーツ間のインターフェースに関するある程度の知識は常に必要です。場合によっては、コードの繰り返しを回避する利点 (したがって、問題や調整があった場合に更新する場所がたくさんある) が、基礎となる構造に関する知識をビューから隠しておきたいという欲求よりも優先されることがあります。

addEventListener/attachEvent はまだここで起こっていることに注意してください。element.bind 呼び出しを参照してください。これにより、複数のイベント ハンドラーが引き続き許可されます。

于 2013-07-10T23:30:51.847 に答える
1

HTML とアプリ ロジックを分離することは、典型的な Web ページでは良い考えでした。そこでは HTML は Web デザイナーによって書かれ、結果の作業は JavaScript を少し追加することによって強化されました。

複雑なビューとプレゼンテーション ロジックが随所にある SPA を作成する場合、HTML のほとんどはプログラマーによって記述されます。Angular は、私たちプログラマーが使用できるデフォルトのディレクティブを備えたデータ バインディング機能を提供しており、それらを使用するのが賢明だと思います。HTML と angular スコープ オブジェクトを緊密に結合した場合でも、Angular は存在しないスコープ プロパティでサイレントに失敗します。したがって、ほとんどの場合、不一致があっても大きな問題は発生しません。

HTMLバインディングが適切ではないことに偏執的である場合は、すべてのディレクティブをチェックし、バインディングの一部が未定義またはnullプロパティにバインドされている場合に警告するデバッグ用のangularサービスを作成できるはずです。

于 2013-07-11T10:10:03.267 に答える