KnockoutJS-快速入门

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

 

一、简单例子

  先来看个最简单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 }

 

二、概念介绍

  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)

  对于模板,个人而言,用到的次数并不是很多,大多数时候前两个功能就已经完全满足业务需求了。

 

三、结构讲解

  1、以刚开始的最简单的例子来看,写的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>

  2、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     })

    效果展示:

  3、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的操作就全部到这里了,还有包括模板等功能,虽然存在,但是实际来讲我用到的地方,或许有很多博友用到了,需要看模板的博友,可以参考其它博友的文章。

 

四、knockoutJS优势所在

  虽然ko发布到现在也有六七年了,有点廉颇老矣的感觉,比不上新兴之秀们,但是ko的功能仍然是优秀的,也不存在非常落后的地方。

  ko具备的首要功能:

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

  另外的优势:

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

 

 本文地址:https://www.cnblogs.com/CKExp/p/9296333.html

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

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

 

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

 

转载于:https://www.cnblogs.com/CKExp/p/9296333.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/368200.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

几道web前端练习题目

在 HTML 语言中&#xff0c;以下哪个属性不是通用属性&#xff1f;A]<class>B]<title>C]<href>D]<style> 在线练习&#xff1a;http://hovertree.com/tiku/bjaf/qi1g37nf.htm 在 CSS 样式定义中&#xff0c;以下哪种 RGB 颜色值是 Web 安全色&#xf…

php如何导入数据,““php中如何将execl的数据导入到数据库中

php中如何将execl的数据导入到数据库中1.使用PHPExcel Parser Pro&#xff0c;但是这个软件为收费软件&#xff1b;2.可EXCEL表保存为CSV&#xff0c;然后通过phpmyadmin或者SQLyog导入&#xff0c;SQLyog导入的方法为&#xff1a;将EXCEL表另存为CSV形式&#xff1b;打开SQLyo…

Spring MVC错误处理流程

使用Spring MVC可以通过三种方式处理异常流&#xff0c;其目的是拦截任何应用程序异常&#xff0c;并向用户提供友好而信息丰富的视图。 1.在web.xml文件中使用error-page标记&#xff1a; 这是servlet规范驱动的方法&#xff0c;其中基于HTTP响应代码或异常类型来拦截从应用程…

Busybox下tftp命令使用详解

参数说明&#xff1a;-l 是local的缩写&#xff0c;后跟存在于Client的源文件名&#xff0c;或下载Client后 重命名的文件名。 -r 是remote的缩写&#xff0c;后跟Server即PC机tftp服务器根目录中的源文 件名&#xff0c;或上传Se…

php 获取sql字段名,php – 使用DISTINCT和UNION在SQL查询中获取字段名称

我有以下查询&#xff1a;SELECT DISTINCT(uniq)FROM(SELECT sex AS uniq FROM type4UNIONSELECT fason AS uniq FROM type4UNIONSELECT color AS uniq FROM type4UNIONSELECT size AS uniq FROM type4) AS Temp它运作得很好,它返回&#xff1a;[uniq] > some unique value是…

OC学习笔记——基础控件篇

因为之前做iOS开发用的都是swift语言&#xff0c;没有用过oc&#xff0c;本篇博客整理一下UIKIt中组件基于oc的使用&#xff0c;顺便把每个组件在秋招中遇到的问题整理一下。 UIView的使用 UIView继承链&#xff1a;NSObject->UIResponder->UIView UIView生命周期&…

大数据开源安全

在安全性方面从未有&#xff08;恕我直言&#xff09;已经足够了开源解决方案和布鲁斯已经撰写了有关这几个 时间在过去 &#xff0c;而且也没有必要再次改写参数。 现在&#xff0c;随着市场上“ NoSQL”和“大数据”开源趋势的发展&#xff0c;安全终于有了交集……如果我愿…

如何在一个页面添加多个不同的kindeditor编辑器

kindeditor官方下载地址&#xff1a;http://kindeditor.net/down.php &#xff08;入门必看&#xff09;kindeditor官方文档&#xff1a;http://kindeditor.net/doc.php &#xff08;入门必看&#xff09;Kindeditor编辑器初始化参数文档&#xff1a;http://kindeditor.net/doc…

JSONArray.fromObject不执行且不报错问题的解决

今天在写javaweb工程的时候需要向前台传json格式的数据&#xff0c;用到了json-lib-2.4-jdk15.jar等一系列包&#xff0c;然而却出现如下状况&#xff1a; CityBean是一个javaBean&#xff0c;我们看到&#xff0c;控制台只打印出了list的内容&#xff0c;而下面的两个却没能打…

爬虫-scrapy

阅读目录 一 介绍二 安装三 命令行工具四 项目结构以及爬虫应用简介 五 Spiders六 Selectors七 Items八 Item Pipeline九 Dowloader Middeware十 Spider Middleware十一 settings.py十二 爬取亚马逊商品信息一 介绍 Scrapy一个开源和协作的框架&#xff0c;其最初是为了页面抓取…

swagge php token,swagger在thinkphp6的使用方式

/*** OA\Get(path"/api/article",* tags{"文章管理"},* summary"文章列表",* OA\Parameter(name"token", in"header", description"token", OA\Schema(type"string", default"123456")),* OA…

Java垃圾回收(4)

G1&#xff1a;垃圾优先 G1收集器是热点JVM中要实现的最新收集器。 自Java 7 Update 4以来&#xff0c;它一直是受支持的收集器。OracleGC团队也公开表示&#xff0c;他们对低暂停GC的希望是完全实现的G1。 这篇文章来自我之前的垃圾收集博客文章&#xff1a; 热点GC概述 。 …

Html5 冒泡排序演示

本文通过一个简单的小例子&#xff0c;简述冒泡算法在B/S中的简单使用&#xff0c;仅供学习分享使用&#xff0c;如有不足之处&#xff0c;还请指正。 概述 冒泡排序&#xff08;Bubble Sort&#xff09;&#xff0c;是一种计算机科学领域的较简单的排序算法。 它重复地走访…

Codeforces 765F. Souvenirs

Description 给出长度为 \(n\) 的序列,有 \(Q\) 组询问,问 \(|a_i-a_j|\),\(l<i,j<r\)的最小值是多少?题面 Solution 无删莫队. 把询问按照左端点分块,同一块内按右端点递增排序,类似于莫队 问题在于回溯: 直接删除的话无法更新最小值,但是可以一边插入一边删除 这样我们…

学习六 - Python 函数

Python 学习 - 函数 1.创建和调用函数 创建函数 def function_name(): #无参数函数xxxdef function_name(par1, par2, ...): #带参数函数xxx记住三个关键的东西&#xff1a;def, (), : 调用 function_name() #无参数函数调用function_name(arg1, arg2, ...) #带参数函数…

一种编写测试的好方法

测试。 最近我一直在考虑进行测试。 作为我对各种项目所做的代码审查的一部分&#xff0c;我已经看到了数千行未经测试的代码。 这不仅是测试覆盖率统计数据指出这一点的情况&#xff0c;还更多是该项目中根本没有任何测试的情况 。 我一直听到这种悲惨状况的两个原因&#xff…

rem、px、em之间的区别以及网页响应式设计写法

个人收藏用&#xff0c;转载自&#xff1a;http://www.w3cplus.com/css3/define-font-size-with-css3-rem 在Web中使用什么单位来定义页面的字体大小&#xff0c;至今天为止都还在激烈的争论着&#xff0c;有人说PX做为单位好&#xff0c;有人说EM优点多&#xff0c;还有人在说…

游戏服务器架构图

1&#xff1a;ARPG类型游戏 2:MMORPG 3:MOBA 4:卡牌类 5&#xff1a;棋盘类 转载于:https://www.cnblogs.com/like-minded/p/8297718.html

php 解析http,用PHP手动解析原始HTTP数据

好的&#xff0c;所以Dave和Everts的建议我决定手动解析原始请求数据。搜索约一天后&#xff0c;我没有找到任何其他方式来做到这一点。我从这个thread获得了一些帮助。我没有任何运气篡改原始数据&#xff0c;就像在引用的线程中一样&#xff0c;因为这将破坏正在上传的文件。…

长为N的数组,元素范围是0-N-1,其中只有一个数是重复的,找出这个重复元素...

思路&#xff1a;如果限制空间复杂度为O&#xff08;1&#xff09;&#xff0c;我们就无法采用哈希表的方法去求解。题目中数组中所以数字都在范围[0&#xff0c; N-1]&#xff0c;因此哈希表的大小为N即可。因此我们实际要做的就是对N个范围为0到N-1的数进行哈希&#xff0c;而…