你可能不需要 jQuery！使用原生 JavaScript 进行开发-白红宇

你可能不需要 jQuery！使用原生 JavaScript 进行开发

阅读量：4561 次

发布时间：2019-06-08

本文共 6183 字，大约阅读时间需要 20 分钟。

http://youmightnotneedjquery.com/

摘自：http://www.cnblogs.com/lhb25/p/you-might-not-need-jquery.html

很多的 JavaScript 开发人员，包括我在内，都很喜欢。因为它的简单，因为它有很多丰富的插件可供使用，和其它优秀的工具一样，jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用。

　　然而，另一方面，作为前端开发的基础框架，包含大量的兼容性代码和扩展功能，其中有很多在你的整个项目中可能都不会用到。其实如果你只是针对现代浏览器，很多功能使用原生的 JavaScript 就可以实现，即使是拖后腿的低版本 IE 浏览器，兼容性也是很容易处理的。

您可能感兴趣的相关文章

　　下面就带大家一起看看在 IE 浏览器环境中如果使用原生代码实现 jQuery 中的功能。如果你打算自己开发一个小的基础框架，可以好好参考一下这些代码的实现。

Ajax Post

jQuery：

                            
$.ajax({ 
  
type: 
'POST'
,
  
url: 
'/my/url'
,
  
data: data
});
         
       

IE8+：

                            
var
request = 
new
XMLHttpRequest();
request.open(
'POST'
, 
'/my/url'
, 
true
);
request.send(data);
         
       

Ajax Get

jQuery：

                            
$.ajax({ 
  
type: 
'GET'
,
  
url: 
'/my/url'
,
  
success: 
function
(resp) { 
  
},
  
error: 
function
() { 
  
}
});　
         
       

IE8+：

                            
request = 
new
XMLHttpRequest();
request.open(
'GET'
, 
'/my/url'
, 
true
);
request.onreadystatechange = 
function
() { 
  
if
(
this
.readyState === 4){ 
    
if
(
this
.status >= 200 && 
this
.status < 400){ 
      
// Success!
      
resp = 
this
.responseText;
    
} 
else
{ 
      
// Error :(
    
}
  
}
}
request.send();
request = 
null
;
         
       

加载 JSON

jQuery：

                            
$.getJSON(
'/my/url'
, 
function
(data) { 
});
         
       

IE8+：

                            
request = 
new
XMLHttpRequest();
request.open(
'GET'
, 
'/my/url'
, 
true
);
request.onreadystatechange = 
function
() { 
  
if
(
this
.readyState === 4){ 
    
if
(
this
.status >= 200 && 
this
.status < 400){ 
      
// Success!
      
data = JSON.parse(
this
.responseText);
    
} 
else
{ 
      
// Error :(
    
}
  
}
}
request.send();
request = 
null
;
         
       

淡入效果

jQuery：

                            
$(el).fadeIn();

IE8+：

                            
function
fadeIn(el) { 
  
var
opacity = 0;
  
el.style.opacity = 0;
  
el.style.filter = 
''
;
  
var
last = +
new
Date();
  
var
tick = 
function
() { 
    
opacity += (
new
Date() - last) / 400;
    
el.style.opacity = opacity;
    
el.style.filter = 
'alpha(opacity='
+ (100 * opacity)|0 + 
')'
;
    
last = +
new
Date();
    
if
(opacity < 1) { 
      
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
    
}
  
};
  
tick();
}
fadeIn(el);
         
       

显示和隐藏

jQuery：

                            
$(el).show();
$(el).hide();

IE8+：

                            
el.style.display = 
''
;
el.style.display = 
'none'
;
         
       

添加 Class

jQuery：

                            
$(el).addClass(className);

IE8+：

                            
if
(el.classList)
  
el.classList.add(className);
else
  
el.className += 
' '
+ className;

插入 HTML

jQuery：

                            
$(el).before(htmlString);
$(parent).append(el);
$(el).after(htmlString);

IE8+：

                            
el.insertAdjacentHTML(
'beforebegin'
, htmlString);
parent.appendChild(el);
el.insertAdjacentHTML(
'afterend'
, htmlString);
         
       

获取子节点

jQuery：

                            
$(el).children();

IE8+：

                            
var
children = [];
for
(
var
i=el.children.length; i--;){ 
  
// Skip comment nodes on IE8
  
if
(el.children[i].nodeType != 8)
    
children.unshift(el.children[i]);
}
         
       

循环节点

jQuery：

                            
$(selector).each(
function
(i, el){ 
});

IE8+：

                            
function
forEachElement(selector, fn) { 
  
var
elements = document.querySelectorAll(selector);
  
for
(
var
i = 0; i < elements.length; i++)
    
fn(elements[i], i);
}
forEachElement(selector, 
function
(el, i){ 
});
         
       

清空节点

jQuery：

                            
$(el).empty();

IE8+：

                            
while
(el.firstChild)
  
el.removeChild(el.firstChild)

过滤节点

jQuery：

                            
$(selector).filter(filterFn);

IE8+：

                            
function
filter(selector, filterFn) { 
  
var
elements = document.querySelectorAll(selector);
  
var
out = [];
  
for
(
var
i = elements.length; i--;) { 
    
if
(filterFn(elements[i]))
      
out.unshift(elements[i]);
  
}
  
return
out;
}
filter(selector, filterFn);
         
       

查找元素

jQuery：

                            
$(el).find(selector);
$(
'.my #awesome selector'
);

IE8+：

                            
el.querySelectorAll(selector);
document.querySelectorAll(
'.my #awesome selector'
);

获取属性、HTML或者文本

jQuery：

                            
$(el).attr(
'tabindex'
);
$(el).html();
$(
'<div>'
).append($(el).clone()).html();
$(el).text();
         
       

IE8+：

                            
el.getAttribute(
'tabindex'
);
el.innerHTML
el.outerHTML
el.textContent || el.innerText
         
       

判断是否包含某个 css class

jQuery：

                            
$(el).hasClass(className);

IE8+：

                            
if
(el.classList)
  
el.classList.contains(className);
else
  
new
RegExp(
'(^| )'
+ className + 
'( |$)'
, 
'gi'
).test(el.className);　
         
       

选择器匹配

jQuery：

                            
$(el).is(
'.my-class'
);

IE8+：

                            
var
matches = 
function
(el, selector) { 
  
var
_matches = (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector);
  
if
(_matches) { 
    
return
_matches.call(el, selector);
  
} 
else
{ 
    
var
nodes = el.parentNode.querySelectorAll(selector);
    
for
(
var
i = nodes.length; i--;)
      
if
(nodes[i] === el) { 
        
return
true
;
    
}
    
return
false
;
}
matches(el, 
'.my-class'
);
         
       

前一个节点

jQuery：

                            
$(el).prev();

IE8+：

                            
// prevSibling can include text nodes
function
previousElementSibling(el) { 
  
do
{ el = el.previousSibling; } 
while
( el && el.nodeType !== 1 );
  
return
el;
}
el.previousElementSibling || previousElementSibling(el);
         
       

后一个节点

jQuery：

                            
$(el).next();

IE8+：

                            
// nextSibling can include text nodes
function
nextElementSibling(el) { 
  
do
{ el = el.nextSibling; } 
while
( el && el.nodeType !== 1 );
  
return
el;
}
el.nextElementSibling || nextElementSibling(el);
         
       

外部高度

jQuery：

                            
$(el).outerHeight()

IE8+：

                            
function
outerHeight(el, includeMargin){ 
  
var
height = el.offsetHeight;
  
if
(includeMargin){ 
    
var
style = el.currentStyle || getComputedStyle(el);
    
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
  
}
  
return
height;
}
outerHeight(el, 
true
);
         
       

外部宽度

jQuery：

                            
$(el).outerWidth()

IE8+：

                            
function
outerWidth(el, includeMargin){ 
  
var
height = el.offsetWidth;
  
if
(includeMargin){ 
    
var
style = el.currentStyle || getComputedStyle(el);
    
height += parseInt(style.marginLeft) + parseInt(style.marginRight);
  
}
  
return
height;
}
outerWidth(el, 
true
);
         
       

判断是否数组

jQuery：

                            
$.isArray(arr);

IE8+：

                            
isArray = Array.isArray || 
function
(arr) { 
  
return
Object.prototype.toString.call(arr) == 
'[object Array]'
;
}
isArray(arr);
         
       

数组转换

jQuery：

                            
$.map(array, 
function
(value, index){ 
})

IE8+：

                            
function
map(arr, fn) { 
  
var
results = []
  
for
(
var
i = 0; i < arr.length; i++)
    
results.push(fn(arr[i], i))
  
return
results
}
map(array, 
function
(value, index){ 
})
         
       