Introduction
正如jQuery所宣称的一样,Write Less, Do More。很多时候我们喜欢用它来解决问题。但增加一个库必然意味着更大的网络负担,意味着更高的页面初始载入时间。并且,现在与当初已经有了很大不同,jQuery是伴随着IE6出来的,当时,jQuery在跨浏览器开发上有不可替代的作用。但今天,伴随ES5的广泛被支持以及各个浏览器本身的完善,我们可以考虑适当的丢掉它,改善性能。
需要注意的是,并不是说jQuery是不可取的,在某些场合,用它是更合适的,需要我们自己判断。
Listening for Document Ready
我们经常用到$( document ).ready()
或者它的简写 $()
,用来传入当所有dom准备完毕后,执行逻辑的相关回调。原生js可以这么写:
var snakes = document.querySelector('#snakes'),
birds = document.querySelector('#birds');
snakes.addEventListener('click', function (e) {
console.log("Children: ");
var children = e.target.children;
for (var i = 0; i < children.length; i++) {
console.log(children[i].textContent);
}
});
birds.addEventListener('click', function (e) {
// 获取最近的兄弟节点
var previous = e.target.previousElementSibling;
if (previous) {
console.log("Previous sibling: " + previous.textContent);
}
var next = e.target.nextElementSibling;
if (next) {
console.log("Next sibling: " + next.textContent);
}
//所有的兄弟们
Array.prototype.filter.call(e.target.parentNode.children, function (child) {
if (child !== e.target) {
console.log(child.textContent);
}
});
});
Selecting elements
我们常常依赖于jQuery的选择器,而现在,所有的浏览器基本都支持了querySelector
与 querySelectorAll
,这里是MDN链接
var snakes = document.querySelector('#snakes'),
birds = document.querySelector('#birds');
snakes.addEventListener('click', function (e) {
console.log("Children: ");
var children = e.target.children;
for (var i = 0; i < children.length; i++) {
console.log(children[i].textContent);
}
});
birds.addEventListener('click', function (e) {
// 获取最近的兄弟节点
var previous = e.target.previousElementSibling;
if (previous) {
console.log("Previous sibling: " + previous.textContent);
}
var next = e.target.nextElementSibling;
if (next) {
console.log("Next sibling: " + next.textContent);
}
//所有的兄弟们
Array.prototype.filter.call(e.target.parentNode.children, function (child) {
if (child !== e.target) {
console.log(child.textContent);
}
});
});
Attaching and removing event listeners
侦听事件是web开发中再重要不过的一环。曾经IE独树一帜,与其它浏览器提供的API不一致,导致需要用jQuery来快速开发,现在,所有的浏览器都提供了addEventListener:
var snakes = document.querySelector('#snakes'),
birds = document.querySelector('#birds');
snakes.addEventListener('click', function (e) {
console.log("Children: ");
var children = e.target.children;
for (var i = 0; i < children.length; i++) {
console.log(children[i].textContent);
}
});
birds.addEventListener('click', function (e) {
// 获取最近的兄弟节点
var previous = e.target.previousElementSibling;
if (previous) {
console.log("Previous sibling: " + previous.textContent);
}
var next = e.target.nextElementSibling;
if (next) {
console.log("Next sibling: " + next.textContent);
}
//所有的兄弟们
Array.prototype.filter.call(e.target.parentNode.children, function (child) {
if (child !== e.target) {
console.log(child.textContent);
}
});
});
Manipulating classes and attributes
曾经,不使用jQuery来处理class是一件很麻烦的事情,而现在,由于classList的存在(这里是MDB链接)我们可以快捷的解决这一类问题,另外,如果需要操作attribute,可以使用setAttribute(同样是MDN链接)
var snakes = document.querySelector('#snakes'),
birds = document.querySelector('#birds');
snakes.addEventListener('click', function (e) {
console.log("Children: ");
var children = e.target.children;
for (var i = 0; i < children.length; i++) {
console.log(children[i].textContent);
}
});
birds.addEventListener('click', function (e) {
// 获取最近的兄弟节点
var previous = e.target.previousElementSibling;
if (previous) {
console.log("Previous sibling: " + previous.textContent);
}
var next = e.target.nextElementSibling;
if (next) {
console.log("Next sibling: " + next.textContent);
}
//所有的兄弟们
Array.prototype.filter.call(e.target.parentNode.children, function (child) {
if (child !== e.target) {
console.log(child.textContent);
}
});
});
Getting and setting element content
jQuery提供了text() html()用以操作元素的内容,我们可以使用原生的textContent与innerHTML属性代替它们。
var snakes = document.querySelector('#snakes'),
birds = document.querySelector('#birds');
snakes.addEventListener('click', function (e) {
console.log("Children: ");
var children = e.target.children;
for (var i = 0; i < children.length; i++) {
console.log(children[i].textContent);
}
});
birds.addEventListener('click', function (e) {
// 获取最近的兄弟节点
var previous = e.target.previousElementSibling;
if (previous) {
console.log("Previous sibling: " + previous.textContent);
}
var next = e.target.nextElementSibling;
if (next) {
console.log("Next sibling: " + next.textContent);
}
//所有的兄弟们
Array.prototype.filter.call(e.target.parentNode.children, function (child) {
if (child !== e.target) {
console.log(child.textContent);
}
});
});
Inserting and removing elements
原生的js可以这样添加与删除元素:
var snakes = document.querySelector('#snakes'),
birds = document.querySelector('#birds');
snakes.addEventListener('click', function (e) {
console.log("Children: ");
var children = e.target.children;
for (var i = 0; i < children.length; i++) {
console.log(children[i].textContent);
}
});
birds.addEventListener('click', function (e) {
// 获取最近的兄弟节点
var previous = e.target.previousElementSibling;
if (previous) {
console.log("Previous sibling: " + previous.textContent);
}
var next = e.target.nextElementSibling;
if (next) {
console.log("Next sibling: " + next.textContent);
}
//所有的兄弟们
Array.prototype.filter.call(e.target.parentNode.children, function (child) {
if (child !== e.target) {
console.log(child.textContent);
}
});
});
Walking the DOM tree
原生的js也可以遍历DOM树
var snakes = document.querySelector('#snakes'),
birds = document.querySelector('#birds');
snakes.addEventListener('click', function (e) {
console.log("Children: ");
var children = e.target.children;
for (var i = 0; i < children.length; i++) {
console.log(children[i].textContent);
}
});
birds.addEventListener('click', function (e) {
// 获取最近的兄弟节点
var previous = e.target.previousElementSibling;
if (previous) {
console.log("Previous sibling: " + previous.textContent);
}
var next = e.target.nextElementSibling;
if (next) {
console.log("Next sibling: " + next.textContent);
}
//所有的兄弟们
Array.prototype.filter.call(e.target.parentNode.children, function (child) {
if (child !== e.target) {
console.log(child.textContent);
}
});
});
Looping over arrays
jQuery提供的 each与map已经可以被ES5的forEach与map替代
var snakes = document.querySelector('#snakes'),
birds = document.querySelector('#birds');
snakes.addEventListener('click', function (e) {
console.log("Children: ");
var children = e.target.children;
for (var i = 0; i < children.length; i++) {
console.log(children[i].textContent);
}
});
birds.addEventListener('click', function (e) {
// 获取最近的兄弟节点
var previous = e.target.previousElementSibling;
if (previous) {
console.log("Previous sibling: " + previous.textContent);
}
var next = e.target.nextElementSibling;
if (next) {
console.log("Next sibling: " + next.textContent);
}
//所有的兄弟们
Array.prototype.filter.call(e.target.parentNode.children, function (child) {
if (child !== e.target) {
console.log(child.textContent);
}
});
});
Animations
jQuery的动画效果是非常强大的,在很多场合还是很难替代的,不过,由于CSS3,动画可以转到由CSS来实现。这部分就不给DEMO了。
AJAX
如果唯一使用jQuery的唯一理由,是它便捷的AJAX,那么,将jQuery替换成一个轻量的多的库吧!比如reqwest,这个库压缩后不到10kB。
总结
尽全力使脚本变的更小,可以使用户获得更高的加载速度,以及更好的用户体验。但也要谨慎的做取舍,没必要大量的造jQuery已经提供的轮子。
除了在编码方面带来性能优化,我们还可以借助工具达到同样的效果。可以看一看博主的webpack方面的文章 :)