[分享] Knockout.js 体验之旅

前言

什么，你现在还在看knockout.js？这货都已经落后主流一千年了！赶紧去学Angular、React啊，再不赶紧的话，他们也要变out了哦。身旁的90后小伙伴，嘴里还塞着山东的狗不理大蒜包，却依然振振有词地喋喋不休，一脸真诚。是啊，前端发展太快，那边前几年出的框架已是无人问津的半老徐娘，而这边各种新出的框架却正在风口搔首弄姿，娇翠欲滴。前端界好不热闹！当然，楼主也喜欢新奇趣，但是现在公司的开发工具 WeX5 中用到了knockout.js，没办法，再老都只能蒙着眼睛上了……

然后发现，咦！感觉还不错呀~~~

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

Before Knockout.js

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

代码如下：

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 的命名难以管理
代码耦合度高，难以复用

Knockout.js简介

Knockout.js（下面简称ko）就是为了解决上述问题而出现的，他是一个轻量级的MVVM库，专注于实现数据与视图的绑定，本身并不提供 UI 类和路由等功能，上手非常快。同时，由于ko出来已经有些年头了，已经是比较成熟的框架了。在做一些动态显示比较多的页面时，ko无疑是一个比较好的选择。关于MVVM楼主就不多说了，一图以蔽之：

MVVM模式

ko建立在3大核心特征之上（官网介绍）：

可观察对象与依赖跟踪 (Observables and dependency tracking)：使用可观察对象在模型数据之间设立隐性关系链，用于数据转换和绑定。

声明式绑定 (Declarative bindings)：使用简单易读的语法方便地将模型数据与DOM元素绑定在一起。

模板 (Templating)：内置模板引擎、为你的模型数据快速编写复杂的 UI 展现。

使用ko非常简单，直接到官网下载并用