Javascript AngularJS抽象

我注意到在使用angular时，我的HTML中充满了看起来像js的内联代码

例如：

<table>
    <tr>
        <td ng-click="move('nw')" id="nw" ng-bind-template="{{northwest}}"></td>
        <td ng-click="move('n')" id="n" ng-bind-template="{{north}}"></td>
        <td ng-click="move('ne')" id="ne" ng-bind-template="{{northeast}}"></td>
    </tr>
    <tr>
        <td ng-click="move('w')" id="w" ng-bind-template="{{west}}"></td>
        <td ng-click="move('center')" id="center" ng-bind-template="{{center}}"></td>
        <td ng-click="move('e')" id="e" ng-bind-template="{{east}}"></td>
    </tr>
    <tr>
        <td ng-click="move('sw')" id="sw" ng-bind-template="{{southwest}}"></td>
        <td ng-click="move('s')" id="s" ng-bind-template="{{south}}"></td>
        <td ng-click="move('se')" id="se" ng-bind-template="{{southeast}}"></td>
    </tr>
</table>

---

您可以这样做，但您正在破坏声明性绑定语法的要点

最终，你会发现HTML标记中的每一个“垃圾”都很容易被剔除。现在尝试在代码中执行同样的操作

为了实现真正的抽象，您需要在Angular、Knockout和每个绑定（以及其他东西）库上开发一个中立的包装器。类似于HTML绑定提供程序模型

---

这会很有趣，为什么不呢，但是您是否会因为不喜欢无阻碍的模型绑定而浪费时间呢？；）

内联事件处理程序不好的原因是（抛开期望的JavaScript的不引人注目性，Angular应用程序无论如何都不会这样）：

• 它们引用全局命名空间中的函数
• 结构和行为相结合

第一点在角度情况下无效-这些处理程序绑定到特定范围，而不是全局对象

第二点更微妙。耦合结构和行为是不好的，因为它使得为这样的应用程序编写单元测试变得困难。Angular团队在以下章节中对此进行了阐述：

我们可以用一个简单的酸性测试来确定我们的系统 受到这种耦合的影响：我们可以为我们的应用程序创建一个单元测试吗 不需要DOM存在的逻辑

是的，我们 可以编写包含业务逻辑的控制器，而无需 对DOM的引用。问题从来不是在事件处理程序中，而是 而是以我们之前需要编写JavaScript的方式。通知 到目前为止，我们在这里和其他地方编写的所有控制器中 在本书中，没有对DOM或DOM事件的引用 在任何地方您可以在没有DOM的情况下轻松创建这些控制器。全部的 查找元素和处理事件的工作在 棱角分明

在编写单元测试时，这首先很重要。如果你需要 DOM，您必须在测试设置中创建它，并添加到测试中 复杂性。有更多的维护，因为当您的页面更改时， 您需要更改测试的DOM。最后，DOM访问是必需的 慢点。缓慢的测试意味着缓慢的反馈，最终缓慢的发布。 角度控制器测试没有这些问题

---

因此，这里的要点是Angular中的内联处理程序不同于本机处理程序，因此使用它们并不是一种坏做法。

HTML和CSS天生就是用来表示文档的，比如wiki页面。文件很好。。。文件。它们包含相对静态的信息。JS就是为了增强这些页面而诞生的。因此，页面应该在没有JS的情况下运行。不引人注目的JS支持这一点——您的JavaScript是用来“增强”HTML的，但如果没有它，它应该是完全可用的。JavaScript是外部的，并且与文档是分开的，文档也是。。。文件。最近JS变得很快，人们开始了解如何使用它——现在人们正在构建web应用程序，以前的假设不再成立。

var north = document.getElementById("n");
north["ng-click"] = function() { move(this.id); }