knockoutJS学习笔记03:knockout简介
通常来说,前端的维护难度是比较大的,特别是脚本,虽然像jquery这样的库可以帮助我们减少很多代码,但在稍微复杂的情况下,还是会产生有很多代码。上一篇介绍了模板引擎jsRender,它可以帮我们快速生成html,减少代码的编写,增强代码的可阅读性和可维护性。但最后也说到,它还是不够强大。
一、mvvm
说到mvvm,就想到以前学过的wpf,虽然学得一般...,对比winform,wpf 里面有很多很好的设计和想法,标签控件、数据驱动、依赖属性... 。更关键的是,它是以数据为核心,通过数据驱动UI。通常,数据在整个程序都占着核心地位,我们希望对数据进行操作,而不是对UI。
假设一种最简单的场景:有5个input text,我们需要从后台获取数据然后为它们赋值,并且可以修改这些值重新提交到后台。赋值:$(".class1").val(data1);$(".class2").val(data2);...。 获取值:var data1 = $(".class1").val();var data2 = $(".class2").val();...。 可以看到,如果操作多了,这种过程依旧非常繁琐。
mvvm 是一种创建用户界面的设计模式,解释为:模型-视图-视图模型。这三者的职责分别为:
模型:表示业务领域的对象和数据操作。
视图:用于展示数据和交互的UI。
视图模型:包括与视图相关的所有数据和可视化业务逻辑。通常我们的模型不一定与UI一一对应,也就是说模型需要加工和处理后才能用于展示,视图模型就是这个作用,把模型处理为适合UI的模型。
这里举一个例子:页面有一个显示人员信息的列表,包括修改和删除两个操作。
视图:已经被我们描绘出来了。
模型:一个person实体对象,和修改、删除两个操作。
视图-模型:一个person列表,用于视图绑定,包括修改和删除两个操作。
以ui操作修改为例子,会触发view-model里修改操作,而这个操作会调用model里的修改操作。
二、knockout
knockout (简称ko)就是一个mvvm前端框架。
引用官网的介绍:ko是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新(比如:依赖于用户行为的改变或者外部的数据源发生变化),ko都可以很简单的帮你实现,并且非常易于维护。
简单的说,用了ko之后,ui和我们的数据就绑定在一起了,而且是双向绑定。对于上面5个input text的例子,我们完全不用去操作dom就可以实现赋值或获取值操作。
浏览器兼容性问题。微软开发的,兼容所有主流浏览器,也兼容低版本ie。
ko与 jquery。这两者本身是不冲突的,完全可以配合使用。例如在数据方面用ko,在动画方面用jquery。
三、简单例子
写了那么多文字,看看一个简单的例子。下载ko.js,代码如下,可以看到轻松完成数据绑定。
html:
name:<input type="text" data-bind="value:name" />,age:<input type="text" data-bind="value:age" />
name:<span data-bind="text:name"></span>
js:
function Person(name,age){
this.name = ko.observable(name);
this.age = ko.observable(age);
}
var person = new Person("tom",18);
ko.applyBindings(person);
四、总结
理解mvvm的概念对于学习ko还是非常重要的。下一篇将开始学习ko的相关语法。
knockoutJS学习笔记03:knockout简介的更多相关文章
- C#.NET学习笔记1---C#.NET简介
C#.NET学习笔记1---C#.NET简介 技术qq交流群:JavaDream:251572072 教程下载,在线交流:创梦IT社区:www.credream.com -------------- ...
- 机器学习实战(Machine Learning in Action)学习笔记————03.决策树原理、源码解析及测试
机器学习实战(Machine Learning in Action)学习笔记————03.决策树原理.源码解析及测试 关键字:决策树.python.源码解析.测试作者:米仓山下时间:2018-10-2 ...
- OpenCV 学习笔记03 边界框、最小矩形区域和最小闭圆的轮廓
本节代码使用的opencv-python 4.0.1,numpy 1.15.4 + mkl 使用图片为 Mjolnir_Round_Car_Magnet_300x300.jpg 代码如下: impor ...
- OpenCV 学习笔记03 findContours函数
opencv-python 4.0.1 1 函数释义 词义:发现轮廓! 从二进制图像中查找轮廓(Finds contours in a binary image):轮廓是形状分析和物体检测和识别的 ...
- Linux学习笔记-Linux系统简介
Linux学习笔记-Linux系统简介 UNIX与Linux发展史 UNIX是父亲,Linux是儿子. UNIX发行版本 操作系统 公司 硬件平台 AIX IBM PowerPC HP-UX HP P ...
- C++ GUI Qt4学习笔记03
C++ GUI Qt4学习笔记03 qtc++spreadsheet文档工具resources 本章介绍创建Spreadsheet应用程序的主窗口 1.子类化QMainWindow 通过子类化QM ...
- SaToken学习笔记-03
SaToken学习笔记-03 如果排版有问题,请点击:传送门 核心思想 所谓权限验证,验证的核心就是一个账号是否拥有一个权限码 有,就让你通过.没有?那么禁止访问! 再往底了说,就是每个账号都会拥有一 ...
- Redis:学习笔记-03
Redis:学习笔记-03 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 7. Redis配置文件 启动 ...
- KnockoutJs学习笔记(五)
作为一名初学者来说,一篇篇的按顺序看官网上的文档的确是一件很痛苦的事情,毕竟它的排列也并非是由浅及深的排列,其中的顺序也颇耐人寻味,于是这篇文章我又跳过了Reference部分,进而进入到具体的bin ...
随机推荐
- [python]沪深龙虎榜数据进一步处理,计算日后5日的涨跌幅
沪深龙虎榜数据进一步处理,计算日后5日的涨跌幅 事前数据: 前面处理得到的csv文件 文件名前加入“[wait]”等待程序处理 python代码从雅虎股票历史数据api获取数据,计算后面5日的涨跌幅 ...
- 修改NavigationBarItem的字体大小和颜色的使用方法
//创建一个左边按钮 UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithTitle:@"<" st ...
- Xcode插件优缺点对比(推荐20款插件)
本文大致整理了自己用过的一些插件的使用感想(就是好不好用). 在那之前先简单贴两条插件须知,知道的可以忽略. 1.Alcatraz 类似于管理第三方库的cocoapods,管理插件也有个Alcatra ...
- shareSDK实现分享操作时只显示英文字体
今天用shareSDK实现分享操作时,突然发现分享视图只显示英文字体,而之前是显示中文的,以下是自己找到的解决方法: ,首先,找到shareSDk里的“ShareSDKUI_Localizable.s ...
- GCD定时器
// // ViewController.m // GCD 定时器 // // #import "ViewController.h" NSInteger count = ; @in ...
- 中断ORACLE数据库关闭进程导致错误案例
昨晚下班的时候,我准备关闭本机的虚拟机上的ORACLE数据库后准备下班,但是由于我SecureCRT开了多个窗口,结果一不小心,疏忽之下在一个生产服务器上执行了shutdown immediate命令 ...
- ORACLE关闭启动的诡异错误
在自己虚拟机搭建的ORACLE数据库环境下,折腾捣鼓做实验时,不知道什么特殊的改动.操作导致从SQL*PLUS里启动数据库实例时,报如下错误: 然后用startup nomout启动时,任然报ORA- ...
- TNS-12541: TNS:no listener TNS-12560 TNS-00511: No listener
为了测试需要,系统管理员帮忙将一台ORACLE数据库服务器克隆到虚拟机上,我上去删除了root.oracle.tomcat账号下的crontab定时作业,然后启动了ORACLE数据库实例,删除 ...
- Maven3.3.9环境搭建
Maven3.3.9环境搭建 1.配置JDK 1.7 http://www.cnblogs.com/nami/archive/2013/04/11/3011795.html 2.下载Maven htt ...
- java实现文件变化监控
一. spring配置文件:application.xml <?xml version="1.0" encoding="UTF-8"?> <b ...