Три основных среды веб-интерфейса: 1. Angular, интерфейсная платформа, используемая для создания единого интерфейса приложения с мощными функциями модуля и настраиваемыми командами. 2. React, JavaScript, используемый для создания пользовательских интерфейсов. Среда разработки, в основном используемая для; 3. vue — это прогрессивная среда JavaScript для создания пользовательских интерфейсов. Основная библиотека Vue ориентирована только на уровень представления, ее очень легко изучить и интегрировать с другими библиотеками или существующими проектами.
Операционная среда этого руководства: система Windows 7, компьютер Dell G3.
За последние десять лет ИТ-индустрия быстро развивалась, и появилось много новых профессий, таких как дизайнеры пользовательского интерфейса, инженеры-разработчики, инженеры по тестированию программного обеспечения и т. д. Среди многих новых громких профессий инженеры веб-интерфейса являются одной из их. Итак, каковы три основные платформы для веб-интерфейса?
Три основных фреймворка веб-интерфейса — это Angular, React и Vue.
1. Угловой
AngularJS был создан в 2009 году Миско Хевери и другими, а позже был приобретен Google. Это отличный интерфейсный JS-фреймворк, который используется во многих продуктах. Это не только среда разработки интерфейса с передовыми концепциями, но и комплексное решение. Он следует шаблону MVC в архитектурном проектировании и поддерживает свободную связь между компонентами данных и логической обработки. AngularJS реализует естественное расширение HTML посредством технологии инструкций и реализует двустороннюю автоматическую синхронизацию модели данных и представления отображения посредством технологии компиляции, упрощая сложные операции DOM. Кроме того, он также обеспечивает хорошую поддержку технологии внешнего автоматизированного тестирования.
Angular — это интерфейсная платформа для создания интерфейсов отдельных приложений. Она имеет множество основных функций, таких как привязка данных, сервисы, директивы, внедрение зависимостей и т. д. Он имеет мощные функции модуля и имеет преимущества пользовательских команд.
характеристика:
1. Хорошая структура приложения
2. Двусторонняя привязка данных
3.Инструкции
4.HTML-шаблон
5. Можно встроить, ввести и протестировать.
преимущество:
1. Шаблон мощный и богатый функциями, а также поставляется с чрезвычайно богатым набором инструкций Angular.
2. Это относительно полная интерфейсная среда, включающая службы, шаблоны, двустороннюю привязку данных, модульность, маршрутизацию, фильтры, внедрение зависимостей и другие функции;
3. Настройте инструкции. После настройки инструкций вы можете использовать их в проекте несколько раз.
4. Модульность ng смело вводит некоторые особенности Java (внедрение зависимостей), что упрощает написание кода многократного использования, что очень полезно для гибких команд разработки.
5.angularjs разработан интернет-гигантом Google, что также означает, что он имеет прочную основу и поддержку сообщества.
недостаток:
1. Начать работу с Angular легко, но как только вы углубитесь в него, появится множество концепций, которые трудно понять во время обучения.
2. В документации очень мало примеров. Официальная документация в основном рассказывает только об API без каких-либо примеров. Во многих случаях вы можете получить конкретные инструкции от Google или напрямую спросить Миско, автора Angular.
3. Совместимость с IE6/7 не очень хорошая, но вы можете использовать jQuery для написания собственного кода для решения некоторых проблем.
4. Существует несколько руководств по применению инструкций. Angular на самом деле очень гибок. Если вы не следуете принципам использования некоторых авторов, в js легко писать разные коды. которые похожи на jQuery.
5. Внедрение зависимостей DI требует явного объявления, если требуется сжатие кода.
2. Реагировать
React, созданный Facebook, был официально запущен в 2013 году, на 4 года позже, чем Angular. Однако благодаря инновационному VirtualDOM он превзошел angularJS по производительности. После запуска он стал очень популярным. Он имеет множество функций, включая VirtualDOM, JSX, алгоритм Diff и т. д., поддерживает синтаксис ES6 и использует функциональное программирование. Порог немного выше, но он также более гибок, что дает больше возможностей для разработки.
характеристика
1. Декларативный дизайн. React использует декларативную парадигму, которая упрощает описание приложений.
2. Эффективность: React сводит к минимуму взаимодействие с DOM, моделируя DOM.
3. Гибкость: React хорошо работает с известными библиотеками и фреймворками.
преимущество:
1. Высокая скорость. В процессе рендеринга пользовательского интерфейса React реализует частичные обновления фактического DOM посредством микроопераций в виртуальном DOM.
2. Кроссбраузерная совместимость. Virtual DOM помогает нам решать кроссбраузерные проблемы. Он предоставляет нам стандартизированный API, с которым нет проблем даже в IE8.
3. Модульность: напишите независимые модульные компоненты пользовательского интерфейса для вашей программы, чтобы при возникновении проблемы с одним или несколькими компонентами вы могли легко изолировать ее.
4. Односторонний поток данных: Flux — это архитектура для создания одностороннего уровня данных в приложениях JavaScript. 5. Изоморфный чистый JavaScript: поскольку сканеры поисковых систем полагаются на ответы на стороне сервера, а не на выполнение JavaScript, предварительный рендеринг вашего приложения помогает с SEO. 6. Хорошая совместимость. Например, RequireJS используется для загрузки и упаковки, а Browserify и Webpack подходят для создания больших приложений. Они делают эти сложные задачи менее сложными. Недостатки: React сам по себе — это всего лишь V, а не полноценный фреймворк, поэтому, если вам нужна полноценная фреймворк для большого проекта, вам в основном нужно добавить ReactRouter и Flux для написания больших приложений.
3.Вуэ
Как последний запущенный фреймворк (2014 г.), Vue опирается на функции своих предшественников Angular и React (такие как VirtualDOM, двусторонняя привязка данных, алгоритм сравнения, адаптивные свойства, разработка компонентов и т. д.) и вносит соответствующие оптимизации, чтобы сделать его последним фреймворком (2014 г.). Более удобен, проще начать и менее подходит для новичков.
характеристика:
1. Легкий каркас
2. Двусторонняя привязка данных
3.Инструкции
4. Плагин
преимущество:
1. Простота: официальная документация очень понятна и ее легче изучить, чем Angular.
2. Быстро: обновление DOM при асинхронной пакетной обработке.
3. Состав. Составляйте свое приложение из отдельных компонентов многократного использования.
4. Компактный: ~18 КБмин+gzip, никаких зависимостей.
5. Мощность: выражениям не нужно объявлять зависимые выводимые свойства (вычисляемые свойства).
6. Удобство для модулей: его можно установить через NPM, Bower или Duo. Он не заставляет весь ваш код следовать различным правилам Angular, а сценарии использования более гибкие.
недостаток:
1. Новорожденный: Vue.js — новый проект, не такой зрелый, как Angular.
2. Влияние не очень большое: я погуглил и обнаружил, что разнообразие или богатство Vue.js меньше, чем у некоторых других известных библиотек.
3. Не поддерживает IE8.
Расширенные знания: в чем разница между Vue.js и другими фреймворками?
1. Отличия от AngularJS
Похожие моменты:
Обе инструкции поддержки: встроенные инструкции и пользовательские инструкции.
Оба поддерживают фильтры: встроенные и пользовательские фильтры.
Оба поддерживают двустороннюю привязку данных.
Ни один из них не поддерживает низкопроизводительные браузеры.
Отличия:
1. Стоимость обучения AngularJS высока, например, добавление функции внедрения зависимостей, в то время как API, предоставляемый самим Vue.js, относительно прост и интуитивно понятен.
2. С точки зрения производительности AngularJS полагается на грязную проверку данных, поэтому чем больше наблюдателей, тем медленнее он становится.
Vue.js использует наблюдение на основе отслеживания зависимостей и асинхронные обновления очереди. Все данные запускаются независимо.
Для больших приложений эта разница в оптимизации совершенно очевидна.
2. Отличия от React
Похожие моменты:
React использует специальный синтаксис JSX, а Vue.js также рекомендует использовать специальный формат файлов .vue при разработке компонентов. Существуют некоторые соглашения о содержимом файлов, и для использования оба должны быть скомпилированы.
Основная идея та же: все является компонентом, и экземпляры компонента могут быть вложенными.
Все они предоставляют разумные функции перехвата, позволяющие разработчикам настраивать свои потребности.
Колонка AJAX, Route и другие функции не встроены в основной пакет, а загружаются как плагины.
Возможности миксинов поддерживаются при разработке компонентов.
Отличия:
React опирается на Virtual DOM, а Vue.js использует шаблоны DOM. Виртуальный DOM, используемый React, будет выполнять грязные проверки результатов рендеринга.
Vue.js предоставляет инструкции, фильтры и т. д. в шаблонах, которые позволяют очень удобно и быстро управлять DOM.
Выше приведено подробное содержание трех основных фреймворков веб-интерфейса. Для получения дополнительной информации обратите внимание на другие соответствующие статьи на этом сайте!