Knockoutjs 学习系列(一)ko初体验

MVVM框架中Angular是好，但这么大而全的框架，学习难度可不低呢，上手起码也得要个一两周吧。而knockoutjs专注于数据绑定，只需一两天就可以投入使用了，学习成本不要太低！在前端进化如此迅速的时代，学习成本也是不得不考虑的一个因素。很多时候其实我们的项目并没那么复杂，也并不需要万能的框架，更需要的反而是简单顺手的工具。

Before Knockoutjs

假设我们做一个订单系统，需要显示商品单价，然后可以根据输入数量计算出总价并显示出来。使用原生代码也很容易实现，效果：

代码如下：

Price: 

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）下载并用