MVVM框架中Angular是好，但这么大而全的框架，学习难度可不低呢，上手起码也得要个一两周吧。而knockoutjs专注于数据绑定，只需一两天就可以投入使用了，学习成本不要太低！在前端进化如此迅速的时代，学习成本也是不得不考虑的一个因素。很多时候其实我们的项目并没那么复杂，也并不需要万能的框架，更需要的反而是简单顺手的工具。
Before Knockoutjs
假设我们做一个订单系统，需要显示商品单价，然后可以根据输入数量计算出总价并显示出来。使用原生代码也很容易实现，效果：
代码如下：
<!--HTML code--> Price: <span></span><br /> Account: <input type="text" value="" placeholder="请输入数量" /><br /> sum: <span></span> //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非常简单，直接到官网（）下载并用<script>引入即可。
可观察对象
使用ko重写上面的例子（自定价格，这也是我小时候的愿望之一）：
代码是这样的：
<!--HTML Code--> <div> Price: <input type="text" data-bind="value: price" placeholder="请输入单价" /><br /> Account: <input type="text" data-bind="value: account" placeholder="请输入个数" /><br /> sum: <span data-bind="text: sum"></span> </div> // js Code var ViewModel = function(p, a) { //设置为可观察对象并以参数p、a初始化 this.price = ko.observable(p); this.account = ko.observable(a); //调用ko函数的时候将this传入，否则执行ko.pureComputed内部代码时，this为ko，ko.price()报错。 this.sum = ko.pureComputed(function() { //因为可观察对象是一个函数对象，所以要用 price()来读取当前值。 //设置值使用price(NewValue)，支持链式写法：this.price(12).account(3) return this.price() * this.account(); }, this); }; var vm = new ViewModel(135, 10); //应用该绑定，绑定开始生效 ko.applyBindings(vm);
1）先看HTML代码：
可以看到在每个标签中都加入了一个 data-bind = "XX：OO" 这样的键-值对。这个就是 ko 的绑定语法，XXOO代表什么东西呢？（XXOO？楼主还是个孩子啊…）从例子可以看到XX为标签的属性，可以是text、value、class、checked等标签属性，其实也可以是click、focus、load等DOM事件。OO看起来像是一个变量，实际上并不是变量，而是一个函数对象，执行这个函数(带个())就能得到相应的绑定值。通过XXOO就可以将元素的属性或事件跟js中的函数对象绑定在一起(XXOO了就要相互负责哈)，这就是ko的声明式绑定。绑定的定义其实就是一个观察者模式，只不过这是双向的绑定，发布者和订阅者相互订阅了对方的消息而已，这就是MVVM的双向绑定。ko双向绑定的结果就是一方变化就可以自动更新另一方，也就是通过ViewModel将数据和表现层紧紧绑定在一起了。绑定的效果类似于：
2）再看看js代码：
可以看到js中定义了一个ViewModel对象，在对象中对HTML中绑定的OO进行了操作。这里主要有两个操作： ko.observable()和ko.pureComputed()。