JavaScript就在这里随时等候你的召唤,但是也许你还没有准备好如何使用他。为什么不用jQuery呢?因为他很慢并且你的网站真的不需要这些多余的负担。
我不是来这里争辩原生API和函数库的迥异,开发的时候很难不用到这些神奇的东东。但是我想讨论的是:如果仅为使用个选择器($)或者类似的东西,是否真的有必要加载jQuery。
假设咱不是为了简化,每个人用jSomething是因为它支持IE,动画处理和选择器函数。
原生等价物
选择元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
// jQuery
var
els = $(
'.el'
);
// Native
var
els = document.querySelectorAll(
'.el'
);
// Shorthand
var
$ =
function
(el) {
return
document.querySelectorAll(el);
}
var
els = $(
'.el'
);
// Or use regex-based micro-selector lib
// http://jsperf.com/micro-selector-libraries
|
创建元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// jQuery
var
newEl = $(
'<div/>'
);
// Native
var
newEl = document.createElement(
'div'
);
Add event listener
// jQuery
$(
'.el'
).on(
'event'
,
function
() {
});
// Native
[].forEach.call(document.querySelectorAll(
'.el'
),
function
(el) {
el.addEventListener(
'event'
,
function
() {
},
false
);
});
|
Set/get属性
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
// jQuery
$(
'.el'
).filter(
':first'
).attr(
'key'
,
'value'
);
$(
'.el'
).filter(
':first'
).attr(
'key'
);
// Native
document.querySelector(
'.el'
).setAttribute(
'key'
,
'value'
);
document.querySelector(
'.el'
).getAttribute(
'key'
);
Add/remove/toggle class
// jQuery
$(
'.el'
).addClass(
'class'
);
$(
'.el'
).removeClass(
'class'
);
$(
'.el'
).toggleClass(
'class'
);
// Native
document.querySelector(
'.el'
).classList.add(
'class'
);
document.querySelector(
'.el'
).classList.remove(
'class'
);
document.querySelector(
'.el'
).classList.toggle(
'class'
);
|
附加
1
2
3
4
5
|
// jQuery
$(
'.el'
).append($(
'<div/>'
));
// Native
document.querySelector(
'.el'
).appendChild(document.createElement(
'div'
));
|
克隆
1
2
3
4
5
|
// jQuery
var
clonedEl = $(
'.el'
).clone();
// Native
var
clonedEl = document.querySelector(
'.el'
).cloneNode(
true
);
|
移除
1
2
3
4
5
6
7
8
9
10
11
|
// jQuery
$(
'.el'
).remove();
// Native
remove(
'.el'
);
function
remove(el) {
var
toRemove = document.querySelector(el);
toRemove.parentNode.removeChild(toRemove);
}
|
父元素
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
// jQuery
$(
'.el'
).parent();
// Native
document.querySelector(
'.el'
).parentNode;
Prev/next element
// jQuery
$(
'.el'
).prev();
$(
'.el'
).next();
// Native
document.querySelector(
'.el'
).previousElementSibling;
document.querySelector(
'.el'
).nextElementSibling;
XHR aka AJAX
// jQuery
$.get(
'url'
,
function
(data) {
});
$.post(
'url'
, {data: data},
function
(data) {
});
// Native
// get
var
xhr =
new
XMLHttpRequest();
xhr.open(
'GET'
, url);
xhr.onreadystatechange =
function
(data) {
}
xhr.send();
// post
var
xhr =
new
XMLHttpRequest()
xhr.open(
'POST'
, url);
xhr.onreadystatechange =
function
(data) {
}
xhr.send({data: data});
|
这些只是很少的一部分,你可以使用浏览器的console来发现更多的原生的东西或者读读MDN’s JS API reference or WPD’s DOM docs
当然你也可以使用库,看这里-轻量级库可以找到一些应对特定任务的库,但首先要确保如果不用这个库你就不能完成任务,否则-使用native JavaScript.
原文链接: romanliutikov 翻译: 伯乐在线 - 蔡蔡
译文链接: http://blog.jobbole.com/52195/
[ 转载必须在正文中标注并保留原文链接、译文链接和译者等信息。]