专栏首页Java技术分享Knockout.js是什么?

Knockout.js是什么?

从本节开始介绍关于KnockoutJs相关的内容,本节主要介绍knockoutjs一些重要特性与优点,以及它与Jquery等框架库之间的区别。

1、Knockout.js是什么?

Knockout是一款很优秀的JavaScript库,它可以帮助你仅使用一个清晰整洁的底层数据模型(data model)即可创建一个富文本且具有良好的显示和编辑功能的用户界面。任何时候你的局部UI内容需要自动更新(比如:依赖于用户行为的改变或者外部的数据源发生变化),KO都可以很简单的帮你实现,并且非常易于维护。

2、KO重要特性以及优点

I、KO重要特性

  • 优雅的依赖跟踪-任何时候当数据源模型发生变化时,它都能够自动的更新你UI的指定内容。
  • 声明绑定-它通过简单浅显的方式将你的UI与数据源模型进行绑定,你可以使用任意嵌套的结构模版来组建一个复杂的动态界面。
  • 良好的可扩展性-通过简单的几行代码就可以实现一个自定义行为作为新的声明进行绑定。

II、其他优点:

  • 纯JavaScript库-兼容任何服务器和客户端技术。
  • 可以很好的应用到已有的应用程序中-而不需要程序主要架构发生变化。
  • 简洁-采用Gzip压缩之后只要13K。
  • 兼容任何主流浏览器-(IE 6+, Firefox 2+, Chrome, Safari, 及其他)
  • 一套全面完整的规范(采用行为驱动开发)-这意味着在新的浏览器或平台中也能够很容易验证通过。

开发人员如果熟悉Ruby on Rails,Asp.net MVC 或其它MVC技术可能会发现它是一个带有声明式语法的MVC实时form。换句话说,你可以把KO当成通过编辑JSON数据来制作UI用户界面的一种方式… 不管它为你做什么。

3、如何使用它?

最快速、最有趣的方式就是通过互动式教学的方式来开始学习,一旦你掌握了最基本的技巧,学习了每个在线实例,你就可以在你的项目中一展身手了。

4、KO与Jquery

KO和Jquery(prototype等)是相互竞争还是可以兼容一起使用?

每个人都很喜欢Jquery!在过去,我们不得不忍受各种不一致的DOM对象操作的API方法,Jquery的出现,很出色的代替了以往种种笨拙的框架,显得灵活易用。Jquery在Web页面元素操作和事件处理上显得相当出色并且易用,而KO是解决另外不同的问题的。

当你的UI界面稍微复杂且含有一些相同的行为的话,如果你仅仅只使用Jquery,那么UI处理上会比你想象的要复杂棘手,同时会让维护费用相当昂贵。思考这样一个例子:在一个表格里显示一个项目列表,统计表格中列表的数量,当项目列表数量小于5时启用“Add”按钮,否则就禁用。Jquery没有基本的数据模型概念,所以你想要获取项目列表的数量,你需要从表格table/tr/div这些数量上去进行推断才能知道。如果需要在某些SPAN里显示数据的数量,当添加新数据的时候,你还要记得更新这个SPAN的text。当然,你还要记住当总数>=5条的时候,你需要禁用Add按钮。然后,如果还要实现Delete功能的时候,你不得不指出哪一个DOM元素被点击以后需要改变。

5、用Knockout来实现又有何不同?

使用KO这一切都变得非常简单。它可以让你很轻易的扩展项目的复杂度,而不必担心由此产生的数据不一致问题。它仅仅只需要将你的数据转换成一个JavaScript数组,然后使用foreach将数据数组绑定到页面中的一个表格table或者一组div中。每当数据数组发生变化时,UI界面会自动响应改变(你不需要指出如何插入新行 或在哪里插入),剩下的就是UI界面数据同步了。例如:你可以声明绑定如下一个SPAN显示数据数量:

There are <span data-bind="text: myItems().count"></span> items  

就是这些!你不需要写代码去更新它,它的更新依赖于数组myItems的改变。同样, Add按钮的启用和禁用依赖于数组myItems的长度,如下:

<button data-bind="enable: myItems().count < 5">Add</button>  

之后,如果你需要实现“Delete”功能,你不必去指定如何操作UI元素,只需要修改数据模型就可以了。

6、总结

总结:KO无意与jQuery这些类似的DOM 操作框架进行竞争。KO提供了一个数据模型与用户UI界面进行关联的高层次方式。KO本身不依赖jQuery,但是你可以一起同时使用jQuery, 生动平缓的UI改变需要使用jQuery。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Java8的十大新特性你了解多少呢?

    今天,我们先来复习一下2014年发布的Java 8的十大新特性。 Java 8可谓是自Java 5以来最具革命性的版本了,她在语言、编译器、类库、开发工具以及J...

    MonroeCode
  • redis是个单线程的程序,为什么会这么快呢?

    摘要: redis是个单线程的程序,为什么会这么快呢?每秒10000?这个有点不解,具体是快在哪里呢?EPOLL?内存?

    MonroeCode
  • 基于 CentOS 搭建微信小程序服务

    小程序无疑是今年互联网的重大热点。本实验带您从零开始,基于 NodeJS 搭建起一个可以支撑小程序运行的服务,包括 HTTPS 部署、会话服务、WebSoc...

    MonroeCode
  • 5 种前途迷茫的编程语言

    现在的开发人员都趋向于使用新的编程语言,那么旧的编程语言呢?它们的前途一般是这样两种:仍然可以使用,但逐渐不受大家欢迎;直接完全死去。和之前的十佳最受欢迎的编程...

    逆锋起笔
  • 5种将死的编程语言

    现在的开发人员都趋向于使用新的编程语言,那么旧的编程语言呢?它们的前途一般是这样两种:仍然可以使用,但逐渐不受大家欢迎;直接完全死去。和之前的十佳最受欢迎的编程...

    Python进击者
  • Widget是如何工作的

    在前面我们介绍各种各样的Widget,相信大家对Wiget的使用都已经有了自己的认识,今天我们就从底层角度看下Widget是如何工作,是什么支撑起了Wiget这...

    flyou
  • 二值人脸对齐--Binarized Convolutional Landmark Localizers for Human Pose Estimation and Face Alignment

    Binarized Convolutional Landmark Localizers for Human Pose Estimation and Face A...

    用户1148525
  • Python笔记从html中提取字段

    学到老
  • 人人都在谈论人工智能时,英特尔是怎么想的?

    如果提到英特尔,大家的第一印象可是它独有的PC巨头标签,这得益于其在整个PC行业占据了绝大多数市场份额。但当大家都在谈论人工智能时,英特尔似乎并没有迹象和NVI...

    AI科技评论
  • Python笔记从html中提取字段

    def fun(): # url = 'http://quote.eastmoney.com/sh600010.html?from=BaiduAladd...

    学到老

扫码关注云+社区

领取腾讯云代金券