AngularJS 高性能綁定,使用原生的一些指令，可能對(duì)性能優(yōu)化不好凍結(jié)UI。在AngularJS中，如果超過(guò)2000個(gè)watches，會(huì)影響到UI的更新。

bo-* 替換 ng-*除了前者只計(jì)算一次，其余的工作方式都一致。

使用方法

• 下載，克隆，或者使用 bower: bower install angular-bindonce
• 將 bindonce.js 添加到應(yīng)用中
• 將 pasvaz.bindonce 作為模塊依賴添加到app中， amgular.module('app', ['pasvaz.bindonce'])

示例

不使用bindonce的用法：

// angularJS會(huì)添加很多watches
<tr ng-repeat="person in Persons" ng-class="{'male':person.gender=' M', 'female': person.gender=='F'}">
    <td ng-bind="$index + 1"></td>
    <td>![]({{person.picture}})</td>
    <td ng-bind="person.firstname"></td>
    <td ng-bind="person.lastname"></td>
    <td ng-bind="person.gender"></td>
    <td>
        <a ng-href="{{person.url}}">
            <spam ng-bind="(person.url)?'link':'missing'" ng-class="{'label label-important': !person.url}"></spam>
        </a>
    </td>
</tr>

如果使用bindonce,則將 ng- 開(kāi)頭的，除了 ng-repeat 以外的，都替換為 bo-,另外將 bindonce 到 ng-repeat 所在的標(biāo)簽

// angularJS 只添加一個(gè)watch: ngRepeatWatch
<tr bindonce ng-repeat="person in Persons" bo-class="{'male':person.gender='    M', 'female': person.gender=='F'}"> <!-- 添加bindonce -->
    <td bo-bind="$index + 1"></td>
    <td>![](person.picture)</td> <!-- bo-src不需要使用 '{{}}' -->
    <td bo-bind="person.firstname"></td>
    <td bo-bind="person.lastname"></td>
    <td bo-bind="person.gender"></td>
    <td>
        <a bo-href="person.url"> <!-- bo-href 不需要使用 '{{}}' -->
            <spam bo-bind="(person.url)?'link':'missing'" bo-class="{'label label-important': !person.url}"></spam>
        </a>
    </td>
</tr>

bindonce 結(jié)合 ngRepeat 使用時(shí)，不需要賦值，因?yàn)?ngRepeat 只有數(shù)據(jù)存在時(shí)才創(chuàng)建指令。

智能方式

bindonce還解決了一個(gè)問(wèn)題，指令渲染內(nèi)容時(shí)，數(shù)據(jù)已經(jīng)存在。通常Angular使用指令，如果數(shù)據(jù)還不能獲取，指令就不能渲染內(nèi)容，頁(yè)面一片空白，而bindonce能等待數(shù)據(jù)準(zhǔn)備好了再去渲染內(nèi)容。

<span my-custom-set-text="Person.firstname"></span>
<span my-custom-set-text="Person.lastname"></span>
...
// js
angular.module('myApp', [])
    .directive('myCustomSetText', function() {
        return {
            link: function(scope, element, attr, ctrl) {
                element.text(scope.$eval(attr.myCustomSetText));
            }
        };
    });

指令按照想象的方式運(yùn)行，渲染 'Person' 數(shù)據(jù)，不需要使用watchers。如果在 $scope中 'Person' 還不能獲取(比如通過(guò)$http或$resource方式獲取Person),此時(shí)指令沒(méi)有用處， 'scope.$eval(attr.myCustomSetText)'則什么也不渲染。

下面就是bindonce如何解決這個(gè)問(wèn)題的:

// 等待Person數(shù)據(jù)帶來(lái)之后再渲染
<div bindonce="Person" bo-title="Person.title">
    <span bo-text="Person.firstname"></span>
    <span bo-text="Person.lastname"></span>
    ![](Person.picture)
    <p bo-class="{'fancy': Person.isNice}" bo-html="Person.story"></p>
</div>

Interpolation

一些指令(ng-href, ng-src) 使用插值，比如： ng-href="/profile/{{User.profileId}}"。 ng-href 和 ng-src 擁有相對(duì)于的指令: bo-href-i, bo-href-i(注意 i 表示 'interpolate')。bindonce不使用watches,而AngularJS每次插值的時(shí)候都使用一個(gè)watch。 新版本的bo-href, bo-src不會(huì)添加watch,bo-href-i, bo-href-i為了兼容性問(wèn)題仍在使用,這2個(gè)屬性也添加一個(gè)watch。

屬性使用

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

• bo-text='text': 計(jì)算'text'，不添加watches, 并將文本添加到元素內(nèi)， 比如 <span bo-text="Person.name"></span>
• bo-bind='text': bo-text的別名，等同于bo-bind
• bo-href-i: 等同于 ng-href, 都創(chuàng)建一個(gè)watch,為兼容性而存在, 比如 <a bo-href-i="/profile{{Person.id}}"></a>
• bo-href: 同上，就是不創(chuàng)建watch
• bo-src-i='url': ![]({{picture}}), 創(chuàng)建一個(gè)watch,為兼容性而存在，否則使用 bo-src
• bo-src: 不創(chuàng)建watch,注意不能使用 {{}}用來(lái)插值， ![](picture)
• bo-class="object/string": 等同于 'ng-class'
• bo-id="#id": 計(jì)算 #id 的值，并將id渲染給元素
• bo-value="expression": 計(jì)算表達(dá)式的值，并當(dāng)作 value 渲染給元素， <input type="radio" bo-value="value">
• bo-attr bo-attr-foo="text": 計(jì)算'text'的值，當(dāng)作元素自定義屬性渲染， <div bo-attr bo-attr-foo="bar"></div>

總結(jié)

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