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

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如何不违反？我实际上非常喜欢它,并且发现它非常强大,但是将click事件绑定到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执行此操作,并提供了一种以常规HTML无法实现的方式组织视图的差异范围/上下文的方法.

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

想象一下,能够以你想要标记的方式标记某些东西.试想一下,改变<div id="wrapper">以<wrapper>...

网络正朝着一个巨大的应用程序商店发展,我们需要拥抱它.我们使用的标记不应该对我们起作用,它应该适用于我们.这个规范就是这样做的.为了最终摆脱愚蠢的规则和标准,并为我们,开发人员提供完全的代码自由,因为我们可以为Web带来更加语义,干净和人类可读的标记.

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