Раньше я любил jQuery и, честно говоря, сначала изучил jQuery, а затем JavaScript. Так что, написав эту статью, я как бы предаю jQuery.
Я знаю, есть много статей о том, почему вам не следует использовать jQuery, но я просто хотел рассказать о своем собственном опыте.
Что бы вы использовали без jQuery?
С развитием паутины обратные волны реки Янцзы оттесняют передние волны, а передние волны замирают на берегу. Точно так же, как некоторые языки программирования, которые когда-то были блестящими, теперь ушли в прошлое. Я думаю, что jQuery не является исключением, и пришло время попрощаться с замечательным опытом программирования, который он когда-то давал нам.
Зачем отказываться от jQuery? Из-за Vue! Если вы читали мои предыдущие статьи, то должны были догадаться, что я фанат Vue.js. Vue.js предоставляет столько инструментов, что я осмелюсь сказать, что он намного удобнее, чем jQuery.
ДОМ и события
Давайте рассмотрим пример события клика.
Обратите внимание, что я пропустил часть инициализации фреймворка.
Vue SFC (не паникуйте, это означает одиночный файловый компонент):
<template>
<button @click="handleClick">点我，用力</button>
</template>
<script>
export default {
methods: {
handleClick() {
alert('老铁，你点击了按钮');
}
}
}
</script>
В jQuery это написано так:
<button id="myButton">点吧</button>
<script>
$('button#myButton').click({
alert('这次用 jQuery');
});
</script>
Вы можете подумать, что Vue.js — это больше кода, вы правы, но вы ошибаетесь! На самом деле Vue.js не содержит больше кода, кромеhandleClick() { ... }Внешняя часть — это просто структура фреймворка, которая используется совместно с другими моделями поведения. Я думаю, что Vue.js выглядит чище, а код более читаемым.
Возможно, у вас все еще есть вопрос, вы все еще используете Vue.js, 50 шагов, чтобы посмеяться над 100 шагами? Не используйте его, если у вас есть возможность! На самом деле вы можете сделать это полностью на простом JavaScript:
<button id="myButton">来点我呀</button>
<script>
document.getElementById('myButton').addEventListener('click', function() {
alert('来自原生js的问候');
});
</script>
Итак, вы видите, jQuery просто притворяется особенным, переводя код в простой JavaScript за нашей спиной.
Что касается выбора элементов DOM, то это легко сделать с помощью обычного JavaScript:
document.getElementById('myButton'); // jQuery => $('#myButton');
document.getElementsByClassName('a'); // jQuery => $('.a');
document.querySelectorAll('.parent .a'); // jQuery => $('.parent .a');
AJAX-запрос
Вероятно, наиболее часто используемым аспектом jQuery является AJAX.
Мы все знаем, что jQuery предоставляет$.ajax(), вы также можете использовать специальные$.post() а также $.get(). Эти API могут помочь вам отправлять запросы AJAX, получать результаты и многое другое.
Вы можете использовать два метода собственного JavaScript, то естьXMLHttpRequest а также fetch.
XMLHttpRequestЭто тоже старый антиквариат.fetchНе совсем то же самое.
fetchболее актуальный, чемXMLHttpRequestЧаще используется и основан на обещаниях.
fetchПо умолчанию файлы cookie не отправляются, и если код состояния HTTP возвращает код ошибки, например 404 или 500, он не будет отклонен, поэтому в основном.catch()не побежит, аresponse.okсталиfalse.
Я не буду их подробно сравнивать здесь.
Давайте еще посмотрим на два фрагмента кода.
Вот jQuery:
$.ajax({
method: "POST",
url: "http://localhost/api",
data: { name: "Adnan", country: "Iran" }
}).done(response => console.log(response))
.fail(() => console.log('error'));
Пример кода взят из официальной документации jQuery.
Вот добыча:
fetch(
'http://localhost/api',
{
method: 'POST'
body: { name: "Adnan", country: "Iran" }
}
).then(response => console.log(response));
Обе части кода делают одно и то же, ноfetchНе принадлежит ни одной библиотеке.
осторожность, fetchТакже можно комбинировать с async/await следующим образом:
async function getData() {
let response = await fetch('http://localhost/api' {
method: 'POST'
body: { name: "Adnan", country: "Iran" }
});
return response;
}
Тогда я использую его самfecth? На самом деле не потому, что я не очень доверяю ему по ряду причин. Поэтому я использую библиотеку под названием axios, которая также основана на обещаниях и очень надежна.
В приведенном выше коде используетсяaxiosНапишите это так:
axios({
method: 'POST',
url: 'http://localhost/api',
data: { name: "Adnan", country: "Iran" }
}).then(response => console.log(response))
.catch(err => console.log(err));
axiosТакже можно комбинировать с async/await:
async function getData() {
let response = await axios.post('http://localhost/api' {
name: "Adnan",
country: "Iran"
});
return response;
}
Суммировать
С тех пор я не использую jQuery, хотя раньше он мне нравился, когда первое, что я делал после инициализации проекта, — устанавливал jQuery.
Я считаю, что нам больше не нужен jQuery, потому что другие библиотеки и фреймворки на самом деле делают эту работу более удобно и лаконично, чем jQuery.
Вероятно, существует множество плагинов, основанных на jQuery, но в основном есть соответствующие замены компонентов Vue.js или React.js.
Как вы думаете? Добро пожаловать, чтобы оставить сообщение в области комментариев!
общаться с
Добро пожаловать, чтобы отсканировать код и подписаться на общедоступную учетную запись WeChat «Станция перевода 1024», чтобы предоставить вам больше технических сухих товаров.