前言

今天搞的有点快，因为上午简单研究了下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的更多相关文章

  1. 【javascript激增的思考02】模块化与MVC

    前言 之前我们遇到了这么一个项目,也就是我们昨天提到的,有很多的小窗口的,昨天说的太抽象了,今天我们再来理一理什么是小窗口(后面点说下),当时由于js有一点复杂,我自己也装B跟风用了一下传说中MVC! ...

  2. 【javascript激增的思考01】模块化编程

    前言 之前我做过一个web app(原来可以这么叫啦),在一个页面上有很多小窗口,每个小窗口都是独立的应用,比如: ① 我们一个小窗口数据来源是腾讯微博,需要形成腾讯微博app小窗口 ② 我们一个小窗 ...

  3. 【javascript激增的思考04】MVC与Backbone.js(beta)

    前言 最近整理了很多前端面试题的东西,今天又去参加了一次面试,不知各位烦不烦,我反正有点累了,于是我们今天继续回到我们前段时间研究的问题,我们再来看看MVC吧. 什么是MVC 又回到这个问题了,到底什 ...

  4. MVVM与Knockout

    MVVM与Knockout 前言 今天搞的有点快,因为上午简单研究了下MVC,发现MVC不太适合前端开发,然后之前看几位前端前辈都推荐前端使用MVVM,但是我对其还不甚了解,所以我觉得下午还是应该先看 ...

  5. 用Javascript评估用户输入密码的强度（Knockout版）

    原文:用Javascript评估用户输入密码的强度(Knockout版) 早上看到博友6点多发的一篇关于密码强度的文章(连接),甚是感动(周末大早上还来发文). 我们来看看如果使用Knockout更简 ...

  6. javascript面向对象的写法03

    javascript面向对象的写法03 js一些基础知识的说明 prototype 首先每个js函数(类)都有一个prototype的属性,函数是类.注意类有prototype,而普通对象没有. js ...

  7. 【追寻javascript高手之路03】javascript对象大乱斗

    前言 昨天我们学习了下javascript中函数的参数与作用域的东东,现在回过头来看,其实都是与函数相关的,所以javascript中的函数仍然是王道,我们今天大概会发二篇或者三篇博客一起来巩固我们的 ...

  8. JavaScript权威指南科03章 种类、值和变量(1)

    种类.值和变量 数据类型分类: 基本类型(primitive type):数位 弦 布尔值 null undefined 对象类型(object type): 对象是属性的集合,每一个属性都由&quo ...

  9. 一道面试题引发的对javascript类型转换的思考

    最近群里有人发了下面这题:实现一个函数,运算结果可以满足如下预期结果: add(1)(2) // 3 add(1, 2, 3)(10) // 16 add(1)(2)(3)(4)(5) // 15 对 ...

随机推荐

  1. Struts2第一个例子Hello World!

    1.首先用eclipse新建一个动态web项目Struts2Demo1: (把Default output floder由build\classes改成WebContent\WEB-INF\class ...

  2. 必应词典3.2去广告备忘笔记(转摘于roustar31)

    下载安装包后,沙盘运行,得到本体BingDict_Setup.msi文件,起作用的就是这个,其他的无视了.使用命令行参数:msiexec /a "d:\BingDict_Setup.msi& ...

  3. 开发人员看测试之TDD和BDD

    前言: 已经数月没有来园子了,写博客贵在坚持,一旦松懈了,断掉了,就很难再拾起来.但是每每看到自己博客里的博文的浏览量每天都在增加,都在无形当中给了我继续写博客的动力.最近这两天有听到Jbehave这 ...

  4. 【大数据】Linux下安装Hadoop(2.7.1)详解及WordCount运行

    一.引言 在完成了Storm的环境配置之后,想着鼓捣一下Hadoop的安装,网上面的教程好多,但是没有一个特别切合的,所以在安装的过程中还是遇到了很多的麻烦,并且最后不断的查阅资料,终于解决了问题,感 ...

  5. [SDK2.2]Windows Azure Cloud Service (35) 使用VS2013发布Azure Cloud Service

    <Windows Azure Platform 系列文章目录> 好久没有更新BLOG了,今天我们继续Windows Azure相关的内容. 笔者最近把Visual Studio升级到了20 ...

  6. 基于HT for Web 3D技术快速搭建设备面板

    以真实设备为模型,搭建出设备面板,并实时获取设备运行参数,显示在设备面板上,这相比于纯数值的设备监控系统显得更加生动直观.今天我们就在HT for Web的3D技术上完成设备面板的搭建. 我们今天模拟 ...

  7. 【Swift学习】Swift编程之旅---类和结构体（十三）

    与其他编程语言所不同的是,Swift 并不要求你为自定义类和结构去创建独立的接口和实现文件.你所要做的是在一个单一文件中定义一个类或者结构体,系统将会自动生成面向其它代码的外部接口. 注意:通常一个类 ...

  8. [AngularJS] AngularJS系列(4) 中级篇之指令

    目录 API概览 使用Angular.UI.Bootstrap 自定义指令 scope link 我的指令 angular中的指令可谓是最复杂的一块 但是我们的上传组件就能这么写 效果图: API概览 ...

  9. web前端学习笔记---scrollWidth,clientWidth,offsetWidth的区别

    通过一个demo测试这三个属性的差别. 说明: scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大. clientWidth:对象内容的可视区的宽度,不包滚动 ...

  10. 循序渐进开发WinForm项目（6)--开发使用混合式Winform模块

    1.Winform数据访问模式定义 传统的Winform程序模块:用于传统的数据库通讯获取数据,这种方式获取数据,方便快捷,可以用于常规的业务系统的场景,用于单机版软件或者基于局域网内的业务系统软件. ...