Javascript之KO介绍

KO是什么？
KO不是万能的，它的出现主要是为了方便的解决下面的问题：

UI元素较多，用户交互比较频繁，需要编写大量的手工代码维护UI元素的状态、样式等属性？
UI元素之间关系比较紧密，比如操作一个元素，需要改变另外一个元素的状态？
DOM元素与Js对象之间的数据同步？
前端javascript代码组织不理想？用户输入数据校验、DOM操作、后台交互…,交织在一起？
基础概念一：viewModel
负责处理UI事件的响应，响应用户操作。
负责保存领域模型在前端的变体Model’，比如:Student模型，在UI元素与Model之间同步数据(用户修改input-->ko修改model,反之亦然)
在需要的时候，可以使用Helper方法轻松地从viewModel中剥离出需要传递给Server的数据，通过ajax方式与后台交互。
负责接收Server端发送过来的数据(可能是Ajax请求)，更新模型数据，同时更新UI展现。
基础概念二：Observable与computed
纵观KO的所有应用场景，基本上这2个属性至少会用到一个。个人认为这是KO最常使用的东西。他们用法如下：

Observable(监控属性)：监控自身属性的变化，向外部发送通知。外部通过subscribe方法来订阅属性的变化事件。
Computed(依赖属性)：在早期版本中叫做dependentObservable,它通常依赖于其他的Observable,通过计算得出自己的数据。当依赖项改变的时候，computed属性会接到通知，然后同步更新自身
*这里提2点：

虽然本文称之为“属性”，但是本质上他们是js的function对象，所以访问的时候需要加()号
默认情况下Computed的同步发生在任意的Observable变化的时候，可是某些情况下我们可能不希望它更新的如此频繁，比如用户正在输入的过程中。KO有其他办法来延迟更新，在本系列后面会有专门文章介绍。
本章的重点就是讲解这2个基本属性的用法，在后面的“实例讲解”中会详细说明。

如何激活KO绑定
KO中，绑定是需要激活的，可以理解为把viewModel的数据与Html文档的DOM元素进行分析和关联。

通常是在页面元素、viewModel数据加载完毕之后，就可以激活绑定了。当然你可以在任何时候你想进行绑定的时候来激活。

只需要下面的代码：

var model = new AppViewModel();//实例化一个viewModel
ko.applyBindings(model); //绑定到整个页面
这样KO会在整个Body中寻找需要进行绑定的元素，与viewModel进行绑定。当然你也可以指定绑定的根节点，这样的好处：

可以缩小KO查找绑定的范围(毕竟不是整个页面都需要进行binding)
可以同时使用多个viewModel，分别负责不同区域的绑定(是不是你想要的？haha…)
很简单，加一个参数即可：

var model = new AppViewModel();
ko.applyBindings(model, document.getElementById("Demo1")); //Demo1可能是一个Div
实例讲解：Observable
基本语法
1、定义

var myViewModel = {
personName: ko.observable('Bob'),//定义叫做personName的监控属性
personAge: ko.observable(123)//定义叫做personAge的监控属性
};
2、读取

var a=myViewModel.personName();//a为'Bob'
3、写入、连续写入（链式调用）

myViewModel.personName('Mary').personAge(50);//同时修改了2个属性值
4、订阅属性修改事件

myViewModel.personName.subscribe(function(newValue) {
alert("The person's new name is " + newValue);
});

myViewModel.personName('换个名字');//这时候会弹出alert

Javascript之KO介绍相关推荐

JavaScript prototype 使用介绍
JavaScript prototype 使用介绍用过JavaScript的同学们肯定都对prototype如雷贯耳,但是这究竟是个什么东西却让初学者莫衷一是,只知道函数都会有一个prototype属 ...
JavaScript匿名函数介绍
JavaScript匿名函数介绍匿名函数顾名思义指的是没有名字的函数,在实际开发中使用的频率非常高. JavaScript匿名函数最常见的用法: (function(){ //运行的代码 })(); ...
小白上路之javascript数组的介绍
逆战班-- 关于数组,应该是javaScript的一个很重要的知识点,毕竟js来源有数组嘛(开个玩笑),那什么是数组呢? 数组可以说是对象的另外一种表现形式,数组中的特点就是存在于数组中的数据是有顺序 ...
JavaScript函数详细介绍
一.函数介绍函数就是将实现特定功能的代码封装起来,当我们需要实现特定功能时,直接调用函数实现即可,不需要每次都写一堆代码,实现代码的复用. 函数的作用: 1.实现功能的封装,提高代码复用率 2.用于 ...
html js异步绑定,JavaScript异步机制介绍
异步就是代码执行的顺序,并不是按照从上到下的顺序一次性执行,而是在不同的时间段执行,一部分代码在"未来执行".本文就来为大家介绍一下JavaScript中的异步机制. 单线程异步执 ...
Web基础 HTML和CSS介绍和基本使用及语法，JavaScript和jQuery介绍和基本使用及语法
WEB 什么是WEB互联网上的一种应用程序-->网页典型的应用:C/SClient:客户端Server:服务器B/SB: Browser :浏览器S: Server :服务器WEB的组成 &am ...
Javascript中Blob介绍
一.Blob 是什么 Blob(Binary Large Object)表示二进制类型的大对象.在数据库管理系统中,将二进制数据存储为一个单一个体的集合.Blob 通常是影像.声音或多媒体文件.在 J ...
JavaScript之引用类型介绍
引用类型的值(对象)是应用类型的一个实例.在ECMAScript中,引用类型是一种数据结构,用于将数据和功能组织在一起,用于将数据和功能组织在一起.他们通常也被成为JavaScript中的类,但这种称 ...
javascript中BOM介绍、屏幕尺寸、历史记录、URL解析、计算机信息获取、定时器、三大系列及兼容代码、封装动画函数、同步和异步
BOM介绍: BOM指的是浏览器对象模型,是用来操作浏览器的,例如浏览器弹窗.地址栏.滚动条等,浏览器顶级对象:window:页面中的所有内容都是属于window的,window可以省略:confir ...

Javascript之KO介绍

Javascript之KO介绍相关推荐

最新文章

热门文章