代码之家 › 专栏 › 技术社区 › nickcoxdotme

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

standards angularjs html javascript

nickcoxdotme · 技术社区 · 11 年前

也许这不是一个问这个问题的好地方,但我会尽可能客观和负责。

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

杰弗里·泽德曼写的时候 Designing With Web Standards ,为了便于维护,将标记(HTML)、表示(CSS)和交互(JS)分离到不同的文件中成为了一种最佳实践。

我的问题是,Angular如何不违反这一点?事实上,我真的很喜欢它,并发现它非常强大,但将点击事件绑定到 a 元素,并编写此web标准之前代码的残余:

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

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

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

4 回复 | 直到 11 年前

mortalapeman 11 年前

我将从您发现可疑的一段代码开始,以及AngularJS与纯HTML和Javascript处理方式之间的根本区别。

这基本上是HTML,其中穿插了Angular指令我发现潜在的怀疑是: <a href="" ng-click="archive()">archive</a> .

这看起来与我们10年前写的内容非常相似:

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

然而,上面的HTML和AngularJS实现之间有一个根本的区别。对于AngularJS archive 函数位于我们控制的范围内,并且可以通过使用控制器进行操作。原始JS示例要求 档案文件 位于全局命名空间中(由于多种原因,这很糟糕)。

但是,我们仍然可以看到 onclick 事件绑定是要做的;它的目的是使人们能够以声明的方式将行为构建到视图中,并让JS处理实现细节。AngularJS这样做, 以及提供了一种以常规HTML无法实现的方式来组织视图的不同范围/上下文的方法。

是的,AngularJS通过将更多的表示和绑定问题移动到视图中来扩展HTML。好消息是,HTML6正朝着这个方向发展。以下是一些精选的引号 http://html6spec.com/ :

想象一下,能够以你想要的方式标记一些东西向上的想象一下变化 <div id="wrapper"> 到 <wrapper> ...

网络正在向一个巨大的应用商店发展,我们需要接受它。我们使用的标记不应该对我们不利,它应该对我们有利。这个规范就是为了做到这一点。最终摆脱愚昧的规则和标准,让我们,开发人员,完全自由地编写代码请给网络带来更语义、更干净、更人性化的可读性加成

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

Gaute Løken 10 年前

这是一个很有趣的观察和问题,也是@mortalapeman的一个很好的回答。

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

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

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

JWP 10 年前

我最近在研究Angular,有着完全相同的想法,这不是违反了关注点分离吗?他们在自己的网站上给出的例子“确实违反了关注点分离!”在过去10年里参与MVVM和MVC之后,我认为Angular是回到冷融合时代的一步。并不是说Cold Fusion和Angular不强大,它们只是糟糕设计的推动者。

SDLC的所有研究都表明,软件总成本的50-60%用于维护,而不是开发!但大多数开发商认为(因为截止日期)他们只需要把它拿出来,值得称赞的是,他们做到了!然而,项目结束了,开发人员离开了,剩下的人想知道如何支持这个代码库。

我们对OOP和OOD已经了解多年了,最近才看到有人试图通过JQuery等扩展将Javascript引入这一领域。尽管在Javascript真正成为OOD语言之前,它及其所有扩展都不会真正实现。上面的注释“gloabal variables are bad”是一个很好的注释,但在强类型语言中,这从来都不是一个问题。只有当框架开箱即用地支持它时,才会发生这些类型的问题!如果需要的话,强类型语言可以有全局变量,但在这些语言中,作用域是最重要的,这是最先教授的内容之一。

这些年来,我的经验是,程序员首先要快速完成工作,然后才能识别出构成良好技术的模式。2) 每个主要机构都有大量的代码需要重新分解3)可扩展性的问题直到多年后才出现4)重新工具的努力是巨大的!所有这些对工作保障来说都是好消息,但与此同时,为什么不从一开始就正确地做呢?

JQuery、Javascript甚至Angular都有自己的位置,但它们也是鼓励那些不知情的人进行糟糕设计的框架。我发现在所有编程中最重要的模式是“观察者模式”,我们可以从创建事件处理程序和创建事件的能力中看到它。然后,去耦也变得非常重要。如果您的代码在事件上很重要,并且事件处理的机会很大,那么您正朝着正确的方向前进。如果您正在重用代码,并且严格要求不重复某些事情,那么您做得很好。最后,如果你满怀热情地重新考虑,并真正理解基于接口的编程技术的力量,那么你做得很好。哦,是的,还有一件事,如果你知道依赖注入是什么,你就是程序员大军中的五星将军。继续前进,好士兵!

pax162 11 年前

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

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