这篇主要讲解非入侵式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,但其实,它有很好的可读性,简单性,可扩展性.