bindonce

Bindonce

高性能 AngularJs 绑定

用法

• 下载、克隆或 fork 它，或使用 bower 安装 bower install angular-bindonce
• 将此组件提供的 bindonce.js 脚本包含到你的应用中。
• 将 'pasvaz.bindonce' 作为模块依赖添加到你的应用中：angular.module('app', ['pasvaz.bindonce'])

演示

以下是一个示例，展示 AngularJs 如何冻结你的 UI。尝试在输入框内按住一个键，当表格中只有 1 个人时一切正常，你可以看到 DOM 如何被输入实时更新。然而，如果你尝试加载 1000 个人 （如果测试设备性能不够强大，甚至 500 个人） 并重复该实验，你会看到 UI 被冻结。在这个其他演示中，BindOnce 会处理你的 watchers，UI 将如预期般保持响应式。两个演示的代码相同，唯一的区别是我将表格内的任何 ng-* 标签替换为等效的 bo-* 标签。

• AngularJs 常规演示
• 使用 Bindonce 的演示

概述

AngularJs 提供了出色的数据绑定系统，但如果你过度使用它，页面可能会遇到一些性能问题。众所周知，超过2000个监视器会导致界面卡顿，而如果你不注意数据绑定，这个数量很容易达到。有时你确实需要使用监视器来绑定数据，尤其是对于单页应用（SPA），因为数据是实时更新的，但通常你可以通过一些努力来避免它。页面中呈现的大多数数据，一旦渲染完成，就是不可变的，因此你不应该持续监视它们的变化。

例如，看看这段代码：

<ul>
	<li ng-repeat="person in Persons">
		<a ng-href="#/people/{{person.id}}"><span ng-bind="person.name"></span></a>
		<p ng-class="{'cycled':person.generated}" ng-bind-html-unsafe="person.description"></p>
	</li>
</ul>

Angular 内部会为每个 ng-* 指令创建一个 $watch，以保持数据的最新状态。