这篇主要讲解非入侵式javascript.
在传统的前端开发中,把js写在html中,称为入侵式的javascript:
<span id="select_area" 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,但其实,它有很好的可读性,简单性,可扩展性.