Knockout.js 体验之旅

前言


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


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


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


Before Knockout.js


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



操作可观察对象数组的方法有两类，一类是与原生js数组方法同名的：pop push shift unshift reverse sort splice，这一部分与js原生方法的用法和效果都一样，就不再赘述了。


另外一些方法是js中没有的，主要有以下几个：


remove(someItem) – 删除所有值与someItem相等的元素项并将它们以数组形式返回，这里的意思就是说你可不能直接list.remove(0)来删除第一项，而是要用list.remove(list()[0])这种形式来删除。总而言之，传入的参数必须是元素项的值，可以用list()[0]的形式，也可以直接输入值的字符串（比如Luffy这种）。
remove(function(item) { return item.age < 18;}) – 删除所有age属性小于18的元素项并将它们以数组形式返回，这种用法跟平常的数组高阶函数没什么区别。item作为高阶函数的参数传入，遍历数组时，当高阶函数返回值为真值时就删除该项，否则转到下一项。
removeAll(['Chad', 132, undefined]) – 删除所有值与 'Chad'或 123 或 undefined 相等的元素项并将它们以数组形式返回。
removeAll() – 删除所有项并以数组形式返回。
小窍门：在处理可观察对象时，若对象数量众多而且交互频繁的情况下，每次变更都立即刷新的话会非常消耗性能，这个时候可以使用扩展 myObservableArray.extend({ rateLimit: 1000 })来设置延迟刷新。比如在不断往可观察对象数组中插入元素时，可以设置一个周期时间1000ms，让1000ms内的所有操作集中到一次刷新中去，避免频繁操作 DOM 带来的性能恶化。
总结


本篇主要简单介绍了knockoutjs中最重要的概念：可观察对象（数组）。可观察对象实质上是一个函数对象，通过ko方法操作可观察对象时可以动态刷新UI展现，这个是推荐做法。同时，也可以通过原生的js方法操作可观察对象，只是原生方法并不会刷新UI展现，需要等到下一次刷新事件时才会被刷新到UI中。


关于ko的介绍就到这里了！码字不易，随手点赞哈~