翻译:Knockout 轻松上手 - 1 Knockout 是什么?

原文名称:KnockoutJS Starter

Knockout 是一个非常棒的脚本库,可是我发现许多人并不了解它,所以,思胜翻译了这本著作。

这一节,我们将会讨论 Knockout 可以做什么,又如何使用它的功能。

Knockout 是一个 JavaScript 脚本库

Knockout ,从本质上讲,是一个 JavaScript 脚本库,可以用在网站或者网页的开发中。用来增强脚本的功能以便提供更好的客户体验。默认情况下,除非你调用 Knockout ,否则它什么都不会做。这是区别其他的脚本库或者框架很重要的一点。你可以从这里下载它

Knockout 是一个 MVVM ( Model-View-ViewModel ) 库

创建 Knockout 的一个重要原因是在 Web 开发中可以应用 MVVM 模式。MVVM 是一种与面向对象不同的开发方式,通过将界面的逻辑与业务逻辑进行分离,达到可测试的目的。

有很多的原因值得我们写可测试的代码 ( 这可以用整本的书来讲 ),但是最重要的原因是代码的可维护性和质量的保证。写可测试的代码,代码会变得更加容易维护。不管怎么说,使用 MVVM 模式创建 Javascript 程序,比直接使用 DOM 的事件来编写程序,要花费更短的时间。

上面的图表说明了使用 MVVM 进行开发的基本组件及其通讯的关系。你可以看到 View,Model,ViewModel 表示为一个个的块。第一个要注意的是 Model,Model 是一个对象,通常直接表示现实中的业务逻辑。它会包含对应业务逻辑的的属性和方法。如果你使用 Model 来表示一个汽车,那么可能如下属性:

  • 最大速度
  • 轮胎数量
  • 制造商

同时,还有一些功能:

  • 鸣笛
  • 前进

MVVM 中的第二个特性是 View, View 由 HTML 标记,布局,元素,颜色,以及其他的可视的界面元素组成。它里面没有逻辑和代码,完全使用定义进行说明 ( 所有的说明都使用纯粹的 HTML 完成 )。

MVVC 的第三个部分是 ViewModel,ViewModel 提供了 View 和 Model 之间的连接。如果你设计一个 ViewModel 来表示多辆汽车,它的属性可能如下:

  • 汽车集合 ( Array )
  • 当前的汽车 ( Object )

方法

  • 添加汽车
  • 对汽车排序

ViewModel 允许你将业务逻辑在 Model 中实现,而在 ViewModel 中实现界面的控制逻辑。用术语来说就是“分离方面”,这对于大型的 Web 应用开发来说很重要。

最后一个 MVVM 的特性称为 Binding 绑定。Binding 是连接用户界面的属性,事件到 ViewModel 的属性,方法的理想途径。关于绑定的一个例子可以是界面的一个按钮,通过点击它来调用 ViewModel 的 AddAutoMobile 函数,或者将界面上的多个按钮连接到 AddAutoMobile 函数上。

在 MVVM 中,类似于 View 一般使用定义式的语法进行说明,Binding 也在视图中通过定义进行说明,Knockout 也不例外,而且大量使用 HTML5 兼容的 data-bind 属性进行绑定说明。

坚实又优美的 MVVM 库,比如 Knockout 可以使你关注在应用的业务逻辑和核心功能上,而不是把时间花费在事件的注册,取消注册上,在数据发生变化的时候更新输入框的值这些细碎的问题上。

这是一个非常棒的视频,即使你听不懂英语,也一样可以通过它学会使用 Knockout。

视频地址:http://channel9.msdn.com/Events/MIX/MIX11/FRM08

 

Knockout 是什么?的更多相关文章

  1. bootstrap + requireJS+ director+ knockout + web API = 一个时髦的单页程序

    也许单页程序(Single Page Application)并不是什么时髦的玩意,像Gmail在很早之前就已经在使用这种模式.通常的说法是它通过避免页面刷新大大提高了网站的响应性,像操作桌面应用程序 ...

  2. 【Knockout.js 学习体验之旅】(3)模板绑定

    本文是[Knockout.js 学习体验之旅]系列文章的第3篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  3. 【Knockout.js 学习体验之旅】(2)花式捆绑

    本文是[Knockout.js 学习体验之旅]系列文章的第2篇,所有demo均基于目前knockout.js的最新版本(3.4.0).小茄才识有限,文中若有不当之处,还望大家指出. 目录: [Knoc ...

  4. 【Knockout.js 学习体验之旅】(1)ko初体验

    前言 什么,你现在还在看knockout.js?这货都已经落后主流一千年了!赶紧去学Angular.React啊,再不赶紧的话,他们也要变out了哦.身旁的90后小伙伴,嘴里还塞着山东的狗不理大蒜包, ...

  5. MVVM大比拼之knockout.js源码精析

    简介 本文主要对源码和内部机制做较深如的分析,基础部分请参阅官网文档. knockout.js (以下简称 ko )是最早将 MVVM 引入到前端的重要功臣之一.目前版本已更新到 3 .相比同类主要有 ...

  6. knockout+echarts实现图表展示

    一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...

  7. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

  8. 【原】Bootstrap+Knockout.JS+ASP.Net MVC3+PetaPOCO实现CRUD操作

    1.需求: 1.1)页面要美观大气 1.2)前端代码要简洁清晰,要用MVC或是MVVM框架 1.3)服务端要用MVC框架,要Rest风格 1.4)数据访问要用ORM 2.效果: 2.1)列表 2.2) ...

  9. EasyUI+Knockout实现经典表单的查看、编辑

    此文章是基于 1. 搭建SpringMVC+Spring+Hibernate平台 2. 自制xml实现SQL动态参数配置 3. 利用DetachedCriteria构建HQL参数动态匹配 4. 常用日 ...

  10. knockout学习笔记目录

    关于knockout学习系列的文章已经写完,这里主要是做个总结,并且将目录罗列出来,方便查看.欢迎各位大神拍砖和讨论. 总结 kncokout是一个轻量级的UI类库,通过MVVM模式使前端的UI简单话 ...

随机推荐

  1. /proc/mtd 各参数的含义 -- linux内核

    经/proc虚拟文件系统读取MTD分区表:cat /proc/mtd mtd .name = raspi, .size = 0x00400000 (4M) .erasesize = 0x0001000 ...

  2. ASP.Net MVC 数据处理

    ASP.Net MVC 数据处理   第三天我们将学习Asp.Net中数据处理功能,了解数据访问层,EF,以及EF中常用的代码实现方式,创建数据访问层和数据入口,处理Post数据,以及数据验证等功能. ...

  3. 《python源代码分析》笔记 pythonVM一般表达式

    本文senlie原版的.转载请保留此地址:http://blog.csdn.net/zhengsenlie 1.字节码指令 LOAD_CONST:从consts表中读取序号为i的元素并压入到执行时栈中 ...

  4. 手机新闻网站,手持移动新闻,手机报client,jQuery Mobile手机新闻网站,手机新闻网站demo,新闻阅读器开发

    我们坐在地铁.经常拿出新浪手机查看新闻.腾讯新闻,或者看新闻,等刷微信功能.你有没有想过如何实现这些目标. 移动互联网.更活泼. 由于HTML5未来,jQuery Moblie未来. 今天我用jqm的 ...

  5. python_小爬虫

    import urllib.request as request import urllib.parse as parse import string print(""" ...

  6. unicode编码和中国的相互转换

    如果你的原始文件1.properties(该文件的编码中国).要转换unicode的 在cmd通过进入你在哪里在这种类型的文件夹: native2ascii -encoding gb2312 1.pr ...

  7. HDU 1251 统计拼图 Trie解决问题的方法

    基本上找到一个标准前缀的问题是,只需要insert和search它功能. 这里的主要变化是我n该记录方法,这里n国旗代表的不是叶节点,但是话的标志这条道路后的数字. 然后找到需要找到一个词的前缀,假如 ...

  8. windows+php5.5+apache2.4+tomcat+mod_jk配置

    原因: 通常情况下apache执行的是80port,比方apache启动后执行localhost:80就能够出现It works页面,这里的80也能够不写,会默认的.而tomcat启动时默认的port ...

  9. WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信

    原文:WebBrowser一点心得,如果在Javascript和Winform代码之间实现双向通信 最近工作需要,学习了一下winform内嵌webbrowser控件,然后与htm页面中的javasc ...

  10. AngularJS应用开发思维之3:依赖注入

    找不到的API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同. $http 比如,在jQuery中,我们知道它的AP ...