通常来说,前端的维护难度是比较大的,特别是脚本,虽然像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简介的更多相关文章

  1. C#.NET学习笔记1---C#.NET简介

    C#.NET学习笔记1---C#.NET简介 技术qq交流群:JavaDream:251572072  教程下载,在线交流:创梦IT社区:www.credream.com -------------- ...

  2. 机器学习实战(Machine Learning in Action)学习笔记————03.决策树原理、源码解析及测试

    机器学习实战(Machine Learning in Action)学习笔记————03.决策树原理.源码解析及测试 关键字:决策树.python.源码解析.测试作者:米仓山下时间:2018-10-2 ...

  3. OpenCV 学习笔记03 边界框、最小矩形区域和最小闭圆的轮廓

    本节代码使用的opencv-python 4.0.1,numpy 1.15.4 + mkl 使用图片为 Mjolnir_Round_Car_Magnet_300x300.jpg 代码如下: impor ...

  4. OpenCV 学习笔记03 findContours函数

    opencv-python   4.0.1 1 函数释义 词义:发现轮廓! 从二进制图像中查找轮廓(Finds contours in a binary image):轮廓是形状分析和物体检测和识别的 ...

  5. Linux学习笔记-Linux系统简介

    Linux学习笔记-Linux系统简介 UNIX与Linux发展史 UNIX是父亲,Linux是儿子. UNIX发行版本 操作系统 公司 硬件平台 AIX IBM PowerPC HP-UX HP P ...

  6. C++ GUI Qt4学习笔记03

    C++ GUI Qt4学习笔记03   qtc++spreadsheet文档工具resources 本章介绍创建Spreadsheet应用程序的主窗口 1.子类化QMainWindow 通过子类化QM ...

  7. SaToken学习笔记-03

    SaToken学习笔记-03 如果排版有问题,请点击:传送门 核心思想 所谓权限验证,验证的核心就是一个账号是否拥有一个权限码 有,就让你通过.没有?那么禁止访问! 再往底了说,就是每个账号都会拥有一 ...

  8. Redis:学习笔记-03

    Redis:学习笔记-03 该部分内容,参考了 bilibili 上讲解 Redis 中,观看数最多的课程 Redis最新超详细版教程通俗易懂,来自 UP主 遇见狂神说 7. Redis配置文件 启动 ...

  9. KnockoutJs学习笔记(五)

    作为一名初学者来说,一篇篇的按顺序看官网上的文档的确是一件很痛苦的事情,毕竟它的排列也并非是由浅及深的排列,其中的顺序也颇耐人寻味,于是这篇文章我又跳过了Reference部分,进而进入到具体的bin ...

随机推荐

  1. AMD and CMD are dead之KMD.js版本0.0.2发布

    更新 正式从UglifyJS切换至UglifyJS2 增加依赖可视化功能 压缩代码更加方便 统一风格:如main的class名也不能省略 优化了kmdjs管道 修复了无数bug 通过src开启debu ...

  2. HTML DOM 教程

    HTML DOM DOM 教程 DOM 简介 DOM 节点 DOM 方法 DOM 属性 DOM 访问 DOM 修改 DOM 内容 DOM 元素 DOM 事件 DOM 导航 一,HTML DOM 简介 ...

  3. 统计和分析系统性能【IO CPU 内存】的工具集合

    统计和分析系统性能[IO CPU 内存]的工具集合 blktrace http://www.oschina.net/p/blktrace 获取磁盘写入的信息 root@demo:~/install/p ...

  4. [Android]一个干净的架构(翻译)

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/5276587.html 一个干净的架构 原文:https://b ...

  5. 时间戳转化为日期TimeStamp转NSDate转NSString

    //时间戳处理 NSInteger time = [self.album.updatedAt integerValue] / 1000; NSNumber *timer = [NSNumber num ...

  6. 开始使用 UIAlertController 吧

    UIAlertView 与 UIActionSheet UIAlertView 样式 实现 - (void)showAlertView { self.alertView = [[UIAlertView ...

  7. 我的第一个React Native App

    我用了三天时间实现了一个相对比较完整的React Native 新闻发布类型的示例.应用做得很简单,但大多React Native的组件都有用到,今天做一个分享(由于我电脑是Windows系统,所以只 ...

  8. 解决PKIX:unable to find valid certification path to requested target 的问题

    这两天在twitter服务器上忽然遇到这样的异常: e: sun.security.validator.ValidatorException: PKIX path building failed: s ...

  9. python头部注释 vim添加头部注释

    1.先说说python和virtual python 一般环境下,python解释器会放在/usr/bin/ 下面,然后你执行python的时候就会运行了,但是如果没有在/usr/bin/下面的话,执 ...

  10. Guest Speaker on 2015 WinHEC Shenzhen 秋季大会

    继今年3月份的WinHEC春季大会,秋季大会于11月10日-11日深圳如期举行.此次大会的主题是Windows 10 IoT和Microsoft Azure,云和端的无缝连接是微软物联网解决方案的典型 ...