Привет, ребята, это мой первый пост в среде, поэтому я подумал, что мне написать, поэтому решил поделиться с вами своим опытом использования новой двусторонней привязки данных в angular 2.
Если вы знакомы с Angular, вы должны знать, что одним из его преимуществ является двусторонняя привязка данных:
Но двусторонняя привязка может быть проблемой, потому что каждый атрибут ngModel или каждое угловое выражение {{}} добавляет наблюдателя, поэтому, если вы не используете их осторожно вы можете повлиять на производительность вашего приложения, наиболее распространенным примером является ngRepeat:
Только представьте, 1 000 000 000 наблюдателей, только подумайте, какое отставание мы только что добавили в наше приложение, это слишком много! Я столкнулся с этим и поверьте мне, это настоящая боль в шее. Конечно, есть способы улучшить ngRepeat, вы можете создать свою собственную директиву, изолирующую область видимости (не волнуйтесь, если вы не отменяете и что такое изолированная область видимости), или вы можете сделать это:
В нескольких словах:
Двусторонняя привязка данных нам очень помогает, но нам нужно проявлять осторожность, когда мы ее используем, особенно когда вы добавляете ненужную область видимости, возьмем ng Repeat в качестве хорошего примера.
Итак, что произошло с Angular 2, в чем главное отличие? Что ж, теперь вы можете определиться с направлением привязки! Да, я не шучу, теперь с Angular 2 вы можете решить, хотите ли вы создать одностороннюю или двустороннюю привязку. Но сначала давайте определим разницу между односторонней и двусторонней привязкой данных.
Односторонняя привязка данных означает обновление данных в одном направлении; это может быть обновление с HTML на JS или с JS на HTML, но НЕ наоборот, по крайней мере, не одновременно. Допустим, мы используем рации, только 1 человек может говорить одновременно, а не 2, но с другой стороны, когда мы говорим о двусторонней привязке данных , мы говорим о хороших мобильных телефонах, 2 или более человек могут разговаривать одновременно; Это означает, что данные могут быть обновлены с JS до HTML или наоборот одновременно.
Хорошо, теперь давайте поговорим о синтаксисе, синтаксис изменился, потому что теперь Angular 2 отображается с JS на HTML, это означает, что все ваше приложение будет закодировано на JS, поэтому, когда ваши файлы загружаются в ваших браузерах, angular будет рендеринг вашего приложения, только с этим изменением у нас есть 2 преимущества:
- FOUC («https://en.wikipedia.org/wiki/Flash_of_unstyled_content.com) больше не существует, потому что теперь вы можете добавить счетчик или что-то в этом роде до запуска вашего приложения.
- Angular становится изоморфным! теперь приложение полностью отрисовывается с помощью JS, для работы нет необходимости в браузере, мы можем визуализировать приложение с сервера и обслуживать его, повышая производительность приложения
Посмотрите, чем отличается предыдущий синтаксис от того, который у нас есть прямо сейчас:
Помните, что я говорил вам, что вы можете управлять привязкой в Angular 2, ну, круглые скобки () и квадратные скобки [] имеют значение.
Скобки ()
Скобки () в Angular 2 называются связыванием событий. Связывание событий распространяет изменения от HTML к JS, от элемента к компоненту.
Но как HTML (элемент) может сообщить JS (компоненту) о том, что что-то произошло? Легкий! с событиями! В двух словах круглые скобки сообщают Angular о том, что нужно дождаться события, а затем выполнить действие для обновления компонента:
Но имейте в виду следующее:
- Привязка события состоит из целевого события, заключенного в круглые скобки, и соответствует выражению, которое должно выполняться при срабатывании этого события.
- Каждая привязка события будет содержать информацию о событии, вы можете получить доступ к этой информации через объект события: $ event
- Если событие является собственным событием DOM, то объект события будет иметь ту же информацию, что и любое собственное событие DOM.
- Существует три типа событий: событие элемента, событие компонента и событие директивы.
Если вы хотите узнать больше о привязке событий, вам необходимо прочитать документацию по Angular 2: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#event-binding
Скобки []
Теперь давайте посмотрим, круглые скобки охватывают одну одностороннюю привязку от элемента к компоненту, но теперь, как мы собираемся изменить элемент при выполнении обещания? или как мы собираемся показать или скрыть определенные элементы в зависимости от имеющихся переменных? Легко с привязкой свойств.
Связывание свойств означает обновление элемента (HTML) от компонента (JS): компонента до элемента, но разница с привязкой событий состоит в том, что мы не используем события для распространения изменений, мы используем выражение шаблона; это шаблонное выражение будет оцениваться Angular, и оно будет выдавать значение каждый раз, когда переменная, участвующая в выражении шаблона, изменяется, выражение снова оценивается для получения нового значения
Помните следующее:
- Выражения шаблона имеют 4 принципа: Отсутствие видимых побочных эффектов (не должно изменять состояние приложения), быстрое выполнение (выражения должны завершаться быстро или ваш пользователь опыт может перетянуть), простота (не следует писать сложные выражения, можно, но не следует) и Идемпотентность (идеальное выражение всегда возвращает одно и то же значение, пока не будет его зависимости и изменения значений)
- Связывание событий - это особый тип выражения, который называется: оператор шаблона.
- Фигурные скобки по-прежнему работают! вы можете связать свои данные с помощью {{}}, и ваши данные будут обновлены, вы можете написать даже выражение в фигурных скобках. Просто помните, что это изменение будет от компонента к элементу
- У шаблонных выражений есть свои ограничения: назначения (+ =, - = и т. Д.), Создание объектов с новым ключевым словом, связанные выражения с; или, а инкременторы (++) и декременторы (-) запрещены
- Существуют операторы выражения шаблона: оператор вертикальной черты (|) и оператор безопасной навигации (?.):
- Оператор вертикальной черты (|): используется для преобразования результата выражения.
- Оператор безопасной навигации (?.): используется для защиты от нулевых или неопределенных значений.
Дополнительные сведения о том, как работают выражения шаблона, см. В официальной документации (https://angular.io/docs/ts/latest/guide/template-syntax.html#!#template-expressions)
Итак, теперь вы понимаете разницу между [] и () в том, как работает двусторонняя привязка? легко, вам нужно окружить вашу переменную или специальную директиву (), а затем []:
Резюме
Что ж, ребята, angular 2 значительно улучшил двустороннюю привязку, позволяя вам выбирать, хотите ли вы одностороннюю или двустороннюю привязку, синтаксис, который легко понять, () для событий и [] для выражений, нам просто нужно имейте в виду правила как им пользоваться :)
По моему личному мнению, Angular 2 великолепен, мне нравится, как он работает сейчас, синтаксис достаточно ясен, кроме того, если у вас есть предыдущий опыт работы с фреймворками, такими как реагирование, вы легко поймете Angular 2, потому что оба работают одинаково, разница в том, что Angular 2 - это полный фреймворк MVC, а React - фреймворк V.
Я поделюсь с вами своим опытом работы с Angular 2, хотя он находится в статусе бета-версии, вы можете использовать его в своих проектах, но имейте в виду, что, возможно, некоторые функции будут изменены в ближайшем будущем. Увидимся, ребята, надеюсь, мой опыт работы с Angular 2 вам помог.
