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>

正如上面说的，由于input须要向VM传输数据，因此使用 ng-model。而span标签中的三项只是须要VM到V就能够了，因此用了双大括号。

其中涉及到的ng的语法啥的就不说了，$scope之后会详细的说明。稍微提一下$watch，它在我看来相似一个事件，这个事件在指定的变量改变/方法执行的时候触发。它能够把两个变量(ng-model)创建起联系。让一个ng-model随着另外一个的变化而变化。

固然这种变化是单向的，我猜测要是两个变量互相写$watch的话会发生比较恐怖的事情吧，有空试一试~

第一部分到此结束，下一步会写一个表单验证相关的例子，里面会提到ng-repeat和filter。