AngularJS: Tại sao ng-bind tốt hơn {{}} trong góc?

Tôi đã ở trong một trong những bài thuyết trình góc cạnh và một trong những người trong cuộc họp đã đề cập ng-bind là tốt hơn so với {{}}ràng buộc.

Một trong những lý do, ng-bind đặt biến trong danh sách theo dõi và chỉ khi có mô hình thay đổi, dữ liệu sẽ được đẩy để xem, mặt khác, {{}}sẽ nội suy biểu thức mỗi lần (tôi đoán đó là chu kỳ góc) và đẩy giá trị, ngay cả khi giá trị thay đổi hay không.

Ngoài ra, người ta nói rằng, nếu bạn không có nhiều dữ liệu trên màn hình, bạn có thể sử dụng {{}}và vấn đề về hiệu suất sẽ không hiển thị. Ai đó có thể làm sáng tỏ vấn đề này cho tôi?

Nếu bạn không sử dụng ng-bind, thay vào đó là một cái gì đó như thế này:

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

bạn có thể thấy thực tế Hello, {{user.name}}trong một giây trước khi user.nameđược giải quyết (trước khi dữ liệu được tải)

Bạn có thể làm một cái gì đó như thế này

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

nếu đó là một vấn đề cho bạn.

Một giải pháp khác là sử dụng ng-cloak.

Hiển thị:

Trong khi angularjs của bạn đang bootstrapping, người dùng có thể thấy dấu ngoặc được đặt của bạn trong html. Điều này có thể được xử lý với ng-cloak. Nhưng đối với tôi đây là một cách giải quyết, mà tôi không cần sử dụng, nếu tôi sử dụng ng-bind.

Hiệu suất:

Các {{}}là chậm hơn nhiều .

Đây ng-bindlà một chỉ thị và sẽ đặt một người theo dõi vào biến đã qua. Vì vậy, ý ng-bindchí chỉ áp dụng, khi giá trị được thông qua thực sự thay đổi .

Các dấu ngoặc trên Mặt khác sẽ được bẩn kiểm tra và làm mới trong mỗi $digest , ngay cả khi nó không cần thiết .

Tôi hiện đang xây dựng một ứng dụng trang lớn (~ 500 ràng buộc cho mỗi lượt xem). Thay đổi từ {{}} thành nghiêm ngặt ng-bindđã giúp chúng tôi tiết kiệm khoảng 20% ​​mỗi lần scope.$digest.

Gợi ý :

Nếu bạn sử dụng một mô-đun dịch thuật như dịch góc , luôn thích chỉ thị trước chú thích dấu ngoặc.

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

Nếu bạn cần một chức năng lọc, tốt hơn là chỉ thị, mà thực sự chỉ sử dụng bộ lọc tùy chỉnh của bạn. Tài liệu cho dịch vụ lọc $

CẬP NHẬT 28.11.2014 (nhưng có thể ngoài chủ đề):

Trong Angular 1.3x bindoncechức năng đã được giới thiệu. Do đó, bạn có thể liên kết giá trị của một biểu thức / thuộc tính một lần (sẽ bị ràng buộc khi! = 'Không xác định').

Điều này hữu ích khi bạn không mong muốn ràng buộc của mình thay đổi.

Cách sử dụng: Đặt ::trước ràng buộc của bạn:

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

Thí dụ:

ng-repeatđể xuất một số dữ liệu trong bảng, với nhiều ràng buộc mỗi hàng. Liên kết dịch thuật, đầu ra bộ lọc, được thực thi trong mọi bản tóm tắt phạm vi.

ng-bind tốt hơn {{...}}

Ví dụ: bạn có thể làm:

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

Điều này có nghĩa là toàn bộ văn bản Hello, {{variable}}kèm theo<div> sẽ được sao chép và lưu trữ trong bộ nhớ.

Nếu thay vào đó bạn làm một cái gì đó như thế này:

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

Chỉ giá trị của giá trị sẽ được lưu trữ trong bộ nhớ và angular sẽ đăng ký một trình theo dõi (biểu thức đồng hồ) chỉ bao gồm biến.

Về cơ bản cú pháp xoăn đôi dễ đọc hơn và yêu cầu gõ ít hơn.

Cả hai trường hợp đều tạo ra cùng một đầu ra nhưng .. nếu bạn chọn đi cùng, {{}}có khả năng người dùng sẽ thấy trong một vài mili giây {{}}trước khi mẫu của bạn được hiển thị bằng góc. Vì vậy, nếu bạn nhận thấy bất kỳ {{}}thì tốt hơn là sử dụngng-bind .

Ngoài ra, điều rất quan trọng là chỉ trong index.html của ứng dụng góc của bạn, bạn mới có thể hủy kết xuất {{}}. Nếu bạn đang sử dụng các lệnh như vậy thì các mẫu, sẽ không có cơ hội thấy điều đó bởi vì góc đầu tiên sẽ hiển thị mẫu và sau khi thêm nó vào DOM.

{{...}}có nghĩa là ràng buộc dữ liệu hai chiều. Nhưng, ng-bind thực sự có nghĩa là liên kết dữ liệu một chiều.

Sử dụng ng-bind sẽ giảm số lượng người theo dõi trong trang của bạn. Do đó ng-bind sẽ nhanh hơn {{...}}. Vì vậy, nếu bạn chỉ muốn hiển thị một giá trị và các cập nhật của nó và không muốn phản ánh sự thay đổi của nó từ UI trở lại bộ điều khiển, thì hãy tìm ng-bind . Điều này sẽ tăng hiệu suất trang và giảm thời gian tải trang.

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

Điều này là do {{}}trình biên dịch góc xem xét cả nút văn bản và nó là cha mẹ vì có khả năng hợp nhất 2 {{}}nút. Do đó có các liên kết bổ sung thêm vào thời gian tải. Tất nhiên trong một vài lần như vậy, sự khác biệt là không quan trọng, tuy nhiên khi bạn sử dụng nó trong một bộ lặp lại số lượng lớn các mục, nó sẽ gây ra tác động trong môi trường thời gian chạy chậm hơn.

Lý do tại sao Ng-Bind tốt hơn bởi vì,

Khi Trang của bạn không được tải hoặc khi internet của bạn chậm hoặc khi trang web của bạn tải một nửa, thì bạn có thể thấy các loại sự cố này (Kiểm tra Ảnh chụp màn hình với dấu Đọc) sẽ được kích hoạt trên Màn hình hoàn toàn kỳ lạ. Để tránh như vậy, chúng ta nên sử dụng Ng-bind

ng-bind cũng có vấn đề của nó. Khi bạn cố gắng sử dụng các bộ lọc góc , giới hạn hoặc thứ gì khác, bạn có thể gặp vấn đề nếu bạn sử dụng ng-bind . Nhưng trong trường hợp khác, ng-bind tốt hơn ở phía UX. Khi người dùng mở một trang, anh ấy / cô ấy sẽ thấy (10ms-100ms) in các ký hiệu ( {{...}} ), đó là lý do tại sao ng-bind tốt hơn .

Có một số vấn đề nhấp nháy trong {{}} như khi bạn làm mới trang sau đó để thấy một biểu thức spam thời gian ngắn. Vì vậy, chúng ta nên sử dụng ng-bind thay vì biểu thức cho mô tả dữ liệu.

ng-bindcũng an toàn hơn vì nó đại diện htmlnhư một chuỗi.

Vì vậy, ví dụ, '<script on*=maliciousCode()></script>'sẽ được hiển thị dưới dạng một chuỗi và không được thực thi.

Theo Angular Doc:
Vì ngBind là một thuộc tính thành phần, nó làm cho các ràng buộc trở nên vô hình với người dùng trong khi trang đang tải ... đó là sự khác biệt chính ...

Về cơ bản cho đến khi mọi phần tử dom không được tải, chúng ta không thể thấy chúng và vì ngBind là thuộc tính của phần tử, nó sẽ đợi cho đến khi các doms hoạt động ... thêm thông tin bên dưới

ngBind
- Chỉ trong mô-đun ng

Các ngBind thuộc tính nói AngularJS để thay thế cho nội dung văn bản của phần tử HTML được chỉ định với giá trị của một biểu thức nào đó, và để cập nhật các nội dung văn bản khi giá trị của những thay đổi biểu hiện.

Thông thường, bạn không sử dụng ngBind trực tiếp mà thay vào đó, bạn sử dụng đánh dấu xoăn đôi như {{biểu thức}} tương tự nhưng ít dài dòng hơn.

Nên sử dụng ngBind thay vì {{biểu thức}} nếu một mẫu được trình duyệt hiển thị trong giây lát ở trạng thái thô trước khi AngularJS biên dịch nó. Vì ngBind là một thuộc tính thành phần, nó làm cho các ràng buộc vô hình với người dùng trong khi trang đang tải.

Một giải pháp thay thế cho vấn đề này sẽ là sử dụng chỉ thị ngCloak . truy cập vào đây

để biết thêm thông tin về ngbind, hãy truy cập trang này: https://docs.angularjs.org/api/ng/directive/ngBind

Bạn có thể làm một cái gì đó như thế này như thuộc tính, ng-bind :

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

hoặc thực hiện phép nội suy như dưới đây:

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

hoặc theo cách này với các thuộc tính ng-cloak trong AngularJs:

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

ng-cloak tránh nhấp nháy trên dom và đợi cho đến khi tất cả đã sẵn sàng! điều này tương đương với thuộc tính ng-bind ...

Bạn có thể tham khảo trang web này, nó sẽ cung cấp cho bạn một lời giải thích cái nào tốt hơn tôi biết {{}} cái này chậm hơn ng-bind.

http://corpus.hubwiz.com/2/angularjs/16125872.html giới thiệu trang web này.