#3 Angular-bindonce -- pasvaz.bindonce

AngularJS 高性能绑定,使用原生的一些指令，可能对性能优化不好冻结UI。在AngularJS中，如果超过2000个watches，会影响到UI的更新。

bo-* 替换 ng-*除了前者只计算一次，其余的工作方式都一致。

使用方法

• 下载，克隆，或者使用 bower: bower install angular-bindonce
• 将 bindonce.js 添加到应用中
• 将 pasvaz.bindonce 作为模块依赖添加到app中， amgular.module('app', ['pasvaz.bindonce'])

示例

不使用bindonce的用法：

// angularJS会添加很多watches

    
    ![]({{person.picture}})
    
    
    
    
        
            
        
    

如果使用bindonce,则将 ng- 开头的，除了 ng-repeat 以外的，都替换为 bo-,另外将 bindonce 到 ng-repeat 所在的标签

// angularJS 只添加一个watch: ngRepeatWatch
 
    
    ![](person.picture) 
    
    
    
    
         
            
        
    

bindonce 结合 ngRepeat 使用时，不需要赋值，因为 ngRepeat 只有数据存在时才创建指令。

智能方式

bindonce还解决了一个问题，指令渲染内容时，数据已经存在。通常Angular使用指令，如果数据还不能获取，指令就不能渲染内容，页面一片空白，而bindonce能等待数据准备好了再去渲染内容。

...
// js
angular.module('myApp', [])
    .directive('myCustomSetText', function() {
        return {
            link: function(scope, element, attr, ctrl) {
                element.text(scope.$eval(attr.myCustomSetText));
            }
        };
    });

指令按照想象的方式运行，渲染 'Person' 数据，不需要使用watchers。如果在 $scope中 'Person' 还不能获取(比如通过$http或$resource方式获取Person),此时指令没有用处， 'scope.$eval(attr.myCustomSetText)'则什么也不渲染。

下面就是bindonce如何解决这个问题的:

// 等待Person数据带来之后再渲染

    
    
    ![](Person.picture)
    

Interpolation

一些指令(ng-href, ng-src) 使用插值，比如： ng-href="/profile/{{User.profileId}}"。 ng-href 和 ng-src 拥有相对于的指令: bo-href-i, bo-href-i(注意 i 表示 'interpolate')。bindonce不使用watches,而AngularJS每次插值的时候都使用一个watch。 新版本的bo-href, bo-src不会添加watch,bo-href-i, bo-href-i为了兼容性问题仍在使用,这2个属性也添加一个watch。

属性使用

下面罗列一些bindonce指令：``

• bo-text='text': 计算'text'，不添加watches, 并将文本添加到元素内， 比如
• bo-bind='text': bo-text的别名，等同于bo-bind
• bo-href-i: 等同于 ng-href, 都创建一个watch,为兼容性而存在, 比如
• bo-href: 同上，就是不创建watch
• bo-src-i='url': ![]({{picture}}), 创建一个watch,为兼容性而存在，否则使用 bo-src
• bo-src: 不创建watch,注意不能使用 {{}}用来插值， ![](picture)
• bo-class="object/string": 等同于 'ng-class'
• bo-id="#id": 计算 #id 的值，并将id渲染给元素
• bo-value="expression": 计算表达式的值，并当作 value 渲染给元素，
• bo-attr bo-attr-foo="text": 计算'text'的值，当作元素自定义属性渲染，

总结

使用bindonce的最大特定就是不添加watch(当然部分还是添加，比如'bo-src-i', 'bo-href-i')，使用方式基本和angularjs原生的一致。