2013-10-27 16 views
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に散りばめ角度指令にある私がこれですsusupect潜在見つける1:<a href="" ng-click="archive()">archive</a>

ジェフリーゼルドマンがDesigning With Web Standardsと書いたとき、マークアップ(HTML)、プレゼンテーション(CSS)、インタラクション(JS)をメンテナンスのために別々のファイルに分けることがベストプラクティスとなりました。

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

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

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

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

+1

最初の考えは、jQueryとセマンティックマークアップを使用して状態を保存する単一のページアプリケーションを作成し、コードの量、より簡単で角度のあるコードとコードの断片化 - 角度がはるかに小さくなりました。モジュラリティとメンテナンスの容易さまたは強化...角度がはるかに簡単です。トレードオフは、懸念事項の一部を組み合わせる価値があります。IMO – charlietfl

+2

Youre right、これはこの質問の正しい場所ではありません。それは概念的な質問のように思え、それらはhttp://programmers.stackexchange.com/に属しています。 – qodeninja

答えて

9

まず、疑わしいコードと、AngularJSとプレーンHTMLとJavascriptでどのように処理されるかの根本的な違いについて説明します。

これは中振りかけ角度指令に基本的にHTMLである私がこれですsusupect潜在見つける1 :<a href="" ng-click="archive()">archive</a>。これは、我々は10年前に書かれているだろう何かにひどく似

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

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

ただし、イベントバインドが何を意味するのかはまだわかります。これは、宣言的にビヘイビアをビューに構築し、JSに実装の詳細を処理させることを意味していました。 AngularJSはこれを行います。は、通常のHTMLでは不可能な方法でビューの相違スコープ/コンテキストを整理する方法を提供します。

はい、AngularJSは、プレゼンテーションとバインディングの問題の多くをビューに移動することでHTMLを拡張します。良いニュースは、我々はHTML6でその方向に向かっているということです。ここではいくつかの選択の引用符がhttp://html6spec.com/から、次のとおりです。

あなたはそれを アップをマークするために望むように何かをマークアップすることができることを想像してみてください。変わると想像してください<div id="wrapper">から<wrapper> ...

ウェブは巨大なアプリケーションストアに向かっており、私たちはそれを受け入れる必要があります。 私たちが使用するマークアップは、私たちに対しては機能しないはずです。 この仕様はちょうどそれを行うことです。最終的には、曖昧なルールを解消するために、 と標準と私たちに与えるために、我々は としてコード化する自由を全面的に自由にすることができます。 マークアップ。

ところで、AngularJSはHTML6のすばらしさを私たちにもたらしますが、今日はそれを使用できます。ウェブの利用方法は過去15年間で大幅に変化しており、ツールはまだまだ遅れています。私たちのために幸い、未来は光と希望のビーコンであり、AngularJSは未来を現在に戻します。

+0

この回答は有益でも詩的でもあります。 – nickcoxdotme

+3

http://html6spec.com/は、HTML6がどのようなものになるかを正確に示すものではありません。それはただひとりの人が望むものです。著者は公式仕様になると予期していない。 –

+0

archive」は全く意味がありません。インラインJavascript、本当ですか?それは良いアイデアだと誰が思ったのですか?懸念の分離は、data- *属性のせいでフロントエンドで魔法のように消えることはありません。 – qodeninja

1

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

デザイナーは、ビジュアル要件に合わせてマークアップを変更しましたが、データバインド属性を混乱させないように指示しました。もちろん、時にはマークアップを変更してデータバインド属性を変更する必要があることもありましたが、これはほとんどの場合タグを別のタグに移動することを意味しました。実装は変更されませんでした。

3

非常にinterrestingの観測と質問、@ mortalapemanの良い答えです。

私はhtmlの機能を追加したいと思います。私たちの期待するところは変わってきています。私たちは、私たちの行動を文書(HTML)から完全に排除し、文書を汚染することなく文書にフックするようにコードを設定するよう教えられました。

Angularでは、htmlの仕事は単なるドキュメントではなく、アプリケーションのプレゼンテーションレイヤーになります。これは私にとってははるかに大きな仕事です。そして、この仕事を遂行するには、Angular(および同様のフレームワーク)を使用して、私たちのデータと振る舞いを宣言的な方法で結びつけることができますが、mortalapemanが指摘するように、データと振る舞いをうまくスコープで分離し、

実際、私はこれについて考えるように、あなたのhtmlが純粋な文書であるべき位置を維持するのは実際はちょっとばかげていますが、同時にボタンやその他のコントロールが含まれています。資料。たぶんそれは私のものかもしれませんが、逆説的であることがわかります。コントロールを操作するときにどのようなアクションを引き起こすべきかを宣言することは、私には間違いありません。

3

私は最近Angularを研究していましたが、まったく同じ考えを持っていましたが、これは懸念の分離に違反していませんか?彼らのサイトで示した例は、「懸念の分離に違反しますか? MVVMとMVCに過去10年間関わった後、私はAngularがCold Fusionの時代に戻ったと考えています。 Cold FusionとAngularが強くないわけではなく、彼らは悪いデザインの可能性を秘めています。

すべてのSDLC調査では、ソフトウェアの総コストの50〜60%が開発ではなくメンテナンスにあることがわかりました。しかし、ほとんどの開発者は(期日のために)彼らはそこにそれを取得しなければならないと思っており、彼らの信用には、彼らはします!しかし、プロジェクトは終了し、開発者は残し、残りの部分はこのコードベースをサポートする方法が不思議に思えます。

私たちは何年もOOPとOODについて知っていますが、JavascriptがOOD言語となるまで、実際にそこには到達しません。 「gloabal変数が悪い」というコメントは良いコメントですが、強く型付けされた言語では、それは決して心配しません。これらのタイプの問題が発生する唯一の時間は、フレームワークがそれをすぐにサポートするときです。強く型付けされた言語は、必要に応じてグローバル変数を持つことができますが、スコープはそれらの言語では王様であり、教えられた最初のものの1つです。

長年の私の経験では、プログラマーが最初に優れているということです。1)良いテクニックを構成するパターンを認識する前に仕事をすばやく完了してください。 2)重大なリファクタリングを必要とするすべての主要機関に3トンのコードがあります。3)拡張性の問題は、長年に至るまで見られません。4)再ツールへの努力は巨大です!このすべては雇用保障のための良いニュースですが、同時に、なぜ最初から正しくそれをしないのですか?

JQuery、Javascript、Even Angularもその場所を持っていますが、それらは認識していないために悪いデザインを奨励するフレームワークです。イベントハンドラを作成してイベントを作成する機能の中で、すべてのプログラミングで最も重要なパターンが「オブザーバパターン」であることがわかりました。デカップリングはリスト上で非常に高くなります。イベントやイベント処理のチャンスに大きなコードがある場合は、正しい方向に向かっています。あなたがコードを再利用していて、繰り返していないことについて厳格であれば、うまくやっています。最後に、あなたが情熱を持って再考をして、インターフェースベースのプログラミング技術の力を本当に理解しているなら、あなたはうまくやっています。ああ、もう一つの事、あなたが依存性注入がすべてについて知っているなら、あなたはプログラマーの軍隊の5つ星の将軍です。 3月、良い兵士たち!

+0

2014年に私はまだでしたJavascriptを好まないそれ以来、私はファンになった。 Angularコメントまでは、優れたプログラマはすぐにアンチパターンを見て、可能な限りそのパターンを明確にします。角度は良いですが、ReactとAureliaもうまく暖まるようです。 –

関連する問題