KnockoutJS-快速入门

　　虽然在WPF中接触过MVVM模式，但是刚开始在Web中接触到Knockout.JS让我大吃一惊，简化了好多工做量，原来可能须要一大堆的JS脚本完成的工做量，被释放许多。接触KnockoutJS一年多了，在好多个项目中也用到过，虽然每一个项目中都有点重复造轮子的滋味，可是不得不说，愈来愈喜欢用KO完成前端的一些工做，虽然如今有许多流行的MVVM/MVC前端框架，如Angular、Vue、React等等，接触过Vue，简单用过一次，接触不深，不敢谈论，也就带过吧。工做之余，开始总结本身在使用的工具、框架上用到的，体会到的感觉。

 

1、简单例子

　　先来看个最简单ko所带来的效果：

　　

　　看看代码是如何简洁设计的：

 1 <div>
 2     <label>公司名称</label>
 3     <input type="text" data-bind="value:unitName" /><br />
 4     <label>公司地址</label>
 5     <input type="text" data-bind="value:address" />
 6     <p data-bind="text:'您的公司名称为:'+unitName()+'，公司地址是:'+address()+' .'"></p>
 7 </div>
 8 
 9 @section Scripts{
10     <script type="text/javascript">
11         var viewModel = {
12             unitName: ko.observable(''),
13             address: ko.observable(''),
14         };
15         $(function () {
16             ko.applyBindings(viewModel);//完成绑定
17         });
18     </script>
19 }

 

2、概念介绍

　　knockout.JS利用的是MVVM模式，不依赖任何第三方的、纯Javascript编写的UI类库。官网地址：http://knockoutjs.com/

　　

　　Model-View-View Model (MVVM) 是一种建立用户界面的设计模式。 描述的是如何将复杂的UI用户界面分红3个部分：

• Model：后台模型对象，存储着数据和操做，独立于前端UI的存在，与具体业务打交道。
• ViewModel：前台数据展现，一般是用于对外交互的，ViewModel有两种不一样的使用场景，一种是后台对外的ViewModel用于对外交互时接收的对象属于服务器端ViewModel，一种是前台Javscript对象在前台的数据交互模型.如ko中的ViewModel,固然这两种经常是互相转换的。
• View：视图页面，用户可以见到的交互页面，存放着与ViewModel交互的UI，输入数据或操做对象完成对ViewModel的更新，

　　Knockout有着三大核心功能：

• 监控属性（Observables）和依赖跟踪（Dependency tracking）
• 声明式绑定（Declarative bindings）
• 模板（Templating）

　　对于模板，我的而言，用到的次数并非不少，大多数时候前两个功能就已经彻底知足业务需求了。

 

3、结构讲解

　　一、以刚开始的最简单的例子来看，写的js代码无非就是声明了一个对象，而后将这个对象利用ko.applyBindings()绑定到了ko中,即可以利用viewModel对象完成ko的相关功能。

　　     ko.applyBindings()方法第一个参数用于绑定须要绑定的viewModel对象，第二个可选参数用来限定第一个参数的绑定范围,这样一来，页面上能够声明出不少个不一样做用范围的viewModel对象。

1     <script type="text/javascript">
2         var viewModel = {
3             unitName: ko.observable(''),
4             address: ko.observable(''),
5         };
6         $(function () {
7             ko.applyBindings(viewModel);//完成绑定
8         });
9     </script>

　　二、viewModel对象内部，定义属性或方法有许多种方式(我比较钟意这种方式，有点键值对的感受)。

　　　　其中的ko.observable()方法还有两个兄弟，ko.observableArray()和ko.computed()，我的而言前两种用的较多。

　　　　ko.observable()方法，将UI元素和viewModel中的属性进行双向关联，一方的改变影响着另外一方，如上的例子中，在js中须要对unitName操做时有：

• • 读数据操做：varunitName = viewModel.unitName(); 读取到unitName的数据，一般是UI上输入数据，js中须要根据输入的数据作处理用它。
  • 写数据操做：viewModel.unitName("博客园"); UI上相应绑定的元素将会使用新的值，一般是用于js取得新数据并绑定到UI上使用。

　　　　ko.observableArray()方法，绑定集合或数组，一般以列表形式出现，对列表内的数据展现或增删操做。监控数组监控的是整个集合/数组对象，内部的具体对象的监控不属于它的职责范围。

unitType:ko.observableArray(),//在viewModel中初始化一个监控数组

　　　　在js中若是某个业务需求须要增长或是删除某个对象，利用集合的push('新值')或是remove(‘旧值’)便可。

　　

　　　　ko.computed()方法,针对多个属性的同时监控，而产生的最终结果，能够监控多个属性的变化而后返回不一样的数据，我的对这个方法来说，没用过几回，大多数时候若是须要监控多个属性的变化，我仍是喜欢另写一个方法去改变最终结果。以下能够将unitInfo属性绑定在UI元素上，但另外两个属性的值改变时后，这个值也会相应的改变。对于computed方法还有一个一样的pureComputed方法，若是要用推荐使用pureComputed方法，该方法相比computed而言可以更快的从新渲染和更低的内存使用。

1     unitInfo: ko.pureComputed(function () {
2         return "您的公司名称为:" + viewModel.unitName() + "，公司地址是：" + viewModel.address();
3     }),

　　　　对于pureComputed方法,最优的使用仍是利用它的重写功能,咱们经过write方法，能够实现许多功能，如拆分、提炼字符串等等，具体业务，具体设计。

 1     unitInfo: ko.pureComputed(function () {
 2         return "您的公司名称为:" + viewModel.unitName() + "，公司地址是：" + viewModel.address();
 3     }),
 4     unitDetailInfo: ko.pureComputed({
 5         read: function () {
 6             return "您的公司名称为:" + viewModel.unitName() + "，公司地址是：" + viewModel.address();
 7         },
 8         write: function (value) {
 9             viewModel.unitName(value);
10         }
11     })

　　　　效果展现：

　　三、UI上用到的data-bind属性

　　　　data-bind属性虽然好用但它不是HTML的原生属性，严格听从HTML5语法属于'data-'系家族经常使用来作自定义属性。ko中命名data-bind来做为数据绑定的属性，全部的操做都依靠data-bind属性完成。

1 <select data-bind="options:unitTypeOptions, optionsText: 'text', optionsValue: 'value', value:choiceUnitTypeValue"></select>

 　　至此，基本上ko的操做就所有到这里了，还有包括模板等功能，虽然存在，可是实际来说我用到的地方，或许有不少博友用到了，须要看模板的博友，能够参考其它博友的文章。

 

4、knockoutJS优点所在

　　虽然ko发布到如今也有六七年了，有点廉颇老矣的感受，比不上新兴之秀们，可是ko的功能仍然是优秀的，也不存在很是落后的地方。

　　ko具有的首要功能:

• • 简洁依赖追踪：不管什么时候数据模型改动，UI将会自动更新。
  • 声明式绑定： 浅显易懂的方式将UI中指定部分关联到数据模型上，并可以经过嵌套模板构建复杂的动态UI。
  • 轻易可扩展：经过几行代码就能够实现自定义行为做为新的声明式绑定用于重用。

　　另外的优点：

• • 纯JavaScript类库：兼容任何服务器端和客户端技术
  • 可添加到Web程序最上部：不须要大的架构改变
  • 简洁的： Gzip以后大约13kb
  • 兼容任何主流浏览器 (IE 6+、Firefox 2+、Chrome、Safari、Edge、其它)
  • 文档详细的综合组件 （采用行为驱动开发） - 意味着在新的浏览器和平台上能够很容易经过验证。

 

 本文地址：http://www.javashuo.com/article/p-drzqttmf-eg.html

 本文Demo的地址：：https://gitee.com/530521314/koInstance.git

 参考文章：@汤姆大叔 http://www.cnblogs.com/TomXu/archive/2011/11/21/2257154.html

 

2018-7-14,望技术有成后能回来看见本身的脚步