Knockout.js入门与优势详解

4星 · 超过85%的资源需积分: 10 44 浏览量更新于2024-07-28 收藏 827KB PDF 举报

"Knockout.js 是一个用于创建富饶、响应式用户界面的JavaScript库，其特点是能够通过数据模型驱动视图更新。该库适用于任何动态更新的UI部分，如根据用户行为或外部数据源变化而变化的界面。Knockout.js的核心特性包括优雅的依赖追踪、声明性绑定和可轻松扩展的行为。它是一个纯JavaScript库，可以与任何服务器或客户端技术配合使用，并且可以轻松添加到现有的Web应用中，无需大规模架构改动。此外，Knockout.js的压缩后大小仅为13kb，支持所有主流浏览器。" 关于Knockout.js的详细知识点： 1. **依赖追踪**：这是Knockout.js的核心机制之一。当数据模型中的任何部分发生变化时，依赖追踪系统会自动检测到这些变化，并相应地更新UI。这样，开发者不需要手动管理DOM元素和数据之间的同步。 2. **声明性绑定**：Knockout.js允许你用一种直观的方式来将UI元素绑定到数据模型。这种绑定方式使得界面的各个部分可以直接关联到数据，使得数据改变时，相应的UI元素能自动更新，反之亦然。这种声明式的方法使得代码更易于理解和维护，即使面对复杂的UI结构。 3. **可扩展性**：Knockout.js允许你通过创建新的声明性绑定来实现自定义行为。这使得开发者可以用少量代码实现复用性强的自定义功能，增强了库的灵活性。 4. **跨平台兼容**：作为纯JavaScript库，Knockout.js可以与任何服务器端或客户端技术结合使用，不局限于特定的框架或平台。这意味着你可以将它集成到已有的项目中，无论是基于Node.js、Java、.NET或其他技术栈。 5. **轻量级**：经过gzip压缩后的Knockout.js库大约只有13kb，这在性能和加载速度方面非常友好，不会对网站性能造成显著影响。 6. **适应现有应用**：Knockout.js设计成可以方便地添加到现有的Web应用程序中，不需要进行大规模的架构重构。这对于那些希望逐步引入MVVM（Model-View-ViewModel）模式到现有项目中的开发者来说是一个很大的优点。 7. **浏览器支持**：Knockout.js工作在所有主要的现代浏览器上，包括Internet Explorer 6及更高版本，以及Chrome、Firefox、Safari和Opera等。这确保了广泛的应用场景。 8. **MVVM模式**：Knockout.js遵循MVVM设计模式，帮助开发者分离视图和模型的逻辑，提高代码的组织性和可测试性。ViewModel作为数据模型和视图之间的桥梁，负责处理业务逻辑和数据的交互。通过以上知识点，我们可以看出，Knockout.js提供了一种强大而灵活的方法来构建动态的、响应式的Web界面，让开发者能够专注于业务逻辑，而不是繁琐的界面更新问题。

Part II: Observables

preceding example demonstrates a more general mechanism for filtering and validating with custom logic

to control what kind of user feedback appears, which may be of use if your scenario is more complex than

jQuery Validation handles natively.

How dependency tracking works

Beginners don’t need to know about this, but more advanced developers will want to know why I keep

making all these claims about KO automatically tracking dependencies and updating the right parts of the

UI…

It’s actually very simple and rather lovely. The tracking algorithm goes like this:

 Whenever you declare a computed observable, KO immediately invokes its evaluator function to

get its initial value.

 While your evaluator function is running, KO keeps a log of any observables (or computed

observables) that your evaluator reads the value of.

 When your evaluator is finished, KO sets up subscriptions to each of the observables (or

computed observables) that you’ve touched. The subscription callback is set to cause your

evaluator to run again, looping the whole process back to step 1 (disposing of any old

subscriptions that no longer apply).

 KO notifies any subscribers about the new value of your computed observable.

So, KO doesn’t just detect your dependencies the first time your evaluator runs - it redetects them every

time. This means, for example, that your dependencies can vary dynamically: dependency A could

determine whether you also depend on B or C. Then, you’ll only be re-evaluated when either A or your

current choice of B or C changes. You don’t have to declare dependencies: they’re inferred at runtime

from the code’s execution.

The other neat trick is that declarative bindings are simply implemented as computed observables. So, if a

binding reads the value of an observable, that binding becomes dependent on that observable, which

causes that binding to be re-evaluated if the observable changes.

Note: Why circular dependencies aren’t meaningful

Computed observables are supposed to map a set of observable inputs into a single observable output. As

such, it doesn’t make sense to include cycles in your dependency chains. Cycles would not be analogous

to recursion; they would be analogous to having two spreadsheet cells that are computed as functions of

each other. It would lead to an infinite evaluation loop.

Part II: Observables

So what does Knockout do if you have got a cycle in your dependency graph? It avoids infinite loops by

enforcing the following rule: a computed observable cannot trigger its own re-evaluation. This is very

unlikely to affect your code. It’s relevant only if you have a ko.computed (call it A) whose evaluator writes

to another observable (call it B) that (directly or via a dependency chain) affects the value of A. In that

case, KO will not restart evaluation of A while it is already evaluating, so the resulting value of A will

respect only the original value of B, ignoring any update made to B while A’s evaluator is running.

Determining if a property is a computed observable

In some scenarios, it is useful to programmatically determine if you are dealing with a computed

observable. Knockout provides a utility function, ko.isComputed to help with this situation. For example,

you might want to exclude computed observables from data that you are sending back to the server.

for (var prop in myObject) {

if (myObject.hasOwnProperty(prop) && !ko.isComputed(myObject[prop])) {

result[prop] = myObject[prop];

}

Additionally, Knockout provides similar functions that can operate on observables and computed

observables:

 ko.isObservable - returns true for observables, observableArrays, and all computed observables.

 ko.isWriteableObservable - returns true for observable, observableArrays, and writeable

computed observables.

What happened to dependent observables?

Prior to Knockout 2.0, computed observables were known as dependent observables. With version 2.0, we

decided to rename ko.dependentObservable to ko.computed because it is easier to explain, say, and type.

But don’t worry: this won’t break any existing code. At runtime, ko.dependentObservable refers to the

same function instance as ko.computed — the two are equivalent.

3. Working with observable arrays

If you want to detect and respond to changes on one object, you’d use observables. If you want to detect

and respond to changes of a collection of things, use an observableArray. This is useful in many scenarios

where you’re displaying or editing multiple values and need repeated sections of UI to appear and

disappear as items are added and removed.

剩余73页未读，继续阅读

zoser

粉丝: 3
资源: 15

Knockout.js入门与优势详解

asp.net mvc4+easyui+knockoutjs(建筑材料管理系统)-源码

KnockoutJs_帮助文档_中文手册 chm

Knockoutjs让你利用JavaScript更容易创造丰富响应式的UI

knockout js pdf

Knockout-Validation:Knockout JS的验证库

Knockout-Parsley:Knockout JS 的欧芹验证

Knockout-Memento:用于 Knockout JS 的 Memento 库

some knockout js and pages

knockout.observableSet:Knockout JS的Observable Set对象。 灵感来自[knockout.observableDictionary]（https

带Knockout Js的ASP.NET MVC 4

最新资源

knockout.observableSet:Knockout JS的Observable Set对象。灵感来自[knockout.observableDictionary]（https