网站如何做到完全不需要jQuery也可以满足简单需求
2013-06-27 00:00
495 查看
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 方法模拟这个功能。
这里需要注意的是,querySelectorAll 方法返回的是 NodeList 对象,它很像数组(有数字索引和 length 属性),但不是数组,不能使用 pop、push 等数组特有方法。如果有需要,可以考虑将 Nodelist 对象转为数组。
二、DOM 操作
DOM 本身就具有很丰富的操作方法,可以取代 jQuery 提供的操作方法。
尾部追加 DOM 元素。
头部插入 DOM 元素。
删除 DOM 元素。
三、事件的监听
jQuery 的 on 方法,完全可以用 addEventListener 模拟。
为了使用方便,可以在 NodeList 对象上也部署这个方法。
四、事件的触发
jQuery 的 trigger 方法则需要单独部署,相对复杂一些。
在NodeList对象上也部署这个方法。
五、document.ready
目前的最佳实践,是将 JavaScript 脚本文件都放在页面底部加载。这样的话,其实 document.ready 方法(jQuery 简写为$(function))已经不必要了,因为等到运行的时候,DOM 对象已经生成了。
六、attr 方法
jQuery 使用 attr 方法,读写网页元素的属性。
DOM 元素允许直接读取属性值,写法要简洁许多。
需要注意,input 元素的 this.value 返回的是输入框中的值,链接元素的 this.href 返回的是绝对 URL。如果需要用到这两个网页元素的属性准确值,可以用 this.getAttribute (‘value')和 this.getAttibute (‘href')。
七、addClass 方法
jQuery 的 addClass 方法,用于为 DOM 元素添加一个 class。
DOM 元素本身有一个可读写的 className 属性,可以用来操作 class。
HTML 5 还提供一个 classList 对象,功能更强大(IE 9 不支持)。
八、CSS
jQuery 的 css 方法,用来设置网页元素的样式。
DOM 元素有一个 style 属性,可以直接操作。
九、数据储存
jQuery 对象可以储存数据。
HTML 5 有一个 dataset 对象,也有类似的功能(IE 10 不支持),不过只能保存字符串。
十、Ajax
jQuery 的 Ajax 方法,用于异步操作。
我们可以定义一个 request 函数,模拟 Ajax 方法。
然后,基于 request 函数,模拟 jQuery 的 get 和 post 方法。
十一、动画
jQuery 的 animate 方法,用于生成动画效果。
jQuery 的动画效果,很大部分基于 DOM。但是目前,CSS 3 的动画远比 DOM 强大,所以可以把动画效果写进 CSS,然后通过操作 DOM 元素的 class,来展示动画。
如果需要对动画使用回调函数,CSS 3 也定义了相应的事件。
十二、替代方案
由于 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
(完)
据统计,目前全世界 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
(完)
相关文章推荐
- 网站如何做到完全不需要jQuery也可以满足简单需求
- 网站如何做到完全不需要 jQuery ?
- 网站如何做到完全不需要jQuery
- 网站如何做到完全不需要 jQuery ?
- 网站如何做到完全不需要使用jQuery
- 网站如何做到完全不需要 jQuery ?
- 网站如何做到完全不需要jQuery
- HTML5网站如何做到完全不需要jQuery
- 社交系统ThinkSNS+研发日记四:如何做到 Laravel 配置可以网站后台配置
- 如何做到 Laravel 配置可以网站后台配置?
- 社交系统ThinkSNS+在研发过程中,如何做到 Laravel 配置可以网站后台配置
- 网站优化中如何写出满足用户需求的文章
- 网站优化中如何写出满足用户需求的文章
- md5和加盐值为何可以满足中小网站的安全需求
- 如何用最简单最快的方法判断一个BMP图片是否为黑白图片?我现在是全图片scanline 然后再加以分析,太慢了,有没有直接的函数可以做到呢?
- 在软件开发中,我们该如何使用工具?---凡是合理的需求都可以满足
- 网站如何做到 jQuery-free?
- Github网站加载不完全,响应超时,如何解决 Github是一个代码托管平台和开发者社区,开发者可以在Github上创建自己的开源项目并与其他开发者协作编码。毫不夸张地说,高效利用Github是一
- 网站优化中如何写出满足用户需求的文章
- 如何简单使用ngrok,将网站内网映射到外网