JQuery减轻心智负担,更容易阅读和理解代码
· 阅读需 2 分钟
JQuery减轻心智负担,更容易阅读和理解代码.
对很多开发者来说,jQuery的代码更容易阅读和理解。这里有几个原因:
-
jQuery语法更直观
$('.class')vsdocument.querySelector('.class')$(element).hide()vselement.style.display = 'none'
-
链式操作更优雅
// jQuery$('.element').hide().addClass('hidden').text('新内容');// 原生JSconst element = document.querySelector('.element');element.style.display = 'none';element.classList.add('hidden');element.textContent = '新内容';
jQuery 的选择器语法统一且直观,这种一致性确实能减轻心智负担:
// jQuery 选择器,直观清晰
$('.announcement-bar') // 类
$('#header') // ID
$('div') // 标签
$('[data-type="news"]') // 属性
$('ul li:first') // 第一个li
$('p:contains("Hello")') // 包含文本的p标签
// 原生 JavaScript 要记很多不同的方法
document.querySelector('.announcement-bar')
document.getElementById('header')
document.getElementsByTagName('div')
document.querySelector('[data-type="news"]')
document.querySelector('ul li:first-child')
// 包含文本还得自己写判断...
jQuery 的选择器语法统一且直观,这种一致性确实能减轻心智负担:
- 都是
$()开头 - 里面写啥选择器都行
- 不用记那么多不同的方法名
- 选到了就能用,选不到也不会报错
这就是为什么即便在现代前端开发中,很多人仍然喜欢用 jQuery 的原因之一 - 它让代码更易写易读!