【javascript激增的思考03】MVVM与Knockout

时间 2019-11-29

标签 javascript 激增思考 mvvm knockout 栏目 JavaScript 繁體版

原文原文链接

前言

今天搞的有点快，由于上午简单研究了下MVC，发现MVC不太适合前端开发，而后以前看几位前端前辈都推荐前端使用MVVM，可是我对其还不甚了解，因此我以为下午仍是应该先看看他是神马先，后面再决定要不要继续深刻下去。javascript

神马是MVVM？

借用咱们百科一张美图，所谓MVVM就是model-view-viewmodel模型。html

他是微软带来的一项新的技术体验，最早用于WPF，最后发现其模式对前端开发尤为比较合适，因此便在前端流行起来了。前端

MVVM是对MVC的一个改进，用以适应当代Web开发。java

model为数据或者业务逻辑，彻底与UI无关，它存储了状态并对问题领域作出处理，model能够写在代码里面或者用json表示、或者数据表中，反正他就是数据啦。jquery

view表示可见元素，按钮、标签、图片等，咱们可能会对各个标签绑定事件，可是咱们知道这实际上是原来controller该作的事情。json

简单例子中view被直接绑定到model，model的一些部分只是简单单向绑定显示在view中。app

PS：以上至于大家懂不懂，反正我是不懂了。。。用几个字形容就是模模糊糊dom

由于光是读概念没法了解到实质，因此咱们来看看其使用吧！函数

Knockout

以前咱们在写datalist的时候就有朋友提到这个东西，我当时也没有怎么关注，如今一块儿来看看吧：学习

knockout是一个轻量级UI库，经过应用MVVM（主角）模式使javascript前端UI简单化：

声明式绑定（declarative bindings）
使用简单的语法将模型model数据关联到dom元素上

UI界面自动刷新（automatic ui refresh）
当模型状态发生改变（model state），UI自动更新

依赖跟踪(dependency tracking)
为转变联合数据，在你的模型数据之间创建隐式关系

模板（templating）
为模型数据快速编写可嵌套的UI

根据以上描述，咱们来跟进一番：

Knockout是一个以数据模型（data model）为基础的可以帮助你建立富文本，影响显示和编辑用户界面的javascript类库。

任什么时候候如果UI须要更新，knockout可以简单的帮助你实现而且容易维护。

可是究竟这个家伙是个神马呢？我也不知道，因此来试试吧。

初探knockout水深

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
 5     <script src="js/knockout-2.2.0.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         var piliPerson = [
 8                 { name: '叶小钗', desc: '刀狂剑痴', weapon: '刀剑' },
 9                 { name: '素还真', desc: '清香白莲', weapon: '剑' },
10                 { name: '一页书', desc: '百世经纶', weapon: '掌' }
11             ];
12         $(document).ready(function () {
13             var viewModel = {};
14             ko.applyBindings(viewModel);
15         });
16 
17     </script>
18 </head>
19 <body>
20     <select data-bind="options: piliPerson, optionsText: 'name'">
21     </select>
22 </body>
23 </html>

PS：叶大侠以前写了一个dropdownlist与datalist的功能，好像与他有点相似呢：）

咱们再拓宽：

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3     <title></title>
 4     <script src="js/jquery-1.7.1.js" type="text/javascript"></script>
 5     <script src="js/knockout-2.2.0.js" type="text/javascript"></script>
 6     <script type="text/javascript">
 7         var piliPerson = [
 8                 { name: '叶小钗', desc: '刀狂剑痴', weapon: '刀剑', key: 'yxc' },
 9                 { name: '素还真', desc: '清香白莲', weapon: '剑', key: 'shz' },
10                 { name: '一页书', desc: '百世经纶', weapon: '掌', key: 'yys' }
11             ];
12         $(document).ready(function () {
13             var viewModel = {
14                 //observable是一个KO的基础概念，UI可健康(observe)他的值，而且回应他的变化
15                 //这里至关于设置了其选择项，当前选择的素还真
16                 choseObj: ko.observable(piliPerson[1])
17             };
18             ko.applyBindings(viewModel);
19         });
20 
21     </script>
22 </head>
23 <body>
24     <select data-bind="options: piliPerson, optionsText: 'name', value: choseObj">
25     <option ></option>
26     </select>
27     选择了：<span data-bind="text: choseObj().name"></span>
28 </body>
29 </html>

这个例子很精彩，咱们选择后，选择结果会立刻体现出来，初始化固然也是对的：

比较神奇的是，咱们能够在标签里面使用函数了，和最初的.net愈来愈靠近了：

function formatStr(name) {
    return name ? '霹雳人物：' + name : '';
}
<span data-bind="text: formatStr(choseObj().name)"></span>

PS：在此小叶子已经认识到了knockout的强大了，小叶子写的那个算是玩具吧。

PS2：我感受如此使用后，对jquery的依赖下降了哦

惊叹

使用了KO后，彷佛我数据模型发生改变了，可能会发生级联反应哦，曾经可能须要手动操做的事情，如今ko帮咱们作了！！！

结语

通过今天的学习，虽然没能彻底了解MVVM是什么，可是也有所增加，更是发现了ko这个神器，真是不错。

可是，由于咱们最近的学习重点，是咱们的小窗口，因此这里ko暂时放下，在咱们小窗口靠一段落后，咱们一块儿来学习ko先！