轉載出處:http://www.cnblogs.com/liulangmao/p/3716181.html
這篇主要講解非入侵式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,但其實,它有很好的可讀性,簡單性,可擴展性.