jQuery是现在最流行的JavaScript工具库。
据统计,目前全世界57.3%的网站使用它。也就是说,10个网站里面,有6个使用jQuery。如果只考察使用工具库的网站,这个比例就会上升到惊人的91.7%。
虽然jQuery如此受欢迎,但是它臃肿的体积也让人头痛不已。jQuery 2.0的原始大小为235KB,优化后为81KB;如果是支持IE6、7、8的jQuery 1.8.3,原始大小为261KB,优化后为91KB。
这样的体积,即使是宽带环境,完全加载也需要1秒或更长,更不要说移动设备了。这意味着,如果你使用了jQuery,用户至少延迟1秒,才能看到网 页效果。考虑到本质上,jQuery只是一个操作DOM的工具,我们不仅要问:如果只是为了几个网页特效,是否有必要动用这么大的库?
2006年,jQuery诞生的时候,主要用于消除不同浏览器的差异(主要是IE6),为开发者提供一个简洁的统一接口。相比当时,如今的情况已经发生了很大的变化。IE的市场份额不断下降,以ECMAScript为基础的JavaScript标准语法,正得到越来越广泛的支持。开发者直接使用JavScript标准语法,就能同时在各大浏览器运行,不再需要通过jQuery获取兼容性。
下面就探讨如何用JavaScript标准语法,取代jQuery的一些主要功能,做到jQuery-free。
一、选取DOM元素
jQuery的核心是通过各种选择器,选中DOM元素,可以用querySelectorAll方法模拟这个功能。
var $ = document.querySelectorAll.bind(document);
这里需要注意的是,querySelectorAll方法返回的是NodeList对象,它很像数组(有数字索引和length属性),但不是数组,不能使用pop、push等数组特有方法。如果有需要,可以考虑将Nodelist对象转为数组。
myList = Array.prototype.slice.call(myNodeList);
二、DOM操作
DOM本身就具有很丰富的操作方法,可以取代jQuery提供的操作方法。
尾部追加DOM元素。
// jQuery写法 $(parent).append($(child)); // DOM写法 parent.appendChild(child)
头部插入DOM元素。
// jQuery写法 $(parent).prepend($(child)); // DOM写法 parent.insertBefore(child, parent.childNodes[0])
删除DOM元素。
// jQuery写法 $(child).remove() // DOM写法 child.parentNode.removeChild(child)
三、事件的监听
jQuery的on方法,完全可以用addEventListener模拟。
Element.prototype.on = Element.prototype.addEventListener;
为了使用方便,可以在NodeList对象上也部署这个方法。
NodeList.prototype.on = function (event, fn) { []['forEach'].call(this, function (el) { el.on(event, fn); }); return this; };
四、事件的触发
jQuery的trigger方法则需要单独部署,相对复杂一些。
Element.prototype.trigger = function (type, data) { var event = document.createEvent('HTMLEvents'); event.initEvent(type, true, true); event.data = data || {}; event.eventName = type; event.target = this; this.dispatchEvent(event); return this; };
在NodeList对象上也部署这个方法。
NodeList.prototype.trigger = function (event) { []['forEach'].call(this, function (el) { el['trigger'](event); }); return this; };
五、document.ready
目前的最佳实践,是将JavaScript脚本文件都放在页面底部加载。这样的话,其实document.ready方法(jQuery简写为$(function))已经不必要了,因为等到运行的时候,DOM对象已经生成了。
六、attr方法
jQuery使用attr方法,读写网页元素的属性。
$("#picture").attr("src", "http://url/to/image");
DOM元素允许直接读取属性值,写法要简洁许多。
$("#picture").src = "http://url/to/image";
需要注意,input元素的this.value返回的是输入框中的值,链接元素的this.href返回的是绝对URL。如果需要用到这两个网页 元素的属性准确值,可以用this.getAttribute('value')和this.getAttibute('href')。
七、addClass方法
jQuery的addClass方法,用于为DOM元素添加一个class。
$('body').addClass('hasJS');
DOM元素本身有一个可读写的className属性,可以用来操作class。
document.body.className = 'hasJS'; // or document.body.className += ' hasJS';
HTML 5还提供一个classList对象,功能更强大(IE 9不支持)。
document.body.classList.add('hasJS'); document.body.classList.remove('hasJS'); document.body.classList.toggle('hasJS'); document.body.classList.contains('hasJS');
八、CSS
jQuery的css方法,用来设置网页元素的样式。
$(node).css( "color", "red" );
DOM元素有一个style属性,可以直接操作。
element.style.color = "red";; // or element.style.cssText += 'color:red';
九、数据储存
jQuery对象可以储存数据。
$("body").data("foo", 52);
HTML 5有一个dataset对象,也有类似的功能(IE 10不支持),不过只能保存字符串。
element.dataset.user = JSON.stringify(user); element.dataset.score = score;
十、Ajax
jQuery的Ajax方法,用于异步操作。
$.ajax({ type: "POST", url: "some.php", data: { name: "John", location: "Boston" } }).done(function( msg ) { alert( "Data Saved: " + msg ); });
我们可以定义一个request函数,模拟Ajax方法。
function request(type, url, opts, callback) { var xhr = new XMLHttpRequest(); if (typeof opts === 'function') { callback = opts; opts = null; } xhr.open(type, url); var fd = new FormData(); if (type === 'POST' && opts) { for (var key in opts) { fd.append(key, JSON.stringify(opts[key])); } } xhr.onload = function () { callback(JSON.parse(xhr.response)); }; xhr.send(opts ? fd : null); }
然后,基于request函数,模拟jQuery的get和post方法。
var get = request.bind(this, 'GET'); var post = request.bind(this, 'POST');
十一、动画
jQuery的animate方法,用于生成动画效果。
$foo.animate('slow', { x: '+=10px' });
jQuery的动画效果,很大部分基于DOM。但是目前,CSS 3的动画远比DOM强大,所以可以把动画效果写进CSS,然后通过操作DOM元素的class,来展示动画。
foo.classList.add('animate');
如果需要对动画使用回调函数,CSS 3也定义了相应的事件。
el.addEventListener("webkitTransitionEnd", transitionEnded); el.addEventListener("transitionend", transitionEnded);
十二、替代方案
由于jQuery体积过大,替代方案层出不穷。
其中,最有名的是zepto.js。它的设计目标是以最小的体积,做到最大兼容jQuery的API。zepto.js 1.0版的原始大小是55KB,优化后是29KB,gzip压缩后为10KB。
如果不求最大兼容,只希望模拟jQuery的基本功能,那么,min.js优化后只有200字节,而dolla优化后是1.7KB。
此外,jQuery本身采用模块设计,可以只选择使用自己需要的模块。具体做法参见它的github网站,或者使用专用的Web界面。
十三、参考链接
- Remy Sharp,I know jQuery. Now what?
- Hemanth.HM,Power of Vanilla JS
- Burke Holland,5 Things You Should Stop Doing With jQuery
(完)
转自:阮一峰的网络日志
相关推荐
也就是说,10个网站里面,有6个使用jQuery。如果只考察使用工具库的网站,这个比例就会上升到惊人的91.7%。虽然jQuery如此受欢迎,但是它臃肿的体积也让人头痛不已。jQuery2.0的原始大小为235KB,优化后为81KB;如果...
jQuery-photoClip-master 图片商城剪切,jq,js web开发
Directory of D:\JQuery 2012/04/01 21:28 <DIR> . 2012/04/01 21:28 <DIR> .. 2010/05/04 06:45 239,835 jquery-1.4.1-vsdoc.js 2010/05/04 06:45 168,792 ... 2 Dir(s) 2,934,730,752 bytes free 你们懂的。。
后缀名为*.wdl的电子书,需安装DyanDoc Free Reader软件。 ║ ║5.后缀名为* .ceb、*.xeb的电子书,需安装方正的Apabi Reader软件 ║ ║6.后缀名为*.caj、*.nh、*,kdh的电子书,需安装中国期刊网CAJ、NH ║ ║文件...
* jQuery Form Plugin * version: 4.2.2 * Requires jQuery v1.7.2 or later * Project repository: https://github.com/jquery-form/form * Copyright 2017 Kevin Morris * Copyright 2006 M. Alsup * Dual ...
前端项目-free-jqgrid,网格为jquery插件-许可证更改前jqgrid的fork
In Pro jQuery 2.0 seasoned author, Adam Freeman, demonstrates how to get the most from jQuery 2.0 by focussing on the practical features of the technology and how they can be applied to solving real-...
jquery-ui的前端框架,本人觉得还不错,故拿来收藏,该框架需要使用tomcat或者nginx来启动
NULL 博文链接:https://free0007.iteye.com/blog/2080588
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, ...
免费 100 个 JQUERY 移动图标包! 由 Freepik.com 专门为 jQuery4u.com 制作。 100 矢量格式 AI、EPS、PSD。 快速开始 克隆 git repo - git clone - 或 执照 双许可证:MIT/GPL
NULL 博文链接:https://free0007.iteye.com/blog/2207777
StarAdmin-Free-Bootstrap-Admin-Template Star Admin是使用Bootstrap 4构建的免费响应式管理模板。该模板具有色彩鲜艳,引人入胜却又简单而优雅的设计。 模板制作精良,所有组件都整齐,精心设计并布置在模板中。 ...
QUICK UI 4.0是基于jquery1.9开发。在开始使用 QUICK UI 之前,有必要先了解jquery的基础知识。我们假定您已经基本掌握QUIERY的用法,包括初始化函数、使用选择器选择DOM节点和设置与读取自定义属性等知识。
目前最新版的JQueryUI插件 jquery-ui-1.10.3
Free-Fs — 开源文件管理系统 :open_book: 项目简介 :sparkles:Free-Fs 开源文件管理系统:基于 SpringBoot2.x + MyBatisPlus + MySQL + Shiro+ Layui 等搭配七牛云,阿里云OSS实现的云存储管理系统。包含文件上传、...
BreezeAdmin-免费-管理模板Breeze Admin是使用Bootstrap 4构建的免费响应式管理模板。该模板具有丰富多彩,引人入胜却又简单而优雅的设计。 模板制作精良,所有组件都整齐,...学分: 引导程序4 材料设计图标jQuery的
我们还使用了一些流行的前端框架和库,如Bootstrap和jQuery,以加快前端开发的速度,并提供丰富的UI组件和交互效果。 我们的项目源码还使用了一些其他的技术和工具,以提高系统的性能和可靠性。我们使用了缓存技术来...