原文名称: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 Knockout 是什么?的更多相关文章

  1. 【SVN】Linux下svn搭建配置全过程——初学者轻松上手篇

    版本控制主要用到的是git和svn,其中svn界面化使用操作简单,本篇简单介绍SVN搭建配置全过程. 1. 下载并安装 yum install subversion 查看版本 svnserve --v ...

  2. 初识Dash -- 构建一个人人都能够轻松上手的界面,操控数据和可视化

    从事数据科学工作,少不了使用Pandas.scikit-learn这些Python生态系统中的利器,还有就是控制工作流的Jupyter Notebooks,没的说,你和同事都爱用.但是,要想将工作成果 ...

  3. 区块链轻松上手:原理、源码、搭建与应用pdf电子版下载

    区块链轻松上手:原理.源码.搭建与应用pdf电子版下载 链接:https://pan.baidu.com/s/1rKF4U9wq612RMIChs0zv8w提取码:hquz <区块链轻松上手:原 ...

  4. 实时计算轻松上手,阿里云DataWorks Stream Studio正式发布

    Stream Studio是DataWorks旗下重磅推出的全新子产品.已于2019年4月18日正式对外开放使用.Stream Studi是一站式流计算开发平台,基于阿里巴巴实时计算引擎Flink构建 ...

  5. 轻松上手SpringBoot+SpringSecurity+JWT实RESTfulAPI权限控制实战

    前言 我们知道在项目开发中,后台开发权限认证是非常重要的,springboot 中常用熟悉的权限认证框架有,shiro,还有就是springboot 全家桶的 security当然他们各有各的好处,但 ...

  6. 翻译:Knockout 快速上手 - 5: 你需要知道的顶级特性 续

    Utilities Knockout 提供了许多可以你开发中使用的工具,你可以在 ko.utils 命名空间中找到它们,我最喜欢的工具如下所示: extend: 这个方法将两个对象合并在一起,调用这个 ...

  7. 翻译:Knockout 快速上手 - 4: 你需要知道的顶级特性

    Knockout 最棒的一个特点就是它的可扩展性.Knockout 存在大量的扩展点,包含大量的工具来创建我们的应用程序.许多开发者除了 Knockout 核心库之外没有使用任何其他的脚本库 ( 甚至 ...

  8. 翻译:Knockout 快速上手 - 3: knockoutJS 快速上手

    许多时候,学会一种技术的有效方式就是使用它解决实际中的问题.在这一节,我们将学习使用 Knockout 来创建一个常见的应用,库存管理应用. 应用概览 在创建我们的应用之前,我们需要一个公司,来理解应 ...

  9. 翻译:Knockout 快速上手 - 2: 安装 knockoutJS

    只需要五个简单的步骤,就可以做好使用 Knockout 开发的准备! 第一步 我们需要什么? 最低限度,为了完成后面的教程,你需要如下的准备 Web 浏览器 文本编辑器 你的电脑上大约 2M 的磁盘空 ...

随机推荐

  1. Hub, bridge, switch, router, gateway的区别

    这些概念性的东西,其实,有的区别不是很大,有的区别很大. Hub 就是一个重复转发器,就是从一个port接受到数据后,就会原样的向其他的所有端口发送刚才收到的数据.个人理解为是工作在物理层的东西.但是 ...

  2. [转]使用 Minidumps 和 Visual Studio .NET 进行崩溃后调试

    本文关键字:Minidumps, Windows, SEH, VisualC, .NET 摘要 本文讲述了 minidumps 是怎样工作的.当你的程序崩溃的时候应该如何生成它们.以及如何在 Visu ...

  3. Photoshop CS3 如何汉化

    1. 下载汉化包 http://download.csdn.net/detail/yangtian1158/8740959 2. 将下载的.bat文件放到CS3的安装目录里即可 C:\Program ...

  4. bzoj3034: Heaven Cow与God Bull

    Description __int64 ago,there's a heaven cow called sjy...A god bull named wzc fell in love with her ...

  5. php 获取中文的拼音

    注意事项: 无法识别的中文 亳:bo,如果有此字,结果为空,调用此类之前需要手动加判断 蚌:bang,beng,多音字 莞:guan 圳:zhen 儋:dan 漯:luo 濮:pu 泸:lu 衢:qu ...

  6. CenOS下搭建VPN服务

    公司生产环境使用的是阿里云主机,采用的是两台nginx主机进行反向代理,现在需要内网一台服务器能够访问公网,所以在nginx服务器上搭建了VPN服务,用于进行内网访问公网. 系统环境:CenOS 6. ...

  7. iMac一体机安装苹果和Win7双系统

    前几天,有个客户说有一苹果的一体机,想装苹果和Win7双系统.约好了时间,带上工具就过去了.去的路上,用手机上网查了一下苹果电脑装双系统的过程.虽然以前也有给苹果的电脑安装过双系统,但次数不多而且时间 ...

  8. android学习笔记24——事件处理

    事件处理 android提供了两种事件处理机制: 1.基于回调的事件处理 2.基于监听器的事件处理(通过绑定特定事件监听器) 注意: android对于基于回调的事件处理而言,主要做法就是重写andr ...

  9. 【maven】之开发pom配置常用插件

    1.打包跳过测试代码 <plugin>  <groupId>org.apache.maven.plugins</groupId>  <artifactId&g ...

  10. 【Linux】之shell特殊变量整理

    目录 1. 特殊变量列表 2. 特殊说明 在shell中变量名只能包含数字.字母和下划线,因为某些包含其他字符的变量有特殊含义,这样的变量被称为特殊变量. 例如,$ 表示当前Shell进程的ID,即p ...