Angular学习（七）——关于Javascript的一些建议

在你写Javascript代码的过程中，可能会有人告诉你，你应该用一些常用的Javascript代码，比如在HTML中用click、mousedown和其他一些一些内联事件处理器并不是一个好方法。这个说法以前是正确的。

unobtrusive javascript有很多种解释，但是这种形式的编码原理是按照以下思路进行的：

1、并不是每个用户的浏览器都支持Javascript。让大家都看到你的代码，并且在浏览器中使用你的应用并不需要执行代码。

2、一些小伙伴使用工作机制不同的浏览器。一些使用屏幕阅读器和移动手机的视觉受损的用户无法使用网站上的Javascript。

3、Javascript在不同的平台上运行机制不同。IE浏览器通常是罪魁祸首。你需要根据浏览器的不同来使用不同的时间处理代码。

4、这些时间处理器在全局作用域上引用函数。当你尝试整合其他函数库中带有相同名字的函数时，将会出现很多问题。

5、这些时间处理器包含数据结构和行为。这将导致你的代码更难去应用、扩展和理解。

在大多数情况下，你用这种方式来写Javascript将会更轻松。但另一方面也导致了代码的复杂性和不可读性。此时不能在元素中声明他们需要执行的时间处理器，你需要给这些元素分配相应的ID，获得相应的元素并且能设置一个带有返回值的时间处理器。

在Angular中，我们重新对这些问题进行了处理。

就如前面提到的那样，对于大多数内联事件处理器，Angular有一个相等的方式：ng-evethandler="expression"，其中eventhandler可以被替换为click、mousedown、change等等。如果想在用户点击一个元素的时候获取相应的反应，你可以简单的应用ng-click命令，例如：

<div ng-click = "doSomething()"> ……</div>

这些命令不同于之前的时间处理器，他们有如下特点：

1、在所有的浏览器中的行为都一样。Angular将会为你处理浏览器之间的不同。

2、不要在全局命名作用域上操作。你声明的这个表达式仅仅能够对元素controller作用域内的数据和函数进行操作。

对于上述第二条听起来比较少神秘，所以在此进行声明一下。在典型的应用中，你将创建一个导航栏和内容区域，当你选择不同的菜单栏中的菜单时将导致内容区域变化。我们可以将代码框架设置如下：

<div class = "navbar" ng-controller="NavCOntroller">

<li class = "menu-item" ng-click = "doSomething()">Something</li>

</div>

<div class = "contentArea" ng-controller="contentAreaController">

<div ng-click = "doSomething()">___</li>

</div>

这里当你点击导航栏中的<li>和内容域中的<div>都会调用函数doSomething()。作为一个名开发者，你将在调用代码控制器中的相应的函数。该函数可以使相同的函数也可以是不同函数。

function NavController($scope){

$scope.doSomething = doA;

}

function ContentAreaCOntroller($scope){

$scope.doSomething = doB;

}

在这里doA()和doB()函数可以是相同的，也可以是不同的，根据用户自定义来判断。

在Angular中，我们可以在controllers中包含业务逻辑而不包含相关的DOM。问题从来都不是出现在事件处理器中，而是在我们之前缩写的Javascript中。注意在我们之前所写的所有的Controller中或之后的其他地方，都和DOM或DOM事件没有任何相关。你可以很轻松的在没有DOM的时候创建Controller。所有的对元素和处理事件的工作都发生在Angular中。