忘记jQuery,使用原生JS的API - Lidong's site 李东的博客

忘记jQuery,使用原生JS的API

Javascript现在已经是越来越成熟和使用越来越普遍的语言,但是好多人(包括我)都很少使用原生的JS,而去使用像JQuery这样的库,为什么要这样呢?这些库都很繁重而且好多扩展功能你都不可能去用到的。所以在一些产品功能开发上推荐用原生的JS来实现。
这里不去争论原生JS和库的优缺点,确实,有些时候库里包含的很方便的功能会使开发效率更高。但是很多人使用库是为了IE的兼容性,动画功能和选择器的方法,剩下的功能都很少去用到。这里会介绍一些简单的常用的JS的原生API的封装。
选择器

// jQuery
var els = $('.el');

// Native
var els = document.querySelectorAll('.el');

// Shorthand
var $ = function (el) {
  return document.querySelectorAll(el);
}

var els = $('.el');
或者使用regex-based micro-selector lib,这里贴出其源码供学习参考
window.$ = function(selector) {
  var matches = {
    '#': 'getElementById',
    '.': 'getElementsByClassName',
    '@': 'getElementsByName',
    '=': 'getElementsByTagName',
    '*': 'querySelectorAll'
  };
  var regex = /[=#@.*]/.exec(selector)[0];
  return (document[matches[regex]](selector.split(regex)[1]));
};

window.$$ = function(s) {
    return document[{
        '#': 'getElementById',
        '.': 'getElementsByClassName',
        '@': 'getElementsByName',
        '=': 'getElementsByTagName'}[s[0]]
        || 'querySelectorAll'](s.slice(1))
};

window.$$$ = function(s) {
    try {return document[{
        '#': 'getElementById',
        '.': 'getElementsByClassName',
        '@': 'getElementsByName',
        '=': 'getElementsByTagName',
        '?': 'querySelectorAll'
    }[s[0]]](s.slice(1));}catch(e){}
};
创建DOM节点
// jQuery
var newEl = $('<div>');

// Native
var newEl = document.createElement('div');
事件监听
// jQuery
$('.el').on('event', function() {

});

// Native
[].forEach.call(document.querySelectorAll('.el'), function (el) {
  el.addEventListener('event', function() {

  }, false);
});
设置/读取属性
// jQuery
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');

// Native
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');
增加/删除类名
// 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');
增加节点
// jQuery
$('.el').append($('<div>'));

// Native
document.querySelector('.el').appendChild(document.createElement('div'));
clone节点
// jQuery
var clonedEl = $('.el').clone();

// Native
var clonedEl = document.querySelector('.el').cloneNode(true);
删除节点
// jQuery
$('.el').remove();

// Native
remove('.el');

function remove(el) {
  var toRemove = document.querySelector(el);

  toRemove.parentNode.removeChild(toRemove);
}
获取父节点
// jQuery
$('.el').parent();

// Native
document.querySelector('.el').parentNode;
获取相邻节点
// jQuery
$('.el').prev();
$('.el').next();

// Native
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;
基于XHR的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});
这只是很少的一部分,可以去参阅 MDN’s JS API referenceWPD’s DOM docs 来学习更多。
当然,仍然可以使用一些JS库,可以通过microjs来搜索特定功能的JS库来按需使用。
不管怎么样,首先要确保在完成目标的前提下,来更聪明的使用原生JS或者去使用一些特定的库。
感谢原作者,译自http://blog.romanliutikov.com/post/63383858003/how-to-forget-about-jquery-and-start-using-native

COMMENTS(1)

  • 李东

    May 18 2017

    同名同姓

LEAVE A COMMENT

Name:*

E-Mail:*

Website:

Message:*

Required fields are marked *

Post Comment