Привет друзья, если вы считаете, что эта статья неплохая, не забудьте поставить лайк или звездочку.Ваши лайки и звездочки - это мотивация для меня писать больше и богаче статей!Адрес GitHub

【2019-08-16】Привет друзья, потому чтоjsliangБиблиотека документации подверглась рефакторингу, некоторые ссылки на эту статью могут быть битыми, иjsliangУ меня нет сил поддерживать старые статьи на стороне Nuggets, извините за это. Для тех, кому нужно получать последние статьи, щелкните адрес GitHub выше и перейдите в библиотеку документов, чтобы просмотреть скорректированные статьи.

Ознакомьтесь с большим количеством информации в Интернете и объедините свой реальный опыт разработки, чтобы поделиться передовой технологией.

каталог

Чем отличается передок без закидывания от соленой рыбы?

содержание
каталог
2 Предисловие
Три истории развития
3.1 Примитивное общество
3.2 Каменный век
3.3 Железный век
3.4 Индустриальный век
Четырех технических сравнения
4.1 JSP и jQuery
4.2 jQuery и Vue
4.3 Vue и апплет
Резюме пяти размышлений

2 Предисловие

Вдекабрь 2018 г.Небольшой обмен технологиями переднего плана, включая, помимо прочего: историю разработки веб-интерфейса, сравнение JQuery и Vue, сравнение Vue/React/Angular, совместное использование и обобщение опыта разработки переднего плана и т. д.

использованная литература:

История разработки фронтенда | Блог Парк - почка
История разработки интерфейса |
История и тенденции фронтального развития | CSDN - красная фасоль Хейл
Основы фронтенда | Baidu Front-end Technology College - Лю Вэньчао
Что такое JSP, JavaScript, jQuery, jQuery Easy UI, Ajax, JSON?
Краткое изложение общих функциональных точек jquery и jsp | CSDN - toMatser
Сравнение jquery и vue | Блог Garden - Green Tea/
Анализ различий и сравнение апплета Vue и WeChat |
Как быстро выбрать подходящий фреймворк в vue, angular, react | CSDN — Mammoth
Vue.js подходит для разработки больших сайтов? | Baidu пост бар - пьяная красная пыль
Где будущее фронтенд-инженеров? Официальный аккаунт WeChat — технология Alibaba

Участие в оказании помощи:

Шэньчжэньский университет - Чен Цзянгуан
Ханчжоу Dianjia Technology Smart Finance Line - Джин Цзуннан

Три истории развития

С помощью бронзы в качестве зеркала можно поправить одежду;
Возьмите древнее как зеркало, вы можете знать взлет и падение;
Взгляните на людей как на зеркало, вы сможете понять приобретения и потери.

Знание истории технологии может помочь нам лучше понять динамику отрасли.

3.1 Первобытное общество

Давным-давно, вjsliangЗа год до его рождения, в 1994 году, Netscape Communications выпустила свой первый браузер: NCSAMosaic, но он был доступен лишь немногим счастливчикам.

Его первоначальная роль заключается в том, чтобы облегчить ученым чтение документов и передачу статей. Поэтому до сегодняшнего дня, когда люди, изучающие интерфейс, соприкасаются с HTML, они будут помнить, что в его первом предложении есть слово:Document.
Интернет в это время, несомненно, находился на начальной стадии цивилизации в первобытном обществе.

Ваша пунктуация изменилась? OK, браузер загрузил новую страницу;
Вы отправили форму? OK, браузер долго ждет с белым экраном и, наконец, возвращает вам «ошибку имени пользователя»;
Ваш веб-сайт электронной коммерции содержит тысячи видов товаров? Хорошо, тогда ты напишешь тысячу страниц...

В настоящее время в Интернете его разработчиков собирательно называют программистами. Поскольку фронтенд и бэкенд разработки интегрированы, код фронтенда является частью кода бэкэнда: бэкэнд получает запрос браузера ---> отправляет статическую страницу ---> отправляет ее в браузер.

3.2 Каменный век

В том же году (1994) появился РНР, с формой встраивания данных в HTML, а значит появилась интернет-индустрия, чтобы разводить огонь и дальше развиваться в сторону каменного века.

В интернете в это время появились шаблоны вложения данных, а шаблоны непосредственно написали режим разработки стиля, например режим MVC:

Модель (слой модели): предоставить/сохранить данные.
Контроллер (уровень управления): обработка данных, реализация бизнес-логики.
Просмотр (слой просмотра): отображение данных и предоставление пользовательского интерфейса.

В это время фронтенд — это просто V в бэкенде MVC, поэтому так называемый «фронтенд-инженер» в то время не имел соответствующего понятия, и фронтенд-разработчики любили называть себя « резцы».
Позже, поскольку серверная часть была слишком занята, чтобы написать стиль страницы, чтобы она выглядела лучше, поэтому после того, как внешний интерфейс написал шаблон страницы, пусть внутренний код прочитает шаблон, заменит переменные и отобразит страницу.

PHP-фреймворк Laravel с примером:

Пользователь отправляет запрос
Контроллер Laravel, соответствующий различным запросам в соответствии с маршрутом
Контроллер взаимодействует с моделью
Страница результатов вызова диспетчера
Отрисовка страницы в браузере пользователя

Фрагмент встроенного HTML-кода PHP:

<html>
  <head><title>Car {{ $car->id }}</title></head>
  <body>
    <h1>Car {{ $car->id }}</h1>
    <ul>
      <li style="color:red">>Make: {{ $car->make }}</li>
      <li style="color:blue">Model: {{ $car->model }}</li>
      <li style="color:yellow">Produced on: {{ $car->produced_on }}</li>
    </ul>
  </body>
</html>

3.3 Железный век

В 1995 году Netscape запустила JavaScript, который стал прототипом внешнего интерфейса:HTML — это скелет, CSS — внешний вид, а JavaScript — взаимодействие..
Примерно в 1998 году Ajax (асинхронный Javascript и XML: асинхронный JavaScript и XML) был относительно применен и после этого постепенно использовался на различных страницах, тем самым продвигая Интернет от статических веб-страниц версии 1.0, отображая чистый контент до модели Веб 2.0. :

Эпоха Web 2.0: динамические веб-страницы, многофункциональное взаимодействие, интерфейсная обработка данных

В популярности Ajax стоит отметить три вещи:

2004: Gmail
2005: Карты Google
2006: Ajax официально признан W3C стандартом.

На данный момент фронтенд больше не является шаблоном для бэкенда, он может получать различные данные самостоятельно. По сравнению с эпохой Web 1.0, Web 2.0 перешел из каменного века в железный век!

В эпоху Web 2.0, в 2006 году, появился jQuery для манипулирования DOM, и он быстро захватил мир. Большое количество плагинов на основе jQuery образуют огромную экосистему, тем самым укрепляя позицию jQuery как первого брата библиотеки JS.
Влияние jQuery давно. Даже сегодня все еще будут фронтенд-инжиниринговые проекты, использующие jQuery, jQuery + gulp и т. д. Без него только удобство.

3.4 Индустриальный век

С наступлением информационного века и эпохи больших данных отражаются недостатки jQuery в большом количестве операций с данными.При выполнении большого количества операций над DOM это вызовет такие проблемы, как медленная загрузка страниц. В это время некоторые фронтенд-разработчики постепенно чувствуют себя бессильными...

В 2008 году был выпущен движок Google V8, положивший конец эре Microsoft IE.
В 2009 году родился AngularJS и Node.
Реакт родился в 2011 году.
2014 Родился Vue.js.

Если мы скажем, что появление паттернов MVVM, таких как Angular, React, Vue, и интерфейсная инженерная конструкция Webpack ускорили развитие фронтенд-инжиниринга, управляемого данными. Затем рождение Node, среды выполнения JavaScript на стороне сервера, основанной на движке V8, сравнимо с вкладом Ajax во внешний интерфейс.

Node стал вторым скачком вперед во фронтенде, а также дал JS место в серверных языках.

Сегодня становится все более очевидным, что серверная часть отвечает за данные, а клиентская часть — за все остальное. Для связи между ними требуется только, чтобы серверная часть открывала интерфейс RESTful, а внешняя часть — для связи с серверной частью через протокол HTTP через Ajax:

В эту индустриальную эпоху фронтенда Vue, React и Angular являются тремя основными фреймворками, которые идут рука об руку. Хотя и другие фреймворки выпускаются один за другим, им не ускользнуть из когтей этих трех фреймворков. Для UI-фреймворков этих трех фреймворков также появилось множество технологий, таких как Electron и NW.js для настольных компьютеров, React Native и Weex для мобильных устройств.

В то же время нельзя недооценивать развитие мобильного терминала:

Первый iPhone был выпущен в 2007 году.
Первый телефон Android был выпущен в 2008 году.
......
Выпущен iPhone Xs Max 2018 года.

Хотя первоначальное приложение для мобильного телефона основано на локальной системе мобильного телефона, такой как IOS, Android, WP, и использует собственную программу для написания сторонних приложений — мир Native App. Однако с развитием таких технологий, как апплет React Native и WeChat, а также с постоянным улучшением скорости сети, собственное приложение постепенно заменяется веб-приложением.

Сегодня диверсифицированные интерфейсные фреймворки превратили эту отрасль в уникальную индустриальную эпоху, когда многие технологии конкурируют с сотней цветов и сотней школ мысли.

Четыре технических сравнения

Нет лучшего фреймворка, есть только наиболее подходящие сценарии применения.
Прежде чем передняя часть разработки началась, мы должны провести анализ и сравнение различных передних технологий, чтобы лучше программировать и развиваться более плавно.

4.1 JSP и jQuery

С точки зрения технологии JSP и jQuery совершенно разные. но,jsliangЛично я чувствую, что могу провести краткое сравнение между JSP и jQuery с точки зрения формы встроенного HTML и формы разделения интерфейса и сервера. Сравнение здесь только потому, что JSP и jQuery задействованы в работе одновременно, если это не так, прошу меня поправить.

Изучение записей о JSP и jQuery:

Java Server Pages
jQuery

Что такое JSP?
JSP означает Java Server Page, динамическую технологию для корпоративных приложений Java. Java и JSP выполняются на стороне сервера, то есть результат их двух операций генерирует HTML, HTML — это статическая страница, а JSP — динамическая страница.

Что такое jQuery?
jQuery — это легкая библиотека JavaScript. jQuery может разделять HTML-страницу пользователя и содержимое JS, то есть использование jQuery более способствует разделению HTML, CSS и JavaScript, чтобы можно было лучше поддерживать внешний код.

Теперь сравните код JSP и jQuery для той же функциональности:

<ul>  
  <c:forEach items="${list}">  
    <li>${user.userName}</li>
  </c:forEach>
</ul>

<!-- HTML 内容填充 -->

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
  
  $(function() {
    // 通过 ajax 从 Java 接口获取数据
    var data;
    $.ajax({
      // ...请求地址、请求头及传参等
      success: function(res){
        data = res.data;

        // 拼接字符串，并渲染页面
        var html = '';
        $.each(data, function(index, item) {
          var html='<li>' + item.userName + '</li>';
          html += html;
        })
        html = '<ul>' + html + '</ul>';
      }
    })
  })
</script>

На первый взгляд вы подумаете: «Ах, JSP — это так просто, используйте JSP!»
Да, несколько строк кода JSP могут решить то, что jQuery может сделать с дюжиной строк кода, и он работает быстрее, чем jQuery, почему бы не использовать его постоянно?
В плане развития проекта. Когда компания только зарождается, когда первоначальная структура проекта несложная, понятно использовать JSP, потому что это быстро, удобно и позволяет сэкономить рабочую силу (фронт и бэкенд можно написать на Java).
Однако в случае все более и более сложных и крупных проектов Java больше не может поддерживаться, предприятия должны постоянно увеличивать количество разработчиков Java, а персонал Java также по уши в техническом долгу...

Однако точно так же, как не всем, кто любит заниматься спортом, нравится бегать, не всем Java, которые манипулируют данными, нравится писать страницы.В настоящее время выделяется несколько проблем:

Проект становится все больше и больше, модулей становится все больше, и нужно вкладывать все больше и больше рабочей силы. И эти Java-разработчики должны любить манипулировать данными и писать страницы, иначе бизнес столкнется с проблемой частой текучести кадров.
Пользователи начинают предъявлять более высокие требования к операциям с интерфейсом, и необходимо добавлять больше взаимодействий JavaScript и специальных эффектов, что фактически увеличивает нагрузку на Java-разработчиков.
Когда сотрудник увольняется, время для следующего сотрудника, который возьмет на себя ознакомительный проект, будет постепенно увеличиваться с 1 дня до 1 недели или даже 1 месяца. Потому что он не только должен быть знаком с рабочей частью данных, но также должен поддерживать взаимодействие со страницей JavaScript. А за это время работа уволившегося сотрудника будет давить на других Java-разработчиков.

Подводя итог, в это время предприятия должны учитывать, могут ли они помочь разработчикам Java снизить бремя и лучше поддерживать проекты развития.
В то же время JavaScript становится все более и более мощным с течением времени. Поэтому под действием многих факторов происходит разделение переднего и заднего концов:

Внутренний персонал предоставляет интерфейс, а внешний персонал использует интерфейс вызовов Ajax, инкапсулированный в jQuery, для получения данных и их отображения на странице.

4.2 jQuery и Vue

В приведенном выше сравнении JSP и jQuery мы обнаружим проблему, состоящую в том, что jQuery требует слишком много шагов для обработки данных. Кроме того, часто манипулируйте DOM. В случае относительно большого объема данных это также приведет к замедлению работы страницы.
В это время была предложена концепция MV*, такая как MVVM:

Короче говоря, это режим MV*, который улучшает работу с данными. В фреймворках MV*, таких как Vue, React, Angular и т. д., рендеринг данных страницы можно выполнить, манипулируя данными. Здесь мы выбираем простой, быстрый, компактный и мощный Vue для сравнения с jQuery.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>jQuery 代码演示</title>
</head>

<body>
  <div id="app">
    <ul id="list">
      <li>第1条数据</li>
      <li>第2条数据</li>
    </ul>
    <button id="add">添加数据</button>
  </div>

  <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {  
      var i = 2;
      $('#add').click(function() { 
        i++; 
        //通过 DOM 操作在最后一个li元素后手动添加一个标签
        $("#list").children("li").last().append("<li>第" + i + "条数据</li>");
      });  
    }); 
  </script>
</body>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Vue 代码演示</title>
</head>

<body>
  <div id="app">
    <ul>
      <!--根据数组数据自动渲染页面-->
      <li v-for="item in message">{{item}}</li>
    </ul>
    <button @click="add">添加数据</button>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: "#app",
      data: {
        message: ["第1条数据", "第2条数据"],
        i: 2
      },
      methods:{
        //向数组添加一条数据即可
        add:function(){
          this.i++;
          this.message.push("第" + this.i + "条数据");
        }
      }
    })
  </script>
</body>

</html>

В приведенном выше примере проводится простое сравнение и различие между ними. Хотя это всего лишь простое описание, на практике Vue может решать гораздо более сложные задачи, чем перечисленные выше.
Однако, сравнение jQuery с Vue, является ли оно защитой Vue, и рекомендуется ли полностью отказаться от jQuery? Не совсем.

Vue подходит для сценариев: фоновые страницы для сложных операций с данными, страницы заполнения форм.
Сценарии, в которых применим jQuery: например, некоторые страницы с анимацией HTML5, некоторые страницы, которым требуется JavaScript для управления стилями страниц.

как раз и есть предложение: «Нет лучшего фреймворка, есть только более подходящие приложения».
Мы должны выбирать различные технологии в соответствии с потребностями проекта. Как и на странице H5 официального аккаунта,jsliangЯ очень люблю использовать jQuery, потому что он прост и груб в работе, а также хорош в написании анимационных эффектов, а при разработке презентаций отчетов с помощью Echarts я предпочитаю использовать Vue, потому что им легко управлять серверная часть Манипуляции с большими объемами возвращаемых данных.

4.3 Vue и апплет

Открытие темы;Если вы глубоко изучили разработку Vue, вы не будете так уж плохи в разработке апплета WeChat, React, Angular и других фреймворков..

Почему ты это сказал? Потому что это современные интерфейсные фреймворки, основанные на шаблоне MV*. Возьмем несколько простых различий между апплетами Vue и WeChat:

Жизненный цикл/функция ловушки отличается, функция ловушки апплета WeChat намного проще.
Что касается данных запроса, Vue будетcreatedилиmountedзапрашивать данные в апплете WeChat, а апплет WeChatonLoadа такжеonSowданные запроса.
так далее……

Часто нам кажется, что они одинаковы во многих местах.
Поэтому для интерфейсных фреймворков режима MV*, таких как Vue, React, Angular, апплет WeChat и т. д., если нам нужно их различать и сравнивать, мы должны анализировать их с точки зрения сценариев использования фреймворка, технические возможности команды, преимущества и недостатки фреймворка и экосистемы, и различать их применимые сценарии:

Vue: Легко учиться, гибкий и легкий. По сравнению с реагированием и угловым углом, его стоимость обучения низкая, подходит для быстрого начала, а кривая обучения относительно плоская.
React: Гибкость очень высокая, экотрус мощный. По сравнению с Vue React более интегрирован в операции с данными, по сравнению с Angular его стоимость обучения ниже.
Angular: Полная каркасная система. По сравнению с React и Vue это зрелый и законченный фреймворк.
Апплет WeChat: Простой и легкий. По сравнению с Vue он более удобен, а апплет WeChat имеет ограничение на размер кода для загрузки, что делает апплет WeChat действительно «маленьким». Кроме того, апплет WeChat в сочетании с WeChat предоставляет множество API для использования разработчиками.

Поэтому до разработки проекта фронтенд-команда может обсудить области, задействованные в проекте:

Если вы хотите быстро разработать небольшое приложение с низкими затратами, рассмотрите Vue.
Если вы хотите разработать большое приложение, подумайте об Angular.
Если вы хотите разработать кроссплатформенное приложение, подумайте о React.

Абсолюта нет, здесь только мое мнение, фактический выбор технологии должен сочетаться с мнением команды, чтобы найти наиболее подходящую технологию для проекта.

Резюме пяти размышлений

Нет лучшего фреймворка, есть только наиболее подходящие сценарии применения.

Я надеюсь, что при столкновении с различными проектами небольшие партнеры смогут выбрать наиболее подходящую структуру, тем самым снизив рабочую нагрузку и сложность разработки.

Напоследок поговорим о дальнейшем развитии фронтенда и будущем фронтенд карьеры:

Передняя часть будет продолжать отличаться. Например, те, кому нравится CSS-графика, узнают больше о пользовательском интерфейсе, CSS 3D и т. д. и сделают более крутые макеты; те, кому нравится JavaScript, узнают больше о манипулировании данными и реализуют более сложный бизнес и более интересный пользовательский опыт.
Передний конец будет продолжать сходиться. Например, Vue, React и Angular объединились, чтобы добиться унификации и положить конец ситуации из трех частей.
Передняя часть будет богаче. Например, возможности ПК, мобильных устройств, iPad и т. д. богаче, а разные платформы реализуют разные функции.

Итак, воспользуйтесь возможностью, продолжайте бросать и создавайте лучший интерфейс!

Постскриптум: Привет друзья, если вы считаете, что статья неплохая, не забудьте поставить лайк или звездочку.Ваши лайки и звездочки - это мотивация для меня писать больше и насыщеннее статей!Адрес GitHub