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

也许这不是一个提出这个问题的好地方，但我会尽量做到客观和负责

我一直在玩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>

---

除了使用该框架的个人经验外，有用的答案可能还涉及文档。

过去两年，我一直在一个大型项目上使用Knockout.js（在数据绑定概念方面与angular非常类似）。我看到的在标记中只包含一些函数名而不是整个函数实现的主要优点是，实现可以很容易地更改，而无需更改标记。特别是如果标记不是完全由您控制的，就像我们的情况一样

---

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

我将从您认为可疑的一段代码开始，以及AngularJS与普通HTML和Javascript处理方式的根本区别

这基本上是带有角度指令的HTML。那个 我发现潜在的问题是：

这看起来非常类似于我们10年前写的东西：

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

然而，上面的HTML和AngularJS实现之间有一个根本的区别。对于AngularJS，

archive

函数位于我们可以控制的范围内，并且可以通过使用控制器进行操作。原始JS示例要求

archive

位于全局名称空间中（由于许多原因，这是不好的）

但是，我们仍然可以看到

onclick

事件绑定的作用；这意味着允许一个人以声明方式将行为构建到视图中，并让JS处理实现细节。AngularJS做到了这一点，和提供了一种组织视图的不同范围/上下文的方法，这种方法在常规HTML中是不可能的

是的，AngularJS通过将更多的表示和绑定关注点移动到视图中来扩展HTML。好消息是我们正朝着HTML6的方向前进。以下是一些精选语录：

想象一下，能够按照你想要的方式标记某个东西 向上的想象一下将

更改为

网络正在走向一个巨大的应用商店，我们需要拥抱它。 我们使用的标记不应该对我们不利，它应该对我们有利。 本规范就是要做到这一点。最终摆脱愚昧的规则 和标准，并给我们，开发人员，完全自由的代码，因为我们 请给web带来一个更语义、更清晰、更具可读性的 标记

---

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

这是一个令人费解的观察和问题，也是@vertalapeman的一个很好的回答

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

html的工作不仅仅是作为一个文档，而是作为一个应用程序的表示层，这对我来说是一个更大的工作。为了完成这项工作，Angular（和类似的框架）允许我们以声明的方式对数据和行为进行双向绑定，同时，正如Mantalapeman所指出的，保持数据和行为的范围和独立性以及可测试性

---

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

我最近在研究Angular，并且有完全相同的想法，这不违反关注点分离吗？他们在他们的网站上给出的例子“确实违反了关注点分离！”在过去10年中参与MVVM和MVC之后，我认为Angular是向冷聚变时代的倒退。并不是说冷聚变和角度不强，它们只是糟糕设计的推动者

所有SDLC研究表明，软件总成本的50-60%用于维护，而不是开发！但是大多数开发者认为（由于到期日的原因）他们只需要把它发布出来，值得称赞的是，他们做到了！然而，项目结束后，开发人员离开了，剩下的人都在想如何支持这个代码库

我们已经了解OOP和OOD很多年了，最近刚刚看到一些尝试将Javascript引入到类似JQuery的扩展中，尽管在Javascript真正成为OOD语言之前，它和它的所有扩展都不会真正实现。上面的注释“gloabalvariablesbad”是一个很好的注释，但在强类型语言中，它从来都不是一个问题。这些类型的问题只有在框架支持它的时候才会发生！如果需要的话，强类型语言可以有全局变量，但在这些语言中，作用域是最重要的，它是最先教授的内容之一

我多年来的经验是，程序员在意识到模式之前，首先会很快完成工作

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