MVVM框架中Angular是好，但这么大而全的框架，学习难度可不低呢，上手起码也得要个一两周吧。而knockoutjs专注于数据绑定，只需一两天就可以投入使用了，学习成本不要太低！在前端进化如此迅速的时代，学习成本也是不得不考虑的一个因素。很多时候其实我们的项目并没那么复杂，也并不需要万能的框架，更需要的反而是简单顺手的工具。
Before Knockoutjs
假设我们做一个订单系统，需要显示商品单价，然后可以根据输入数量计算出总价并显示出来。使用原生代码也很容易实现，效果：
代码如下：
Account:
sum: //js code var priceNode = document.getElementById('price'),accountNode = document.getElementById('account'),sumNode = document.getElementById('sum'),price = 100,account = 11,sum = price * account; //初始化。 priceNode.innerText = price; accountNode.value = account; sumNode.textContent = sum; //监视 View层的用户输入 accountNode.addEventListener('keydown',function (e) { window.setTimeout(function () { account = accountNode.value; sum = price * account; sumNode.textContent = sum; },10); });
嗯，蛮简单的！哦，对了，我们一次展示50件商品，同时又有10类这样的展示，还有买5盒冈本送一根油条这样的各种促销……
所以，你知道原生实现的问题了吧： •随着 UI 和数据交互的增多，代码量迅速增长，难以维护 •基于 Dom 查询，id 或 class 的命名难以管理 •代码耦合度高，难以复用
Knockoutjs简介
Knockoutjs（下面简称ko）就是为了解决上述问题而出现的，他是一个轻量级的MVVM库，专注于实现数据与视图的绑定，本身并不提供 UI 类和路由等功能，上手非常快。同时，由于ko出来已经有些年头了，已经是比较成熟的框架了。在做一些动态显示比较多的页面时，ko无疑是一个比较好的选择。关于MVVM楼主就不多说了，一图以蔽之：
ko建立在3大核心特征之上（官网介绍）：
1. 可观察对象与依赖跟踪 (Observables and dependency tracking)：使用可观察对象在模型数据之间设立隐性关系链，用于数据转换和绑定。
2. 声明式绑定 (Declarative bindings)：使用简单易读的语法方便地将模型数据与DOM元素绑定在一起。
3. 模板 (Templating)：内置模板引擎、为你的模型数据快速编写复杂的 UI 展现。
使用ko非常简单，直接到官网（http://knockoutjs.com/index.html）下载并用
