角度和语义标记/分离问题

Question

也许这不是一个好的地方问这个问题，但我会尽量使它尽可能客观和尽可能的回答。

我一直在玩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的一个是这样的：<a href="" ng-click="archive()">archive</a>。

当Jeffrey Zeldman写道Designing With Web Standards时，为了可维护性，将标记（HTML），表示（CSS）和交互（JS）分隔到不同文件中成为最佳实践。

我的问题是，Angular如何不违反这个规定？我真的很喜欢它，并且发现它非常强大，但是将点击事件绑定到a元素（如标记中）与编写Web标准代码之前的这种痕迹之间有什么区别：

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

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

除了个人使用框架的经验之外，有用的答案可能指的是文档。

Answer 1

我将从您觉得可疑的一段代码开始，以及它在AngularJS与纯HTML和Javascript中的处理方式之间的根本区别。

这基本上是HTML与洒角指令的一个 ，我觉得可能susupect是这样的：<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> ...

网络正在向一个巨大的应用商店发展，我们需要拥抱它。 我们使用的标记不应该对我们不利，它应该为我们工作。 这个规范就是这样做的。为了最终打破免费的错误规则 和标准，并给我们，开发人员，完全自由的代码，因为我们 请带给网络更多的语义，干净，和人类可读 标记。

从某种意义上说，AngularJS为我们带来了HTML6的所有优点，但是我们今天可以使用它。在过去的15年里，网络的使用情况发生了巨大的变化，我们的工具仍然远远落后。对我们来说幸运的是，未来是光明和希望的灯塔，而AngularJS将未来带回现在。

Answer 2

过去两年来，我一直在大型项目中使用Knockout.js（这与数据绑定概念中的角度非常相似）。我看到在标记中只有一些函数名称而不是整个函数实现的主要优点是可以在不更改标记的情况下轻松更改实现。特别是如果你的标记没有完全控制，就像我们的情况一样。

设计师改变了标记以符合视觉要求，而我们只是告诉他不要混淆数据绑定属性。当然，有时候他会很大程度地改变标记，以至于我们需要改变数据绑定属性，但这主要是将它们从一个标记移动到另一个标记，实现没有改变。

Answer 3

非常有趣的观察和问题，以及由@mortalapeman提供的良好答案。

我想补充一点，html的功能，以及我们对它应该做什么的期望正在改变。我们已经被教导将我们的行为完全排除在文档（html）之外，并且设置我们的代码以挂钩文档而不污染文档。

随着Angular的HTML的工作不仅仅是一个文件，它是一个应用程序的表示层，这对我来说是一个更大的工作。为了完成这项工作，Angular（和类似的框架）允许我们以声明的方式对数据和行为进行双向绑定，同时，正如mortalapeman指出的那样，保持我们的数据和行为的范围和分离以及可测试。实际上，现在我想到了它，实际上有点愚蠢的做法是保持你的html应该是一个纯文档，但同时包含按钮和其他控件，表明它不仅仅是一个纯文档文件。也许这只是我，但我觉得这很矛盾。对于我来说，我们声明在操作控件时应该触发什么操作是非常合理的。

Answer 4

我最近在学习Angular，并有完全相同的想法，这不违背分离的担忧吗？他们在他们的网站上给出的例子“是否违背了关注点的分离！”在过去的10年里，MVVM和MVC参与其中之后，我认为Angular已经回到了Cold Fusion的日子。并不是说Cold Fusion和Angular不够强大，它们只是造成糟糕设计的原因。

所有SDLC研究表明，软件总成本的50-60％在维护，而不是开发！但是大多数开发人员认为（由于到期日期）他们只需要把它拿出来，并且为了他们的功劳，他们做到了！然而，项目结束了，开发人员离开了，其余的人都想知道如何支持这个代码库。

我们已经了解了OOP和OOD多年，最近刚刚看到尝试将Javascript引入到像JQuery这样的扩展中。尽管直到Javascript真正成为OOD语言，它和它的所有扩展才会真正达到目的。上面的评论“gloabal变量很糟糕”是一个很好的评论，但在强类型语言中，它从来不是一个问题。这些类型的问题发生的唯一时间是框架支持它的开箱即用！如果需要，强类型语言可以具有全局变量，但范围在这些语言中是王者，并且这是所教的第一件事情之一。

我多年来的经验是，程序员是第一个1）在他们认识到构成好技术的模式之前快速完成工作。 2）每个主要机构都有大量的代码需要严格的重新分解3）可扩展的问题直到多年后才出现4）重新工具的努力是巨大的！所有这些对于工作保障来说都是好消息，但同时，为什么不从一开始就正确地做到这一点呢？

JQuery，Javascript甚至Angular都有它们的位置，但它们也是鼓励那些不知道的设计不当的框架。我发现在所有编程中最重要的模式是“观察者模式”，我们在创建事件处理程序和创建事件方面看到了这种模式。解耦在列表中也变得非常高。如果你的代码对事件和事件处理机会来说很重要，那么你就是朝着正确的方向前进。如果你重复使用代码并严格要求不重复你做得很好的事情。最后，如果你想要充满激情地重新考虑因素，并真正理解基于接口的编程技术的强大功能，那么你的表现不错。哦，是的另一件事，如果你知道什么是依赖注入，你是程序员军队中的五星级将军。三月，好战士！