【javascript激增的思考03】MVVM与Knockout
前言
今天搞的有点快,因为上午简单研究了下MVC,发现MVC不太适合前端开发,然后之前看几位前端前辈都推荐前端使用MVVM,但是我对其还不甚了解,所以我觉得下午还是应该先看看他是神马先,后面再决定要不要继续深入下去。
神马是MVVM?
借用我们百科一张美图,所谓MVVM就是model-view-viewmodel模型。
他是微软带来的一项新的技术体验,最先用于WPF,最后发现其模式对前端开发尤其比较合适,所以便在前端流行起来了。
MVVM是对MVC的一个改进,用以适应当代Web开发。
model为数据或者业务逻辑,完全与UI无关,它存储了状态并对问题领域做出处理,model可以写在代码里面或者用json表示、或者数据表中,反正他就是数据啦。
view表示可见元素,按钮、标签、图片等,我们可能会对各个标签绑定事件,但是我们知道这其实是原来controller该做的事情。
简单例子中view被直接绑定到model,model的一些部分只是简单单向绑定显示在view中。
PS:以上至于你们懂不懂,反正我是不懂了。。。用几个字形容就是模模糊糊
因为光是读概念无法了解到实质,所以我们来看看其使用吧!
Knockout
之前我们在写datalist的时候就有朋友提到这个东西,我当时也没有怎么关注,现在一起来看看吧:
knockout是一个轻量级UI库,通过应用MVVM(主角)模式使javascript前端UI简单化:
声明式绑定(declarative bindings)
使用简单的语法将模型model数据关联到dom元素上 UI界面自动刷新(automatic ui refresh)
当模型状态发生改变(model state),UI自动更新 依赖跟踪(dependency tracking)
为转变联合数据,在你的模型数据之间建立隐式关系 模板(templating)
为模型数据快速编写可嵌套的UI
根据以上描述,我们来跟进一番:
Knockout是一个以数据模型(data model)为基础的能够帮助你创建富文本,影响显示和编辑用户界面的javascript类库。
任何时候若是UI需要更新,knockout能够简单的帮助你实现并且容易维护。
但是究竟这个家伙是个神马呢?我也不知道,所以来试试吧。
初探knockout水深
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/knockout-2.2.0.js" type="text/javascript"></script>
<script type="text/javascript">
var piliPerson = [
{ name: '叶小钗', desc: '刀狂剑痴', weapon: '刀剑' },
{ name: '素还真', desc: '清香白莲', weapon: '剑' },
{ name: '一页书', desc: '百世经纶', weapon: '掌' }
];
$(document).ready(function () {
var viewModel = {};
ko.applyBindings(viewModel);
}); </script>
</head>
<body>
<select data-bind="options: piliPerson, optionsText: 'name'">
</select>
</body>
</html>
PS:叶大侠之前写了一个dropdownlist与datalist的功能,好像与他有点类似呢:)
我们再拓宽:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="js/jquery-1.7.1.js" type="text/javascript"></script>
<script src="js/knockout-2.2.0.js" type="text/javascript"></script>
<script type="text/javascript">
var piliPerson = [
{ name: '叶小钗', desc: '刀狂剑痴', weapon: '刀剑', key: 'yxc' },
{ name: '素还真', desc: '清香白莲', weapon: '剑', key: 'shz' },
{ name: '一页书', desc: '百世经纶', weapon: '掌', key: 'yys' }
];
$(document).ready(function () {
var viewModel = {
//observable是一个KO的基础概念,UI可健康(observe)他的值,并且回应他的变化
//这里相当于设置了其选择项,当前选择的素还真
choseObj: ko.observable(piliPerson[1])
};
ko.applyBindings(viewModel);
}); </script>
</head>
<body>
<select data-bind="options: piliPerson, optionsText: 'name', value: choseObj">
<option ></option>
</select>
选择了:<span data-bind="text: choseObj().name"></span>
</body>
</html>
这个例子很精彩,我们选择后,选择结果会马上体现出来,初始化当然也是对的:
比较神奇的是,我们可以在标签里面使用函数了,和最初的.net越来越靠近了:
function formatStr(name) {
return name ? '霹雳人物:' + name : '';
}
<span data-bind="text: formatStr(choseObj().name)"></span>
PS:在此小叶子已经认识到了knockout的强大了,小叶子写的那个算是玩具吧。
PS2:我感觉如此使用后,对jquery的依赖降低了哦
惊叹
使用了KO后,似乎我数据模型发生改变了,可能会发生级联反应哦,曾经可能需要手动操作的事情,现在ko帮我们做了!!!
结语
经过今天的学习,虽然没能完全了解MVVM是什么,但是也有所增长,更是发现了ko这个神器,真是不错。
但是,因为我们最近的学习重点,是我们的小窗口,所以这里ko暂时放下,在我们小窗口靠一段落后,我们一起来学习ko先!
【javascript激增的思考03】MVVM与Knockout的更多相关文章
- 【javascript激增的思考02】模块化与MVC
前言 之前我们遇到了这么一个项目,也就是我们昨天提到的,有很多的小窗口的,昨天说的太抽象了,今天我们再来理一理什么是小窗口(后面点说下),当时由于js有一点复杂,我自己也装B跟风用了一下传说中MVC! ...
- 【javascript激增的思考01】模块化编程
前言 之前我做过一个web app(原来可以这么叫啦),在一个页面上有很多小窗口,每个小窗口都是独立的应用,比如: ① 我们一个小窗口数据来源是腾讯微博,需要形成腾讯微博app小窗口 ② 我们一个小窗 ...
- 【javascript激增的思考04】MVC与Backbone.js(beta)
前言 最近整理了很多前端面试题的东西,今天又去参加了一次面试,不知各位烦不烦,我反正有点累了,于是我们今天继续回到我们前段时间研究的问题,我们再来看看MVC吧. 什么是MVC 又回到这个问题了,到底什 ...
- MVVM与Knockout
MVVM与Knockout 前言 今天搞的有点快,因为上午简单研究了下MVC,发现MVC不太适合前端开发,然后之前看几位前端前辈都推荐前端使用MVVM,但是我对其还不甚了解,所以我觉得下午还是应该先看 ...
- 用Javascript评估用户输入密码的强度(Knockout版)
原文:用Javascript评估用户输入密码的强度(Knockout版) 早上看到博友6点多发的一篇关于密码强度的文章(连接),甚是感动(周末大早上还来发文). 我们来看看如果使用Knockout更简 ...
- javascript面向对象的写法03
javascript面向对象的写法03 js一些基础知识的说明 prototype 首先每个js函数(类)都有一个prototype的属性,函数是类.注意类有prototype,而普通对象没有. js ...
- 【追寻javascript高手之路03】javascript对象大乱斗
前言 昨天我们学习了下javascript中函数的参数与作用域的东东,现在回过头来看,其实都是与函数相关的,所以javascript中的函数仍然是王道,我们今天大概会发二篇或者三篇博客一起来巩固我们的 ...
- JavaScript权威指南科03章 种类、值和变量(1)
种类.值和变量 数据类型分类: 基本类型(primitive type):数位 弦 布尔值 null undefined 对象类型(object type): 对象是属性的集合,每一个属性都由&quo ...
- 一道面试题引发的对javascript类型转换的思考
最近群里有人发了下面这题:实现一个函数,运算结果可以满足如下预期结果: add(1)(2) // 3 add(1, 2, 3)(10) // 16 add(1)(2)(3)(4)(5) // 15 对 ...
随机推荐
- 《BI那点儿事》Microsoft 顺序分析和聚类分析算法
Microsoft 顺序分析和聚类分析算法是由 Microsoft SQL Server Analysis Services 提供的一种顺序分析算法.您可以使用该算法来研究包含可通过下面的路径或“顺序 ...
- SQL*Loader之CASE7
CASE7 1. SQL脚本 case7包含两个SQL脚本,一个是删除脚本ulcase7e.sql,一个是创建脚本ulcase7s.sql [oracle@node3 ulcase]$ cat ulc ...
- 使用AndroidStudio报错:INSTALL_FAILED_UPDATE_INCOMPATIBLE
安装Android Studio后,用真机调试运行项目时出现:INSTALL_FAILED_UPDATE_INCOMPATIBLE这个错误 原因: 1. 可能是设备内存不足: 2. APP已经存在: ...
- Android抓包方法(一)之Fiddler代理
Android抓包方法(一) 之Fiddler代理 前言: 做前端测试,基本要求会抓包,会分析请求数据包,查看接口是否调用正确,数据返回是否正确,问题产生是定位根本原因等. 不管是之前做HTML5手机 ...
- 高性能Web系统设计方案(初稿目录),支持者进
第一部分 客户端篇 1.压缩js.css,将js的引入放在</html>之前; 2.合并一个页面下的js/css文件,压缩传输.(SquishIt) 相关博文 3.ajax技术应用.aja ...
- 无刷新提交表单(非Ajax实现)
HTML代码: <iframe id="fra" name="frm" style="display: none;"></ ...
- C#控件绑定数据源方式
1:控件数据源绑定泛型Dictionary<string,string> ): Dictionart<string,string> D=new Dictionary(strin ...
- 使用Unity3d做异形窗口
项目马上上线,因为之前的登录器是使用VS2010的MFC做的,在很多电脑上会提示缺失mfcXXXX.dll,中间找寻这种解决方案,最后确定将vcredist2010_x86和我的程序打包到安装包里面, ...
- SQL_递归查询(复杂查询示例)
需求: 一篇文章里有很多评论,每个评论又有很多回复评论,要求: 页面将文章展示出来,且文章的主评论按照评论时间分页展示,回复评论的评论完全展示在每个主评论下面,且按照回复时间排序 最终查询结果SQL查 ...
- .net微信公众号开发——消息与事件
作者:王先荣 本文介绍如何处理微信公众号开发中的消息与事件,包括:(1)消息(事件)概况:(2)验证消息的真实性:(3)解析消息:(4)被动回复消息:(5)发送其他消息. 开源项目地址:h ...