knockoutJS学习笔记03：knockout简介

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

1、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里的修改操做。

2、knockout

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

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

　　简单的说，用了ko以后，ui和咱们的数据就绑定在一块儿了，并且是双向绑定。对于上面5个input text的例子，咱们彻底不用去操做dom就能够实现赋值或获取值操做。

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

　　ko与 jquery。这二者自己是不冲突的，彻底能够配合使用。例如在数据方面用ko，在动画方面用jquery。

3、简单例子

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

　　html:

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

　　js:

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

4、总结

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