AngularJS: ng-bind neden açısal olarak {{}} 'den daha iyi?

Açısal sunumlardan birindeydim ve bahsi geçen toplantıdaki kişilerden biri bağlayıcı ng-bindolmaktan daha iyi {{}}.

Sebeplerden biri ng-bind, değişkeni izleme listesine koyun ve yalnızca bir model değişikliği olduğunda görüntülenmeye itilen veriler, diğer yandan, {{}}her seferinde ifadeyi enterpolasyonlayacaktır (sanırım açısal döngüdür) ve değer değişse de değişmese bile.

Ayrıca, ekranda çok fazla veri yoksa, kullanabileceğiniz {{}}ve performans sorununun görünmeyeceği söylenir . Birisi benim için bu konuya ışık tutabilir mi?

Kullanmıyorsanız ng-bind, bunun gibi bir şey:

<div>
  Hello, {{user.name}}
</div>

Hello, {{user.name}}bir saniye gerçek user.namedeğeri çözümlenmeden önce görebilirsiniz (veriler yüklenmeden önce)

Böyle bir şey yapabilirsin

<div>
  Hello, <span ng-bind="user.name"></span>
</div>

bu sizin için bir sorunsa.

Başka bir çözüm kullanmaktır ng-cloak.

görüş mesafesi:

Açısallarınız önyükleme yaparken, kullanıcı html'de yerleştirdiğiniz parantezleri görebilir. Bu ile halledilebilir ng-cloak. Ama benim için bu bir çözüm, eğer kullanmam gerekirse kullanmam gerekmiyor ng-bind.

Verim:

{{}}Olduğunu çok daha yavaş .

Bu ng-bindbir direktiftir ve geçirilen değişkenin üzerine bir gözlemci yerleştirir. Bu yüzden, ng-bindsadece geçilen değer gerçekten değiştiğinde uygulanır .

Öte yandan parantez edilecek kirli kontrol ve yenilenir her $digest o olsa bile gerekli değildir .

Şu anda büyük bir tek sayfa uygulaması (görünüm başına ~ 500 ciltleme) oluşturuyorum. {{}} 'Dan katıya geçmek ng-bind, her birinde yaklaşık% 20 tasarruf sağladı scope.$digest.

Öneri :

Açısal çeviri gibi bir çeviri modülü kullanıyorsanız , köşeli parantez açıklamasından önce her zaman yönergeleri tercih edin .

{{'WELCOME'|translate}} => <span ng-translate="WELCOME"></span>

Bir filtre işlevine ihtiyacınız varsa, aslında sadece özel filtrenizi kullanan bir yönerge tercih edin. $ Filter service belgeleri

GÜNCELLEME 28.11.2014 (ancak konu dışında olabilir):

Açısal 1.3x'te bindonceişlevsellik tanıtıldı. Bu nedenle, bir ifadenin / özniteliğin değerini bir kez bağlayabilirsiniz (! = 'Tanımsız' olduğunda bağlanır).

Bu, bağlantınızın değişmesini beklemediğinizde yararlıdır.

Kullanım: ::bağlama önce yerleştirin:

<ul>  
  <li ng-repeat="item in ::items">{{item}}</li>
</ul>  
<a-directive name="::item">
<span data-ng-bind="::value"></span>

Misal:

ng-repeattablodaki bazı verileri, her satırda birden çok bağlama olacak şekilde çıktılamak için. Çeviri ciltleri, filtre çıktıları, her kapsamda sindirilir.

ng-bind daha iyi {{...}}

Örneğin, şunları yapabilirsiniz:

<div>
  Hello, {{variable}}
</div>

Yazının tamamı o Bu araçlar Hello, {{variable}}çevrelediği <div>kopyalanıp bellekte saklanacaktır.

Bunun yerine böyle bir şey yaparsanız:

<div>
  Hello, <span ng-bind="variable"></span>
</div>

Yalnızca değerin değeri bellekte saklanır ve açısal, yalnızca değişkenten oluşan bir izleyiciyi (saat ifadesi) kaydeder.

Temel olarak çift kıvırcık sözdizimi daha doğal olarak okunabilir ve daha az yazım gerektirir.

Eğer gitmek seçerseniz Her iki durum .. aynı çıktıyı ancak {{}}kullanıcı bazı milisaniye göreceği bir şans var {{}}senin şablon açısal tarafından oluşturulmadan önce. Yani herhangi bir fark ederseniz {{}}o zaman kullanmak daha iyidir ng-bind.

Ayrıca çok önemli olan sadece açısal uygulamanızın index.html dosyasında işlenmemiş olabilir {{}}. Eğer direktifleri şablonlar yani şablonlar kullanıyorsanız, açısal ilk önce şablonu render ve sonra DOM eklemek sonra görmek için bir şans yoktur.

{{...}}iki yönlü veri bağlama anlamına gelir. Ancak, ng-bind aslında tek yönlü veri bağlama içindir.

Ng-bind kullanıldığında sayfanızdaki izleyici sayısı azalır. Bu nedenle ng-bind daha hızlı olacaktır {{...}}. Bu nedenle, yalnızca bir değeri ve güncellemelerini görüntülemek istiyorsanız ve değerini UI'den denetleyiciye geri yansıtmak istemiyorsanız, ng-bind için gidin . Bu sayfa performansını artıracak ve sayfa yükleme süresini azaltacaktır.

<div>
  Hello, <span ng-bind="variable"></span>
</div>

Bunun nedeni {{}}, açısal derleyicinin hem metin düğümünü hem de üst öğesini dikkate almasıdır , çünkü 2 {{}}düğümü birleştirme olasılığı vardır . Bu nedenle yükleme süresine katkıda bulunan ek bağlayıcılar vardır. Tabii ki bu tür birkaç olay için fark önemsizdir, ancak bunu çok sayıda öğenin tekrarlayıcı içinde kullandığınızda, daha yavaş çalışma ortamı üzerinde bir etkiye neden olacaktır.

Ng-Bind'in daha iyi olmasının nedeni,

Sayfanız Yüklenmediğinde veya internetiniz yavaş olduğunda veya web sitenizin yarısı yüklendiğinde, bu tür sorunları görebilirsiniz ( Tamamen garip olan Ekranda Okundu işaretli Ekran Çekimini Kontrol Edin) tetiklenir. Bundan kaçınmak için Ng-bind kullanmalıyız

ng-bağlama Eğer açısal kullanmayı deneyin too.When kendi problemleri vardır filtreler , limiti kullanırsanız veya başka bir şey, belki sorun olabilir ng-bağlama . Ancak başka bir durumda, UX tarafında ng-bind daha iyidir. Kullanıcı bir sayfa açtığında, sembolleri ( {{...}} ) yazdıracağını (10ms-100ms) görecektir , bu yüzden ng-bind daha iyidir .

{{}} 'Da sayfayı yenilediğinizde kısa bir süre için spam ifadesi gibi bazı titreme sorunları var. Bu nedenle veri tasvirinde ifade yerine ng-bind kullanmalıyız.

ng-bindaynı zamanda daha güvenlidir çünkü htmlbir dize olarak temsil eder .

Örneğin, '<script on*=maliciousCode()></script>'bir dize olarak görüntülenir ve yürütülmez.

Açısal Doc göre:
yana ngBind bir eleman niteliği, bu sayfa yükleme iken kullanıcıya bağlamaları görünmez yapar ... o temel fark var ...

Temelde her dom öğesi yüklenmedikçe onları göremeyiz ve ngBind öğenin niteliği olduğundan, domlar oyuna girene kadar bekler ... daha fazla bilgi aşağıda

ngBind
- ng modülünde yönergesi ngBind niteliğini anlatır angularjs verilen bir ifadenin değeri ile belirtilen HTML elemanının metin içeriğini değiştirmek için ve metin içeriğini güncellemek zaman bu ifade değeri değişir.

Genellikle, ngBind'i doğrudan kullanmazsınız , bunun yerine {{expression}} gibi benzer ancak daha az ayrıntılı olan çift ​​kıvırcık işaretlemeyi kullanırsınız .

AngularJS derlemeden önce bir şablon tarayıcı tarafından geçici olarak anlık olarak görüntüleniyorsa, {{expression}} yerine ngBind kullanılması tercih edilir. NgBind bir element özniteliği olduğundan, sayfa yüklenirken bağlamaları kullanıcıya görünmez yapar.

Bir alternatif çözüm bu soruna kullanarak olacağını ngCloak direktifini. burayı ziyaret et

ngbind hakkında daha fazla bilgi için şu sayfayı ziyaret edin: https://docs.angularjs.org/api/ng/directive/ngBind

Böyle bir şeyi öznitelik, ng-bind olarak yapabilirsiniz :

<div ng-bind="my.name"></div>

veya aşağıdaki gibi enterpolasyon yapın:

<div>{{my.name}}</div>

veya AngularJ'lerde ng-cloak nitelikleri ile bu şekilde:

<div id="my-name" ng-cloak>{{my.name}}</div>

ng-cloak dom'da yanıp sönmekten kaçının ve hepsi hazır olana kadar bekleyin! bu ng-bind özelliğine eşittir ...

Bu siteye başvurarak size {{}} bunun ng-bind'den daha yavaş olduğunu bildiğimden hangisinin daha iyi olduğunu anlatabilirsiniz.

http://corpus.hubwiz.com/2/angularjs/16125872.html bu siteye bakın.