angular学习笔记,六-非入侵式javascript

这篇主要讲解非入侵式javascript.

在传统的前端开发中,把js写在html中,称为入侵式的javascript:

<span  onclick="..." </span>

这种做法由于没有把视图和行为分离,而且不易于维护管理,所以已经被淘汰掉.

但是,angular通过改进,很好的解决了这个问题.称为声明式事件处理器.

<!DOCTYPE html>
<html ng-app>
<head>
  <title>3.1.非入侵式js</title>
  <meta charset="utf-8">
  <script src="../angular.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="navBar" ng-controller="NavController">
    <span ng-click="doSome()">A</span>
  </div>
  <div class="content" ng-controller="ContentController">
    <span ng-click="doSome()">B</span>
  </div>
</body>
</html>

页面中的两个span元素都绑定了点击事件回调:doSome()

使用angular的声明式事件处理器,可以兼容所有的浏览器,并且不会再全局命名空间中进行操作.

比如这里的doSome函数,他们都是在各自的作用域下的函数,作用域取决于元素所在的控制器:

function NavController($scope) {
    $scope.doSome = function(){
        alert('a')
    };
}
function ContentController($scope) {
    $scope.doSome = function(){
        alert('b')
    };
}

所以,angular的事件处理器,看似使用了入侵式的javascript,但其实,它有很好的可读性,简单性,可扩展性.