AngularJS學習筆記(一) 關於MVVM和雙向綁定

時間 2019-11-15

標籤 angularjs 學習筆記關於 mvvm 雙向綁定欄目 AngularJS 简体版

原文原文鏈接

寫在前面：

由於須要開始學習ng，以前在知乎上聽大神們介紹ng的時候說這個坑如何的大，學了一陣(其實也就三天)，感受ng作的很大很全，在合適的情境你能夠徹底使用ng搞定一切。這一點從諸如jqLite之類的雞肋就能看出來了。因此搞得ng很大。。css

更主要的是，ng用一種和以前徹底不一樣的思惟方式去組織代碼，它就是Model-View-ViewModel(MVVM)。html

這篇文章結構大概是1.MVVM和雙向綁定 2.簡單的購物金額計算的例子(轉自miaov視頻)。若有問題還請看客斧正。^_^前端

1.MVVM和雙向綁定

先上個圖(也是我從別的地方找的)ajax

我對MV*這類架構模式的幾個成員還不是很分的清楚。而angular乍看起來很像模板引擎一類的東西。以往，大部分的內容都是寫在html裏的，可是這樣作對於須要頻繁修改內容的頁面就帶來了一些問題:json

1.每個可能修改的部分可能都須要寫一套邏輯；一樣的，若是用戶經過頁面須要頻繁傳輸信息(事件、文字等)也會須要很多代碼。數組

2.以往在用jq或者js寫代碼的時候，都是以dom操做爲核心的：用選擇器找到dom，而後讓它幹啥。一旦html結構改變，對於那麼代碼就要重寫。架構

而ng來說在這方面就有比較大的優點了app

（1）angular中的MVVM

MVVM的做用歸納來講就是實現表現和數據分離dom

Model(M):數據，數組，對象，json，存儲着內容。post

View(V):視圖，用戶看到的部分，用戶能操做的東西，也許這就是最開始的前端須要作的東西(html+css)

ViewModel(VM):想讓數據展現給用戶，須要必定的邏輯，這一層就是用來處理這些邏輯的。

其實遇到那些個不能寫死在頁面上的，須要js控制的的東西(好比ajax的那些個信息)，其實就有點表現和數據分離的意思了。不過angular把這件事情作得比較完全。更重要的是它能夠自動更新，而不用你去寫偵聽代碼。

MVVM中M和V不能直接通訊，單向雙向都不行，而都須要VM這個中介。爲何這個中介叫VM呢？在我看來，VM自己就是M在js中的一種映射：

ng-controller對應$scope 每一個標籤對應一個ng-model scope的嵌套關係很像dom樹（固然，我以爲在ng中仍是多在scope上作文章，少用dom找元素）。ng的相互自動更新的兩個對象就是VM中的ng-model對應變量和V中的標籤

（2）關於雙向更新

ng-model固然能夠作到雙向綁定。可是並非全部映射都是雙向的，好比{{}}和ng-bind就只能VM到V，而ng-click等事件明顯又是隻能V到VM的。

2.實例：購物金額計算

<!DOCTYPE html>
<html ng-app>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div ng-controller="Aaa">
    <p>單價:<input type="text" ng-model="price"></p>
    <p>數量:<input type="text" ng-model="num"></p>
    <p>費用：<span>{{fee()|currency:'￥' }}</span></p>
    <p>運費：<span>{{post|currency:'￥' }}</span></p>
    <p>總額：<span>{{fee()+post|currency:'￥' }}</span></p>
</div>
</body>
<script src="angular.min.js"></script>
<script>
    function Aaa($scope){
        $scope.price=5;
        $scope.num=1;
        $scope.fee=function(){
            return $scope.price*$scope.num;
        }
        $scope.$watch($scope.fee,function(newVal,oldVal){
            $scope.post=(newVal>=100)?0:10;
        });
    }
</script>
</html>