你不需要jQuery(五)
为什么不用jQuery?因为它让你的网站体积变得臃肿。你的网站并不真的需要jQuery,不需要它带来的额外体积、带宽和加载时间。
用原生JavaScript简单实现jQuery提供的功能和方法
查找、选择页面元素
// jQuery 实现 var els = $('.el'); // 原生JavaScript实现 var els = document.querySelectorAll('.el'); // 简写 var $ = function (el) { return document.querySelectorAll(el); } var els = $('.el');
创建元素
// jQuery 实现 var newEl = $('<div/>'); // 原生JavaScript实现 var newEl = document.createElement('div');
事件、监听器操作
// jQuery 实现 $('.el').on('event', function() { }); // 原生JavaScript实现 [].forEach.call(document.querySelectorAll('.el'), function (el) { el.addEventListener('event', function() { }, false); });
设置、修改和获取属性值
// jQuery 实现 $('.el').filter(':first').attr('key', 'value'); $('.el').filter(':first').attr('key'); // 原生JavaScript实现 document.querySelector('.el').setAttribute('key', 'value'); document.querySelector('.el').getAttribute('key');
增加/修改/删除/反转 类操作
// jQuery 实现 $('.el').addClass('class'); $('.el').removeClass('class'); $('.el').toggleClass('class'); // 原生JavaScript实现 document.querySelector('.el').classList.add('class'); document.querySelector('.el').classList.remove('class'); document.querySelector('.el').classList.toggle('class');
追加元素 Append
// jQuery 实现 $('.el').append($('<div/>')); // 原生JavaScript实现 document.querySelector('.el').appendChild(document.createElement('div'));
复制、克隆元素
// jQuery 实现 var clonedEl = $('.el').clone(); // 原生JavaScript实现 var clonedEl = document.querySelector('.el').cloneNode(true);
删除元素
// jQuery 实现 $('.el').remove(); // 原生JavaScript实现 remove('.el'); function remove(el) { var toRemove = document.querySelector(el); toRemove.parentNode.removeChild(toRemove); }
父元素操作
// jQuery 实现 $('.el').parent(); // 原生JavaScript实现 document.querySelector('.el').parentNode;
前一个/下一个/临近同辈元素
// jQuery 实现 $('.el').prev(); $('.el').next(); // 原生JavaScript实现 document.querySelector('.el').previousElementSibling; document.querySelector('.el').nextElementSibling;
XHR aka AJAX
新版的JavaScript API里提供了一个全新的可以实现ajax的API——fetch,这个api采用了全新的 Promise 架构,使用起来更方便,更灵活,详细用法请参考《你不需要jQuery(三):新AJAX方法fetch() 》。
下面是传统的实现方式:
// jQuery 实现 $.get('url', function (data) { }); $.post('url', {data: data}, function (data) { }); // 原生JavaScript实现 // 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});
不可否认,jQuery有时候是开发项目时必不可少的,但不同的项目,不同的场景,项目的技术架构,都需要做不同的考量,经过冷静的思考,我们就会发现,很多时候,我并不需要jQuery,使用原生JavaScript技术反而项目变得更精简、效率更高。
阅读余下内容