AngularJS(六)非侵入式javascript

轉載出處: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,但其實,它有很好的可讀性,簡單性,可擴展性.

 


發佈了0 篇原創文章 · 獲贊 1 · 訪問量 1萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章