Статьи

Vue.js легче узнать, чем jQuery

Октябрь 24, 2017

jQuery обычно предлагается в качестве хорошей отправной точки для начинающих веб-разработчиков. Многие изучают jQuery еще до того, как начали изучать ванильный JavaScript.

Почему? Отчасти это связано с популярностью jQuery, но в основном из-за ошибочной веры, которую имеют более опытные разработчики: поскольку jQuery прост для них, он также прост для начинающих.

JQuery предлагает краткость, а не упрощение

JQuery определенно избавляет от горя старых проблем с браузером. Но в остальном, это не так уж много для инкапсуляции сложности DOM API или JavaScript.

О, я знаю, что печатать гораздо проще,$(‘#id’).click(function(event) {..}); чем делать это с ванильным JS. Но для написания этого кода вам все равно нужно понимать то же самое: выбор узла DOM, обработку событий, обратные вызовы и так далее.

jQuery проще написать, если вы уже хорошо понимаете API DOM и JavaScript, но для новичков это не так просто.

Vue.js

Vue.js — горячая новая структура недели. Но это не без оснований. Я бы сказал, что из многих его сильных сторон простота обучения — номер один. Простота встроена в его дизайн.

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

Итак, давайте создадим действительно простое приложение с jQuery и Vue.js и посмотрим, что из этого выйдет на свет. Это приложение будет подсчитывать количество нажатий кнопки и отображать это число на экране.

Реализация с помощью jQuery

Вот типичная реализация с jQuery:

<div id="output"></div>
<button id="increment">Increment</button>
<script>
  var counter = 0;
  $(document).ready(function() {
    var $output = $('#output');  
    $('#increment').click(function() {
      counter++;
      $output.html(counter);
    });
    $output.html(counter);
  });
</script>

Это выглядит просто, но учтите, что это только потому, что вы просматриваете его глазами опытного разработчика Понять, что делает этот код, на самом деле довольно сложно. Рассматривать:

  1. Первое , что вы обычно набираете JQuery сценария $(document).ready(function() { .. });. В этих 30 с чем-то символах вас атакуют четыре жесткие концепции: выбор узла DOM, обработка событий, процесс загрузки документа и обратные вызовы. Если вы не получаете все эти вещи, то вы не понимаете код, который вы только что написали.
  2. Чтобы приступить к выбору элемента DOM для работы, вам понадобится конструктор jQuery $('...'). К сожалению, вы не можете точно указать, какие узлы вы получите, вместо этого вам нужно создать соответствующий фильтр с помощью CSS3-подобного селектора, и то, что вы фактически получите, будет определено при его запуске. Чтобы сделать это хорошо, вам нужно будет создать мысленную копию вашего DOM и смоделировать, что произойдет, если вы запустите свой фильтр против него. И так как каждый метод, который вы пишете, обновляет DOM, вы должны аналогичным образом обновлять вашу интеллектуальную DOM и рассматривать, будут ли ваши фильтры работать должным образом.
  3. Для некоторых положительных новостей в jQuery есть только один шаблон: выберите что-то, а затем сделайте что-то для этого выбора с помощью метода из API. Проблема с этим шаблоном состоит в том, что теперь у нас есть плоский одномерный API с более чем 100 методами, которые делают все от AJAX до итерации массива. Невозможно сделать столько имен методов достаточно описательными, чтобы различать, что они делают, и что они возвращают. Удачи новичку, понимающему, что действительно делают цепные методы.

Реализация с помощью Vue.js

Вот типичная реализация с Vue.js:

<div id="app">
  <div>{{ counter }}</div>
  <button v-on:click="increment">Increment</button>
</div>
<script>
  new Vue({
    el: '#app',
    data: {
      counter: 0
    },
    methods: {
      increment() { 
        this.counter++;
      }
    }
  });
</script>

Vue позаботился о многих болевых точках, поднятых выше о jQuery:

  1. Не нужно беспокоиться о готовых обратных вызовах DOM, эта сложность заключена в капсулу. Хуки жизненного цикла Vue обеспечат более совершенный контроль, если и когда это необходимо.
  2. Очевидная связь установлена ​​между свойством data counterи DOM-узлом, где он рендерится. Нет необходимости в умственном DOM, вы можете увидеть его на странице и быть уверенным, что обновление счетчика не приведет к неожиданным путям с вашим DOM из-за неправильного выбора узла.
  3. У нас нет двусмысленных API-методов для поиска или запоминания. Различные функциональные возможности хорошо организованы и стратифицированы в объекте конструктора Vue или применяются непосредственно к узлам DOM в шаблоне с помощью директив, что дает им больше контекста для понимания.

Завершение

jQuery проще, только если вы уже понимаете JavaScript и DOM API. Это не так для начинающих. JQuery не проще, просто сокращенно.

Vue, с другой стороны, имеет простоту, встроенную в его дизайн. Многие сложные части DOM API были хорошо инкапсулированы. Новички смогут писать код, который они на самом деле понимают, и когда им нужно будет делать более сложные вещи, он будет им доступен.

Поэтому в следующий раз, когда кто-то спросит вас, чему он должен научиться как начинающему веб-разработчику, возможно, jQuery — это не главное.

34
Share: