Рубрики
Без рубрики

Vue.js легче учиться, чем jquery

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

Автор оригинала: Anthony Gore.

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

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

Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2016/10/31.

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

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

О, я знаю, что это много Breafer набрать $ («# ID»). Нажмите (функция (событие) {..}); Чем делать это с ванильными ся. Но вам все еще надо понять Те же вещи, которые нужно написать этот код: выбор узел DOM, обработка событий, обратные вызовы и т. Д.

jQuery проще, чтобы написать, если вы Уже Понимайте DOM API и JavaScript хорошо, но начинающим не проще.

Vue.js.

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

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

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

Реализация с jQuery

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

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

  1. Первое, что вы обычно вводите в сценарий jQuery – $ (документ). ready (Функция () {..}); Отказ В этих 30 – что-то символы вы подвергаетесь нападению на эти четыре жестких концепция: выбор узел DOM, обработка событий, процесс загрузки документа и обратных вызовов. Если вы не получите все эти вещи, то вы Не понять код, который вы только что написали.

  2. Доступ к бизнесу выбора элемента DOM для работы, вам понадобится конструктор jQuery $ («...») Отказ К сожалению, вы не можете точно указать, какие узлы вы получите, вместо этого вам нужно создать подходящий фильтр, используя селектор CSS3, подобный CSS3, и то, что вы на самом деле получаете, будет определен при запуске. Для этого нужен, вам нужно создать ментальную копию вашего дома и симулировать то, что произойдет, когда вы запускаете его фильтр. И, как каждый метод, который вы пишете, обновляете DOM, вы должны аналогично обновлять свой ментальный домо, и считаете, что ваши фильтры все еще будут работать как предназначено.

  3. Для некоторых позитивных новостей есть только один шаблон в jQuery: выберите что-то, а затем делать вещи для этого выбора с помощью метода от API. Проблема с этим шаблоном состоит в том, что у нас теперь есть плоский, одномерный API с более чем 100 методами, которые делают все от Ajax для итерации массивы. Невозможно сделать, чтобы многие имена методов достаточно разграничить как то, что они делают и что они возвращаются. Удачи новичкому пониманию, какие прикованные методы действительно делают.

Реализация с Vue.js.

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


  
{{ counter }}

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

  1. Не нужно беспокоиться о доме до DOM Ready Callback Hijinks, что сложность была инкапсулирована. Крючки жизненного цикла Vue позволят более утонченному контролю, если и когда он необходим.

  2. Очевидная ссылка производится между свойством данных счетчик и узел DOM, где он рендеринг. Не требуется никакого психического дома, вы можете увидеть его на странице и иметь уверенность в том, что обновление счетчика не собирается беспорядок с вашим домом в неожиданные способы из-за выбора узема WONKY.

  3. У нас нет неоднозначных методов API, чтобы посмотреть или запомнить. Различные функциональные возможности хорошо организованы и распределяются в объекте Vuu Constructor или применяются непосредственно к узлам DOM в шаблоне через директивы, придающие им более разные контексты.

Завернуть, TL; DR

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

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

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

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше

Читайте ещё по теме: