Angular Light + Object.observe

Технології 09 січня 2025

Angular Light - це самостійний клієнтський MV (C/VM) фреймворк, який побудований на ідеях Angular.js і Knockout.js, і схожий на спрощений Angular.js

3. Приватні директиви, контролери та фільтри.
Попередні статті:

Вийшла версія Angular Light 0.8 яка включає різні поліпшення і виправлення, основні зміни:

1. Підтримка Object.observe та Array.observe, що може збільшити продуктивність веб-програм.

Використання Object.observe - це опціональна фіча, так само її можна включати для окремих Scope (scope дерев). Браузери які не підтримують Object.observe продовжують працювати через dirty-checking, так само потрібно знати деякі нюанси.

Деякі сферичні тести:

Швидкість пошуку змін у scope, jsperf.

Результат можна бачити на картинці вище.

Пошук змін у масивах, у цьому тесті 2000 масивів, кожен містить по 2000 елементів, на першому проході немає змін у масивах, на другому відбувається зміна 100 масивів. Приблизні результати на моєму ноутбуці:

Dirty-checking: 35ms і 65ms

Object.observe: 0.1ms і 1ms

Так само для цієї фічі є запас для збільшення продуктивності, наприклад «digest» цикл може виключати ті scope в яких не було змін, це може поліпшити показники на порядок (для тестів вище).

Хоча в реальних додатках загальна продуктивність не буде така хороша тому що не можна все покрити за рахунок Object.observe і якась частина буде працювати через dity-checking, але для великих додатків профіт може бути відчутний.

2. Можливість ізоляції Angular Light, це дозволяє вбудовувати свій додаток в чужі сторінки без «шкоди» - на сторінці не буде ніяких глобальних змінних від програми і фреймворку.

Так само є можливість використовувати різні версії Angular Light на одній сторінці, і створювати копії Angular Light якщо потрібна необхідність. angularlight.org/tutorial/isolated-alight.html#ru

3. Приватні директиви, контролери та фільтри.

Для кожного scope (scope дерева) можна вказати свій набір директив, зробити приватні директиви. Для цього в scope потрібно зробити змінну $ ns і додати туди потрібні директиви, контролери, фільтри. Приклад jsfiddle.net/lega911/9mfpbrw7

4. Вироблено поліпшення продуктивності та споживання пам'яті, збільшено покриття тестами, що налічує майже 800 перевірок.