MVVM模式

发布时间:2019-01-30 作者:大扑棱蛾子 阅读次数:
版权声明:未经允许不得转载至微信公众号,转载至个人博客请注明出处。 阅读原文

事件驱动

事件驱动:简单的理解就是用的操作触发了事件,事件触发了监听(js方法),然后监听执行业务逻辑代码进行数据处理、跳转页面或更新DOM等操作。

image.png

传统的事件驱动模式,在页面触发事件之后,需要触发js的方法来请求数据或处理数据,然后重新对页面进行渲染,而这个渲染只直接操作DOM的。在改变少量页面DOM的情况下,这种方法是可以被接受的,但是在页面非常复杂,并且需要改变大量页面数据的情况下,这种方式足以让人崩溃。而且还需要考虑重新渲染的元素的事件绑定正确性。经常会出现js方法里面有大量的HTML代码,导致代码的可读性和可维护性极低。

后来就出现了Template 也就是模板。于是模式变成了下面的样子
image.png

这种方式基本解决了上面的问题,但是也不够完美。因为现在市面上的js模板框架提供的可用的语法很少,并不能解决全部的业务需求。只能解决大部分的需求。当然在前端(指企业商城、门户等)这种方式能够给开发者带来很大的帮助。最主要的是这种方式可以兼容IE8及以上的浏览器。

附上一个模板库链接:https://aui.github.io/art-template/

但是现在有了一种更好的解决方案:MVVM,这种方案需要es6(或叫ES2015、ECMAScript 6都是一回事儿)才能支持,也就是说需要IE10及以上的浏览器才能支持。目前常用的框架有Vue、Angular、React。

数据驱动

数据的变更影响页面的展示。核心技术其实是用的js的Get/Set访问器。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE html>
<html >
<head>
</head>
<body>
<input id="testInput" >
<p />
<button id="increase" onclick="increase()">递增</button>
</body>
</html>
<script>
class FormNumberItem {

constructor(element, initVal = 0) {
this._value = null;
this.element = element;
this.value = initVal; // 设置初始值
}

get value() {
return this._value;
}

set value(val) {
this._value = val;
this.element.value = val;
}
}

let item = new FormNumberItem(document.getElementById('testInput'), 10);

function increase() {
item.value = item.value + 1;
}

</script>

FormNumberItem是定义的一个类,这个类与一个DOM元素(必须是input元素)绑定,当value发生变化时更新DOM元素的值。
查看例子:https://data-driven-demo.stackblitz.io

当我们使用item.value=xxx这种方式给value属性赋值的时候会触发set value(val)方法,在这个方法中给_value赋了值,并且更新了DOM的值。给_value赋值的目的是为了在使用item.value时能获取到最新的值。

这就是一个简单的数据驱动的例子。

单向绑定

image.png

就是数据发生变更时,触发视图发生变更。就是下图这样
image.png

当类AppComponent中的name发生变化是,view中input的value也会跟着变。但是当我们在页面上改变input的value时,AppComponent中的name是不会发生变化的。

实例参考:https://angular-xkz2ji.stackblitz.io

双向绑定

image.png

双向绑定就是model中数据的变化会触发视图的变化,视图中的变化也会更新到model。

实例参考:https://angular-tmhhcy.stackblitz.io

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×