knockoutJS学习笔记03：knockout简介

　　通常来说，前端的维护难度是比较大的，特别是脚本，虽然像jquery这样的库可以帮助我们减少很多代码，但在稍微复杂的情况下，还是会产生有很多代码。上一篇介绍了模板引擎jsRender，它可以帮我们快速生成html，减少代码的编写，增强代码的可阅读性和可维护性。但最后也说到，它还是不够强大。

一、mvvm

　　说到mvvm，就想到以前学过的wpf，虽然学得一般...,对比winform，wpf 里面有很多很好的设计和想法，标签控件、数据驱动、依赖属性... 。更关键的是，它是以数据为核心，通过数据驱动UI。通常，数据在整个程序都占着核心地位，我们希望对数据进行操作，而不是对UI。

　　假设一种最简单的场景：有5个input text，我们需要从后台获取数据然后为它们赋值，并且可以修改这些值重新提交到后台。赋值：$(".class1").val(data1);$(".class2").val(data2);...。 获取值：var data1 = $(".class1").val();var data2 = $(".class2").val();...。 可以看到，如果操作多了，这种过程依旧非常繁琐。

　　mvvm 是一种创建用户界面的设计模式，解释为：模型-视图-视图模型。这三者的职责分别为：

　　模型：表示业务领域的对象和数据操作。

　　视图：用于展示数据和交互的UI。

      视图模型：包括与视图相关的所有数据和可视化业务逻辑。通常我们的模型不一定与UI一一对应，也就是说模型需要加工和处理后才能用于展示，视图模型就是这个作用，把模型处理为适合UI的模型。

　　这里举一个例子：页面有一个显示人员信息的列表，包括修改和删除两个操作。

　　视图：已经被我们描绘出来了。

　　模型：一个person实体对象，和修改、删除两个操作。

　　视图-模型：一个person列表，用于视图绑定，包括修改和删除两个操作。

　　以ui操作修改为例子，会触发view-model里修改操作，而这个操作会调用model里的修改操作。

二、knockout

　　knockout (简称ko)就是一个mvvm前端框架。

　　引用官网的介绍：ko是一款很优秀的JavaScript库，它可以帮助你仅使用一个清晰整洁的底层数据模型（data model）即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新（比如：依赖于用户行为的改变或者外部的数据源发生变化），ko都可以很简单的帮你实现，并且非常易于维护。

　　简单的说，用了ko之后，ui和我们的数据就绑定在一起了，而且是双向绑定。对于上面5个input text的例子，我们完全不用去操作dom就可以实现赋值或获取值操作。

　　浏览器兼容性问题。微软开发的，兼容所有主流浏览器，也兼容低版本ie。

　　ko与 jquery。这两者本身是不冲突的，完全可以配合使用。例如在数据方面用ko，在动画方面用jquery。

三、简单例子

　　写了那么多文字，看看一个简单的例子。下载ko.js，代码如下，可以看到轻松完成数据绑定。

　　html:

?

1	name:<input type="text" data-bind="value:name" />,age:<input type="text" data-bind="value:age" /><br>name:<span data-bind="text:name"></span>

　　js:

?

1 2 3 4 5 6

function Person(name,age){ 　　this.name = ko.observable(name); 　　this.age = ko.observable(age); } var person = new Person("tom",18); ko.applyBindings(person);

四、总结

　　理解mvvm的概念对于学习ko还是非常重要的。下一篇将开始学习ko的相关语法。