Question

我注意到在使用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中抽象出任何JavaScript。我知道Angular有点特殊情况，它使用很多属性，比如方法，但是我可以将DOM和Angular分开，就像我的DOM方法一样吗？

像：

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

Answer 1

你可以这样做，但是你正在破坏声明性绑定语法的重点。

在一天结束时，每一个＆＃34;垃圾＆＃34;你会发现HTML标记很容易剥离。现在尝试在代码中执行相同的操作。

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

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

Answer 2

内联事件处理程序不好的原因是（抛开所谓的不引人注意的JavaScript，无论如何都不会出现Angular应用程序的情况）：

他们引用全局命名空间中的函数。
组合结构和行为。

第一点在Angular案例中无效 - 这些处理程序与特定范围绑定，而不是全局对象。

第二点更微妙。耦合结构和行为很糟糕，因为它很难为这样的应用程序编写单元测试。 Angular团队在"AngularJS" book中解决了这个问题：

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

在Angular中，是的，我们   可以编写包含我们的业务逻辑的控制器   对DOM的引用。问题从未出现在事件处理程序中，但是   而是我们之前需要编写JavaScript的方式。注意   在我们迄今为止所写的所有控制器中，这里和其他地方   在本书中，没有对DOM或DOM事件的引用   任何地方。您可以轻松创建没有DOM的控制器。所有   定位元素和处理事件的工作发生在   角。

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

所以，这里的要点是Angular中的内联处理程序与本地处理程序不同，因此使用它们并不是一种不好的做法。

AngularJS抽象

2 个答案: