В этой статье рассматриваются различия в реализации AngularJS и традиционного управления JavaScript DOM путем реализации двух простых бизнес-требований, и пытается понять идеи программирования, такие как MVW, в популярной разработке веб-фронта.
Это требование очень распространено. Например, двухуровневое меню, когда элемент меню первого уровня нажимается, должен отображаться или скрыт соответствующий элемент подменю.
реализация jQuery:
Кода -копия выглядит следующим образом:
<!-html->
<ul>
<li>
Пункт 1
<ul>
<li> Предмет ребенок 1 </li>
</ul>
</li>
</ul>
// javascript
$ ('li.parent_item'). Click (function () {
$ (this). Children ('ul.Child'). Toggle ();
})
Реализация AngularJS:
Кода -копия выглядит следующим образом:
<!-html->
<ul>
<li ng-click = "hide_child =! hide_child">
Пункт 1
<ul ng-hide = "hide_child">
<li> Предмет ребенок 1 </li>
</ul>
</li>
</ul>
Традиционный способ эксплуатации DOM не будет подробно описан. Реализация AngularJS требует большой уточнения кода, достаточно только HTML -версии. Приведенный выше код использует эти знания точек AngularJS:
1. Директивы
2. Испытания
NG-Click и NG-HIDE являются директивами (инструкциями), которые поставляются с структурой. Первый эквивалентен предоставлению обработчика событий для тега LI. Когда нажимается элемент HTML (LI), будет выполнено выражение HIDE_CHILD =! HIDE_CHILD. Давайте сначала рассмотрим директиву NG-Hide, которая будет контролировать, должен ли отображаться элемент HTML (реализован через CSS) на основе результата выражения назначения (значение Болеана). То есть, если переменная hide_child верна, то UL будет скрыт, в противном случае результат будет противоположным.
Здесь hide_child на самом деле является переменной на $ acpope. Изменения в его значении также могут быть реализованы с использованием контроллера контроллера для обертывания метода, но текущий оператор является относительно простым и напрямую записано в задании инструкции.
Через приведенный выше простой анализ кода, мы можем увидеть еще две очевидные особенности AngularJS:
1. Операции DOM заблокированы с помощью инструкций и выражений, а дополнительный код JavaScript сохраняется просто с помощью простого кода.
2. Применение директив и выражений только напрямую вложено в HTML, что несколько противоречит стилю кода ненавязчивого JavaScript, который JQuery выдвигает.
Давайте сначала рассмотрим другое требование, а затем подробно объясним приведенный выше вывод.
Требование 2: Нажав на DIV, запустив выбор радиопроизводительной кнопки в форме
Традиционный элемент формы HTML не очень удобен для работы на современных мобильных устройствах. Например, радиостанция радиостанции требует точного позиционирования на сенсорном экране, чтобы управлять этим компонентом, но обозначенное вручную позицию очень грубо. Обычной практикой является добавление соответствующего управления меткой, но соотношение, занявшее экран самого текста, не является идеальным, и не имеет четкого эффекта информационной связи. Следовательно, тег Div или Li с большей площадью обычно эксплуатируется косвенно.
реализация jQuery:
Кода -копия выглядит следующим образом:
<!-html->
<ul>
<li>
<input type = "Радио"
id = "option1" />
<метка для = "опция1"> опция 1 </label>
</li>
</ul>
// javascript
$ ('li.selection'). Click (function () {
$ (this) .children ('input [type = "radio"]'). Click ();
})
Реализация AngularJS:
Кода -копия выглядит следующим образом:
<!-html->
<ul>
<li ng-repeat = "Опция в опциях"
ng-click = "model.option = option.value"
ng-class = "{active: model.option == option.value}">
<input type = "Радио"
ng-model = "model.option"
value = "{{option.value}}"
id = "option1" />
<метка для = "опция1"> опция 1 </label>
</li>
</ul>
В этом решении мы также не включали дополнительный код JavaScript и использовали несколько дополнительных инструкций. Для сравнения и ссылки мы заботимся только о выражениях двух инструкций NG-Click и NG-Model.
Давайте сначала рассмотрим директиву NG-модели входного элемента. Назначение здесь означает, что мы связываем ввод в шаблоне с атрибутом опции объекта $ scope.model. Для более глубокого понимания привязки данных вы можете обратиться к привязке данных. Эта указанная ассоциация делает управление шаблоном напрямую связываться с моделью данных, и это привязка является двунаправленной. Это означает, что после того, как пользователь изменяет значение в управлении (проверьте радио вход), соответствующий объект модели будет переназначен (model.option); В то же время, если значение объекта модели изменяется, входной элемент управления в шаблоне также будет отражать изменения соответственно. И это на самом деле не достигается в вышеупомянутой реализации jQuery.
Следовательно, с помощью привязки данных AngularJS, щелкнув элемент LI, чтобы косвенно завершить процесс запуска ввода следующим образом:
1. Нажмите на тег LI, чтобы назначить значение Model.Option;
2. Измените объект модели и найдите соответствующий входной элемент управления (значение значения - Model.Option);
3. Активируйте проверенное свойство управления вводом
В двух вышеупомянутых случаях у нас есть новое понимание работы веб-фронта.
Прежде всего, с точки зрения технической реализации, введя новые концепции, такие как инструкции, выражения, привязка данных и т. Д., Мы можем использовать DOM совершенно новым способом, а не просто реализация кода JavaScript, который совместима с пользователями и компонентами HTML. Такое изменение в мышлении огромно.
С начала этого столетия рост динамического веб-программирования, технология программирования на стороне сервера улучшается. С самого начала CGI/PHP/ASP произвели .NET против Java с языка и платформы. Эффективность разработки и программные процессы способствуют MVC Framework/ORM/AOP и т. Д., А также производительность и большие данные, которые привели NodeJS/NOSQL/HADOOP и т. Д., В то время как технические требования фронтального конца браузера не казались такими радикальными. С одной стороны, через сторону сервера и базы данных, большинство бизнес -потребностей модели B/S можно удовлетворить; С другой стороны, сам браузер обладает различиями между различными платформами, несовместимостью со стандартами языка сценариев и технологии рендеринга, а также отсутствием вычислительной мощности и соображений безопасности.
В этом случае, в большинстве случаев, браузеру нужно только рассмотреть вопрос о рендеринге страниц и простого взаимодействия с пользователем. Таким образом, HTML/DOM Plus Javasript/CSS выполняет основную работу фронтального. Таким образом, в прошлом не было никаких фронтовых работников, необходимы только веб-дизайнеры. Постепенно требования к фронтальному концу увеличились, и jQuery стала наиболее используемой библиотекой пакетов для JavaScript Operating Dom. На этом этапе основной задачей jQuery/JavaScript по -прежнему является лишь инструмент для представления и взаимодействия с терминалом браузера пользователя.
После понимания происхождения jQuery нетрудно обнаружить, что некоторые правила, осуществляемые в прошлом, такие как ненавязчивый JavaScript, были ограничены средствами и методами реализации в то время. Чтобы разделить логику кода DOM и JavaScript, мы предпочитали метод с более высоким обслуживанием. После того, как фронтальная спрос на JavaScript увеличился, появились многие фронтальные рамки MVC/MVP, а также так называемый MVW (модель-View-Whate) AngularJS, а одноразмерный подход JavaScript и DOM изменился. Первоначально мы рассмотрели прямую работу отображения интерфейса и взаимодействия с пользователем, но теперь у нас есть привязка данных клиента, богатые инструкции и инъекцию зависимости. То, что нас ждет, будет совершенно новой моделью программирования и образу мышления.