angular學習筆記(六)-非入侵式javascript

詩&遠方發表於2014-05-08
Angular筆記JavaScript

這篇主要講解非入侵式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,但其實,它有很好的可讀性,簡單性,可擴充套件性.

 

相關文章