ngCloak 實現 Angular 初始化閃爍最佳實踐

在作angular的SPA開發時，咱們常常會碰見在如Chrome這類可以快速解析的瀏覽器上出現表達式({{ express }} ),或者是模塊(div)的閃爍。對於這個問題因爲JavaScript去操做DOM，都會等待DOM加載完成（DOM ready）。對於angular會在DOM ready完會纔回去解析html view Template，因此對於Chrome這類快速的瀏覽器你會看見有閃爍的狀況出現。而對於IE7，8這類解析稍慢的瀏覽器大部分狀況下是不會出現這個問題的。

在angular中爲咱們提供了ng-cloak來實現紡織閃爍的方案，咱們只須要在須要的地方加上ng-cloak。同時對於bing文字({{ express }} )咱們也能夠改成ng-bind來實現避免。

 <div id="template1" ng-cloak>hello</div>
 <div id="template2" ng-cloak class="ng-cloak"> {{'hello IE7}}</div>
 <div id="template2" ng-bing="'hello IE7'"></div>

angular講ng-cloak實現爲一個directive，並會在初始化的時候在DOM的heade增長一行css代碼，以下：

<style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\:form{display:block;}.ng-animate-start{clip:rect(0,auto,auto,0);-ms-zoom:1.0001;}.ng-animate-active{clip:rect(-1px,auto,auto,0);-ms-zoom:1;}
</style>

從上面咱們能夠看見angular將帶有ng-clock的的元素設置爲display:none，隱藏掉，在等到angular解析到帶有ng-clock的節點時候，會把attribute和class同時remove掉，這樣就能夠實現防止節點的閃爍。

var ngCloakDirective = ngDirective({
      compile: function(element, attr) {
        attr.$set('ngCloak', undefined);
        element.removeClass('ng-cloak');
      }
});

在angular.js的最後一段代碼中能看見前面所說的增長css的代碼：

!angular.$$csp() && angular.element(document).find('head').prepend('<style type="text/css">@charset "UTF-8";[ng\\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide{display:none !important;}ng\\:form{display:block;}.ng-animate-block-transitions{transition:0s all!important;-webkit-transition:0s all!important;}</style>');

好像閃爍的問題好像已經可以被我解決了，恩是不是這樣的，理論也改如此，可是現實是殘酷的，咱們的感性認識常常會被現實一記重重的耳光，咱們才能很更深刻全面的思考，若是瀏覽器的速度比angular在head中加入css的速度還快呢？我在給公司的一個項目組解決這個閃爍的問題的時候就碰見了這個問題。怎麼辦呢？那咱們只能使出咱們必殺技，本身把css加入咱們的css文件引入heade，啓動加載，ok這樣就能夠完美解決了。(若是你也碰見了加了ng-cloak還不起做用的話，那麼試試直接引入css文件吧)

到這裏關於ng-cloak的原理和解決方案已經完成，歡迎繼續關注angular的後續經驗篇分享。