15

ここで質問するのは適切ではないかもしれませんが、できるだけ客観的で回答しやすいように努めます。

私は Angular.js で遊んでいて、とても気に入っていますが、その哲学について質問があります。これは、コントローラーの Angular サイトからのコードのスニペットです。

   <div ng-controller="TodoCtrl">
      <span>{{remaining()}} of {{todos.length}} remaining</span>
      [ <a href="" ng-click="archive()">archive</a> ]
      <ul class="unstyled">
        <li ng-repeat="todo in todos">
          <input type="checkbox" ng-model="todo.done">
          <span class="done-{{todo.done}}">{{todo.text}}</span>
        </li>
      </ul>
      <form ng-submit="addTodo()">
        <input type="text" ng-model="todoText"  size="30"
               placeholder="add new todo here">
        <input class="btn-primary" type="submit" value="add">
      </form>
    </div>

これは基本的HTMLに Angular ディレクティブが散りばめられたものです<a href="" ng-click="archive()">archive</a>

Jeffrey Zeldman がDesigning With Web Standardsを書いたとき、保守性のためにマークアップ (HTML)、プレゼンテーション (CSS)、および対話 (JS) を別々のファイルに分けることがベスト プラクティスになりました。

私の質問は、Angular がこれに違反しないのはなぜですか? 私は実際にそれを本当に楽しんでおり、非常に強力だと感じていますが、クリックイベントをaマークアップのような要素にバインドすることと、このウェブ標準以前のコードの痕跡を書くことの違いは何ですか:

<a href='#' onClick='showAlert()'>Click here</a>

<script>
    var showAlert = function(){
      alert('hey');
    }
</script>

役立つ回答は、フレームワークを使用した個人的な経験に加えて、ドキュメントを参照する場合があります。

4

4 に答える 4

9

まず、疑わしいと思われるコード部分と、AngularJS とプレーンな HTML および Javascript での処理方法の根本的な違いから始めます。

これは基本的に、Angular ディレクティブが散りばめられた HTML です<a href="" ng-click="archive()">archive</a>

これは、10 年前に書いたものと非常によく似ています。

<a href="" onclick="archive()">archive</a>

ただし、上記の HTML と AngularJS の実装には根本的な違いがあります。AngularJS の場合、archive関数は私たちが制御するスコープにあり、コントローラーを使用して操作できます。生の JS の例archiveでは、グローバル名前空間にある必要があります (これは多くの理由で良くありません)。

onclickただし、イベント バインディングの目的はまだわかります。これは、ビューに動作を宣言的に組み込むことを可能にし、JS が実装の詳細を処理できるようにすることを意味していました。AngularJS はこれを行い、通常のHTMLでは不可能な方法でビューのスコープ/コンテキストの違いを整理する方法を提供します。

はい、AngularJS は、より多くのプレゼンテーションとバインディングの問題をビューに移動することによって、HTML を拡張することを伴います。良いニュースは、HTML6 でその方向に向かっていることです。以下は、 http : //html6spec.com/ からの引用の一部です。

マークアップしたい方法で何かをマークアップできると想像してみてください。に変わることを想像し<div id="wrapper">てください<wrapper>...

Web は巨大なアプリ ストアへと移行しており、私たちはそれを受け入れる必要があります。私たちが使用するマークアップは、私たちに不利に働くべきではなく、私たちのために働くべきです。この仕様はまさにそれを行うためのものです。最終的には面倒なルールや標準から解放され、私たち開発者にコーディングの完全な自由を与えるために、よりセマンティックでクリーンで人間が読めるマークアップを Web にもたらすことができます。

ある意味では、AngularJS は HTML6 のすべての利点をもたらしてくれるだけでなく、現在でもそれを使用できるようにしています。Web の使用方法は過去 15 年間で劇的に変化しましたが、ツールは依然として大きく遅れをとっています。幸運なことに、未来は光と希望の光であり、AngularJS は未来を現在に戻します。

于 2013-10-27T17:35:54.147 に答える
3

私は最近Angularを勉強していて、まったく同じ考えを持っていました.これは関心の分離に違反していませんか? 彼らが彼らのサイトで提供している例は、「関心の分離に違反してください!」です。過去 10 年間 MVVM と MVC に携わってきた私は、Angular は Cold Fusion の時代に戻ったと考えています。Cold Fusion と Angular が強力ではないというわけではありません。それらは悪い設計を可能にするだけです。

すべての SDLC 調査では、ソフトウェアの総コストの 50 ~ 60% が開発ではなく保守に費やされていることが示されています。しかし、ほとんどの開発者は、(期限があるため) ただそれを世に出さなければならないと考えています。しかし、プロジェクトは終了し、開発者は去り、残りはこのコード ベースをどのようにサポートするか迷っています。

私たちは OOP と OOD について何年も前から知っており、最近では Javascript を JQuery のような拡張機能でこの問題に持ち込もうとする試みを見てきました. 上記の「グローバル変数は悪い」というコメントは良いコメントですが、厳密に型指定された言語では、決して問題にはなりません。この種の問題が発生するのは、フレームワークがすぐに使用できる場合のみです。強く型付けされた言語は、必要に応じてグローバル変数を持つことができますが、これらの言語ではスコーピングが重要であり、最初に教えられることの 1 つです。

長年にわたる私の経験では、プログラマーは最初に 1) 優れたテクニックを構成するパターンを認識する前に、仕事をすばやく完了します。2) すべての主要な機関には、深刻なリファクタリングが必要な大量のコードがあります 3) 拡張可能な問題は、何年も後まで見られません 4) ツールを再構築するための労力は膨大です! これらはすべて、雇用の安定にとって朗報ですが、同時に、最初から正しく実行してみませんか?

JQuery、Javascript、さらには Angular にもその役割がありますが、これらはフレームワークでもあり、知らない人にとっては悪い設計を助長します。すべてのプログラミングで最も重要なパターンは「オブザーバー パターン」であることがわかりました。これは、イベント ハンドラーを作成し、イベントを作成する機能に見られます。次に、デカップリングもリストの非常に上位になります。イベントに大きな影響を与えるコードがあり、イベント処理の可能性が高い場合は、正しい方向に向かっています。コードを再利用し、同じことを繰り返さないように厳密に取り組んでいる場合は、うまくいっています。最後に、情熱を持ってリファクタリングを行い、インターフェイス ベースのプログラミング手法の威力を本当に理解している場合は、うまくやっていると言えます。そうそう、もう 1 つ、依存性注入とは何かを知っているなら、あなたはプログラマー軍の 5 つ星将軍です。行進、

于 2014-09-24T13:01:10.093 に答える
3

非常に興味深い観察と質問であり、@mortalapeman による適切な回答です。

html の機能と、それが何をするべきかについての私たちの期待が変化していることを付け加えたいと思います。私たちは、振る舞いをドキュメント (html) から完全に切り離し、ドキュメントを汚染することなくドキュメントにフックするようにコードをセットアップするように教えられてきました。

Angular では、html の仕事は単にドキュメントになることではなく、アプリケーションのプレゼンテーション レイヤーになることです。私にとっては、これははるかに大きな仕事です。そして、この仕事を遂行するために、Angular (および同様のフレームワーク) を使用すると、宣言的な方法でデータと動作を双方向バインディングできますが、mortalapeman が指摘するように、データと動作を適切にスコープ化して分離し、テスト可能に保つことができます。

実際、考えてみると、HTML は純粋なドキュメントであるべきであると同時に、ボタンやその他のコントロールを含んでいて、それがドキュメント以上のものであることを示しているという立場を維持するのは、実際には少しばかげています。私だけかもしれませんが、逆説的だと思います。コントロールを操作するときにどのアクションをトリガーするかを宣言することは、私にとって完全に理にかなっています。

于 2014-03-09T02:03:43.353 に答える
1

過去 2 年間、大規模なプロジェクトで Knockout.js (データ バインディングの概念に関しては angular にかなり似ています) を使用しています。関数の実装全体ではなく、一部の関数名のみをマークアップに含める主な利点は、マークアップを変更せずに実装を簡単に変更できることです。特に、私たちの場合のように、マークアップがあなたによって完全に制御されていない場合.

デザイナーは視覚的な要件に合わせてマークアップを変更しましたが、データ バインド属性をいじらないように指示しただけです。もちろん、彼はマークアップを大幅に変更して、データ バインド属性を変更する必要が生じることもありましたが、これはほとんどの場合、あるタグから別のタグに移動することを意味し、実装は変更されませんでした。

于 2013-10-27T15:41:49.380 に答える