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，其中包含了Angular指令。我发现可能会怀疑的是：<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中处理它的方式之间的根本区别。

这基本上是带有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执行此操作， AND 提供了一种以常规HTML无法实现的方式组织视图的差异范围/上下文的方法。

是的，AngularJS涉及通过将更多的表示和绑定问题移到视图中来扩展HTML。好消息是我们正在用HTML6前进。以下是http://html6spec.com/的一些选择引用：

想象一下，能够以您想要标记的方式标记某些内容   起来。想象一下，将<div id="wrapper">更改为<wrapper> ...

网络正朝着一个巨大的应用程序商店发展，我们需要拥抱它。   我们使用的标记不应该对我们起作用，它应该对我们有用。   这个规范就是这样做的。最终摆脱愚蠢的规则   和标准，并给我们，开发人员，我们完全自由编码   请让网络更具语义，清晰和人性化   标记。

在某种程度上，AngularJS为我们带来了HTML6的所有优点，但允许我们今天使用它。在过去15年中，网络的使用方式发生了巨大变化，我们的工具仍远远落后。幸运的是，未来是光明和希望的灯塔，AngularJS将未来带回现在。

Answer 2

相当有趣的观察和问题，以及@mortalapeman的一个很好的答案。

我想补充说html的功能，以及我们对它应该做的事情的期望正在改变。我们已经被教会将我们的行为完全排除在文档（html）之外，而是将我们的代码设置为挂钩到文档而不会污染文档。

使用Angular，html的工作不仅仅是成为一个文档，而是应用程序的表示层，对我来说这是一个更大的工作。为了完成这项工作，Angular（和类似的框架）允许我们以声明的方式对我们的数据和行为进行双向绑定，而Mortalapeman指出，保持我们的数据和行为很好地限定和分离，以及可测试。

事实上，现在我想起来，保持一个你的html应该是纯文档的位置实际上有点傻，但同时包含按钮和其他控件，表明它不仅仅是一个文档。也许只是我，但我觉得这很矛盾。我完全理解我们声明在操作控件时应该触发什么操作。

Answer 3

我最近正在研究Angular并且有着完全相同的想法，这是否违反了关注点？他们在他们的网站上提供的例子“确实违反了关注点！”在过去10年参与MVVM和MVC之后，我认为Angular是退回Cold Fusion时代的一步。并不是说Cold Fusion和Angular不强，它们只是糟糕设计的推动因素。

所有SDLC研究表明，软件总成本的50-60％是维护，而不是开发！但是大多数开发人员认为（因为截止日期）他们只需要把它拿出去，而且值得赞扬的是，他们这样做了！但是，项目结束，开发人员离开，其余的人不知道如何支持这个代码库。

我们已经了解OOP和OOD多年，最近才看到尝试通过JQuery这样的扩展将Javascript引入这个问题。虽然直到Javascript真正成为OOD语言它和它的所有扩展，都不会真正实现。上面的评论“gloabal变量很糟糕”是一个很好的评论，但在强类型语言中，它绝不是一个问题。这些类型的问题发生的唯一时间是框架支持它开箱即用！如果需要，强类型语言可以拥有全局变量，但是在这些语言中确定范围是最重要的，它是最早教授的东西之一。

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

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

Answer 4

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

设计师改变了标记以适应视觉要求，而我们只是告诉他不要弄乱数据绑定属性。当然，有时他会更改标记以至于我们需要更改数据绑定属性，但这主要意味着将它们从一个标记移动到另一个标记，实现没有改变。

关注的角度和语义标记/分离

4 个答案: