DanLevy.net

AngularJS хитрости

AngularJS МОЖЕТ быть увлекательным!

Hero image for AngularJS хитрости

AngularJS МОЖЕТ БЫТЬ УВЛЕКАТЕЛЬНЫМ!

Для: AngularJS v1.x

  1. Разработчики AngularJS быстро обнаруживают, что их средние и крупные приложения под давлением рассыпаются из-за разбросанных $watch и часто громоздкой опоры под названием $scope.
  2. Сохраняйте $scope в чистоте от избыточного состояния UI, постарайтесь ограничить размер & глубину вашей общей иерархии.

Двустороннее связывание данных: двусторонний меч

Двустороннее связывание само по себе делает переход из других фреймворков вроде Backbone просто потрясающим.

Проблема в том, что многие сайты хронически переиспользуют паттерны проектирования Angular. Это приводит к распространению директив и $scope/rootScope, которые легко могут содержать тысячи экземпляров и цепляться к огромным объектам, препятствуя эффективной сборке мусора.

Вы уже понимаете, к чему это приведет: браузер, истощенный работой! Навсегда приговоренный работать с бешеной скоростью, выполняя бесконечные и избыточные перекомпиляции UI/DOM.

Стоп! Перестаньте злоупотреблять Angular.JS

«Если у вас в руках только молоток, то все проблемы начинают выглядеть как гвозди»

— старая поговорка

Есть ли у вашей программы проблемы с директивами?

current-user-status-label
  div(ng-if='loggedIn')
    view-user-surplusage(ng-if='!editMode')
      .head: contact-details(user='user')
      .tool: contact-buttons(loggedIn='loggedIn')
      a.edit-icon(ng-click='editMode = true')
    edit-user-surplusage(ng-if='editMode')
      .head: avatar-edit(user='user')
      .body: edit-contact-details(user='user')
      a.save-icon(ng-click='editMode = false')

Давайте спроектируем гибкий пользовательский виджет, который поможет:

  1. Гибкая компонентизация с DRY-кодом Angular
  2. Понятные директивы с минимальной глубиной вложенности (обратите внимание на ng-repeats)
  3. Простой сервисный слой
  4. Минимальное количество фактического кода для реализации — только HTML/код представления
// jade
user-widget
  div(ng-if='loggedIn')
    div.edit(ng-if='editMode')
      h4.email-icon: input(type='email', ng-model='user.email')
      h4.phone-icon: input(type='email', ng-model='user.phone')
      a.save-icon(ng-click='editMode = false')
    div.show(ng-if='!editMode')
      h1.users-icon {{ user.name  }}
      h4.email-icon {{ user.email }}
      h4.phone-icon {{ user.phone }}
      a.edit-icon(ng-click='editMode = true')
  div(ng-if='!loggedIn')
    h5: i Welcome User
    a.btn(href='/login') Login

Решения

Советы по Angular

  1. Используйте одностороннее связывание (например, { :: title } )
  2. Ограничьте рекурсивное вложение директив
  3. И если вы всё же должны вкладывать директивы, НИКОГДА не делайте это внутри ng-repeat - Производительность начнёт напоминать что-то вроде O(n^2)^3 ;) I. Используйте нативный JS/DOM код в паттерне фабрики для создания базовых DOM/UI фрагментов, примеры: Всплывающее сообщение, статусная строка. Вызывайте фабрики UI из директив или контроллеров.
  4. Бонус: Понимайте стоимость и триггеры браузерного рендер-цикла: анимация, композитный рендеринг, рефлоу

Используйте Browserify для организации проекта

Не специально для Angular, но важен для простого разрешения зависимостей.

Browserify делает JS-проекты управляемыми с минимальной накладной стоимостью (около нескольких сотен символов).

Просто прочитайте этот раздел руководства по Browserify.

Альтернативы

ReactJS от Facebook

Если у вас много мелких переиспользуемых компонентов UI — ReactJS может быть лучшим выбором:

Polymer Project от Google

Чистый JS подход

Loading comments...