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 ...
随机推荐
- sublime快捷键
以下是个人总结不完全的快捷键总汇,祝愿各位顺利解放自己的鼠标. 选择类 Ctrl+D 选中光标所占的文本,继续操作则会选中下一个相同的文本. Alt+F3 选中文本按下快捷键,即可一次性选择全部的相同 ...
- Linux0.11内核--文件系统理论知识
1.文件系统介绍 一个简单的文件系统大致需要这么几个要素: ● 要有地方存放Metadata: ● 要有地方记录扇区的使用情况: ● 要有地方来记录任一文件的信息,比如占用了哪些扇区等: ● 要有地方 ...
- iOS检查App新版本并更新新版本
检查新版本 更新 第一种方法 //检查新版本 更新 dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, ...
- iOS推送(利用极光推送)
本文主要是基于极光推送的SDK封装的一个快速集成极光推送的类的封装(不喜勿喷) (1)首先说一下推送的一些原理: Push的原理: Push 的工作机制可以简单的概括为下图 图中,Provider是指 ...
- 敏捷开发与jira之研发管理模式
以IPD方法论为基础,采用原型+迭代的开发模式,并以质量优先为原则,持续对用户做价值交付. 使用JIRA+WIKI+SVN管理整个的研发过程:JIRA管理任务和进度:SVN管理代码和过程文档:WIKI ...
- SQL Server 2012安装错误案例:Error while enabling Windows feature: NetFx3, Error Code: -2146498298
案例环境: 服务器环境 : Windows Server 2012 R2 Standard 数据库版本 : SQL Server 2012 SP1 案例介绍: 在Windows Ser ...
- 有关stm32的问题,程序里面的u8、u16这些是什么意思啊
u8 是 unsigned charu16 是 unsigned shortu32 是 unsigned int
- 64位的Ubuntu系统上使用汇编nasm和C语言
64位的Ubuntu系统上使用汇编nasm和C语言 $ nasm -f elf foo.asm -o foo.o$ gcc -c bar.c -o bar.o$ ld -s foo.o bar.o ...
- diff/merge configuration in Team Foundation - common Command and Argument values - MSDN Blogs
One of the extensibility points we have in Team Foundation V1 is that you can configure any other di ...
- 好压(HaoZip)的命令行模式用法介绍
好压压缩软件,又叫“2345好压”,是一款国产的优秀压缩软件,目前是免费的,据官网介绍,该软件永久免费.官网地址:http://haozip.2345.com/ 本文主要对该软件的命令行模式用法进行介 ...