Knockout v3.4.0 中文版教程-1-入门和安装

淡淡的烟草味﹌ 2023-06-02 14:56 9阅读 0赞

英文原版教程：[http://knockoutjs.com/documentation/introduction.html][http_knockoutjs.com_documentation_introduction.html]  
注：此教程根据英文原版翻译，仅作练习，如有不足或错误，请指正

说明：  
对原文中的一些单词的翻译是参考汤姆大叔的翻译方式，如下：

observable 监控  
observable array 监控数组  
computed observable 计算监控  
pure computed observable 纯计算监控

# 1. 入门 #

## 1.Knockout怎样工作的以及带来了什么好处 ##

### 1. 简介 ###

Knockout是一款很优秀的JavaScript库，它可以帮助你通过一个简洁的数据模型创建一个丰富的、响应式显示和编辑的用户界面。无论何时你的UI界面的一部分有动态改变（比如，由用户的操作引起的改变或者一个扩展数据源改变），KO 都能用更简单的和可维护的方式实现它。  
主要特性：

*  **优雅的依赖追踪** \- 无论你的数据模型什么时候发生改变都能自动更新你的UI需要更新的部分。
 *  **声明式绑定** \- 一种简单明了的方式让你的数据模型和UI部分关联，你可以使用任意的嵌套的绑定上下文轻易地构建出一个复杂而且动态的UI界面。
 *  **良好的可扩展性** \- 实现自定义行为作为新的声明绑定，这样通过短短几行代码就能很容易实现代码重用。

额外的好处：

*  纯Javascript库 - 兼容任何服务端和客户端技术
 *  可以友好的添加到你已经有的web应用程序 - 不需要主程序框架改动
 *  小巧的 - 通过gzip压缩后只有13kb大小
 *  兼容各种主流浏览器(IE 6+, Firefox 2+, Chrome, Safari, Edge, 其他)
 *  有一套完整的规范（采用BDD开发，BDD，行为驱动开发）这意味着在新的浏览器和平台上功能都可以正确容易地通过验证。

开发者如果熟悉`Ruby on Rails`, `ASP.NET MVC`,或者其他`MV*`技术框架可能会把`MVVM`看作一个使用声明式语法的MVC实时form，换句话说，你可以把KO看成是通过编辑JSON数据来构建UI界面的一种方式。。。无论你要做什么：）

### 2. 如何使用它？ ###

最快也是最有趣的入门方式是通过交互式教学指导。一旦你掌握了基础，学习了在线示例，你就可以在你的项目中使用KO了。

### 3. KO和jQuery(或者 Prototype等等)是存在竞争关系还是可以一起工作？ ###

所有人都喜欢 jQuery！它是我们在过去不得不使用的难用且混乱的DOM API的一种优秀的替代方案。jQuery可以通过优秀的底层API的方式操作网页上的dom元素和处理事件。KO是用于解决其他的一些问题。

只要你的UI界面变得复杂而且有重复性行为，如果仅仅使用jQuery,项目会变得越来越复杂，而且维护代价很大。举个例子，你显示一个列表，而且想要当列表项仅仅在少于5项时会显示一个添加按钮。jQuery里面没有基础数据模型的概念，所以为了统计列表当前有多少项，你得计算一下`table`元素下`tr`元素的数量或者通过某些CSS类名来获取DIV的数量。这些项也许是通过`SPAN`元素来显示，你还得在用户添加新项的时候更新列表的内容，你还得记得当列表项数量大于等于5的时候隐藏添加按钮。之后，你被要求实现删除功能，你得在当删除按钮被点击的时候找出哪个列表项发生了变化。

### 4. KO有什么不同？ ###

上述例子的情形对KO来说小菜一碟。它能让你的项目在提高复杂性的时候不用害怕导致项目不稳定。只是把上述的列表项作为一个Javascript里面的数组，然后使用**foreach**绑定把数组转换为`table`或者div集合，当数组发生改变的时候，对应的UI会一起改变（你不需要考虑怎样插入新的`tr`标签或者要插在哪里）。剩下的UI会保存同步。比如，你可以声明绑定一个SPAN标签来显示列表项的数量，如下所示：

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

就是这样，你不用写更新列表项的代码，它会在`myItems`数组发生改变的时候自动更新，同样，可以使添加按钮的显示隐藏由列表项的数量控制，如下：

之后，当你被要求实现删除功能的时候，你不需要考虑UI和数据模型是怎么交互的细节，你只需要改变基础数据模型即可。

总结：KO并没有和jQuery或者其他类似的优化操作底层的DOM API的库存在竞争关系。KO提供了可以和其他库互补的，通过高层次的方式对UI和数据模型进行关联。KO本身也不依赖jQuery，但是在使用KO的同时使用jQuery，而且如果你想制作一些动画特效，jQuery往往是必须的。

## 2.下载和安装 ##

下载就自行去官网下载即可，地址：[http://knockoutjs.com/downloads/index.html][http_knockoutjs.com_downloads_index.html]

### 1. 通过Bower安装 ###

bower install knockout

### 2. 安装 ###

像jQuery那样引入就好了

转载于:https://www.cnblogs.com/DHclly/p/6204321.html

[http_knockoutjs.com_documentation_introduction.html]: http://knockoutjs.com/documentation/introduction.html
[http_knockoutjs.com_downloads_index.html]: http://knockoutjs.com/downloads/index.html