你的位置:首页 > Java教程

[Java教程]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的相关语法。