据统计目前全世界%的网站使用它也就是说个网站里面有个使用jQuery如果只考察使用工具库的网站这个比例就会上升到惊人的%
虽然jQuery如此受欢迎但是它臃肿的体积也让人头痛不已jQuery 的原始大小为KB优化后为KB如果是支持IE的jQuery 原始大小为KB优化后为KB
这样的体积即使是宽带环境完全加载也需要秒或更长更不要说移动设备了这意味着如果你使用了jQuery用户至少延迟秒才能看到网 页效果考虑到本质上jQuery只是一个操作DOM的工具我们不仅要问如果只是为了几个网页特效是否有必要动用这么大的库？
年jQuery诞生的时候主要用于消除不同浏览器的差异（主要是IE）为开发者提供一个简洁的统一接口相比当时如今的情况已经发生了很大的变化IE的市场份额不断下降以ECMAScript为基础的JavaScript标准语法正得到越来越广泛的支持开发者直接使用JavScript标准语法就能同时在各大浏览器运行不再需要通过jQuery获取兼容性
下面就探讨如何用JavaScript标准语法取代jQuery的一些主要功能做到jQueryfree
一选取DOM元素
jQuery的核心是通过各种选择器选中DOM元素可以用querySelectorAll方法模拟这个功能
var $ = documentquerySelectorAllbind(document);
这里需要注意的是querySelectorAll方法返回的是NodeList对象它很像数组（有数字索引和length属性）但不是数组不能使用poppush等数组特有方法如果有需要可以考虑将Nodelist对象转为数组
myList = Arrayprototypeslicecall(myNodeList);
二DOM操作
DOM本身就具有很丰富的操作方法可以取代jQuery提供的操作方法
尾部追加DOM元素
// jQuery写法
$(parent)append($(child));
// DOM写法
parentappendChild(child)
头部插入DOM元素
// jQuery写法
$(parent)prepend($(child));
// DOM写法
parentinsertBefore(child parentchildNodes[])
删除DOM元素
// jQuery写法
$(child)remove()
// DOM写法
childparentNoderemoveChild(child)
三事件的监听
jQuery的on方法完全可以用addEventListener模拟
Elementprototypeon = ElementprototypeaddEventListener;
为了使用方便可以在NodeList对象上也部署这个方法
NodeListprototypeon = function (event fn) {
[][forEach]call(this function (el) {
elon(event fn);
});
return this;
};
四事件的触发
jQuery的trigger方法则需要单独部署相对复杂一些
Elementprototypetrigger = function (type data) {
var event = documentcreateEvent(HTMLEvents);
eventinitEvent(type true true);
eventdata = data || {};
eventeventName = type;
eventtarget = this;
thisdispatchEvent(event);
return this;
};
在NodeList对象上也部署这个方法
NodeListprototypetrigger = function (event) {
[][forEach]call(this function (el) {
el[trigger](event);
});
return this;
};
五documentready
目前的最佳实践是将JavaScript脚本文件都放在页面底部加载这样的话其实documentready方法（jQuery简写为$(function)）已经不必要了因为等到运行的时候DOM对象已经生成了
六attr方法
jQuery使用attr方法读写网页元素的属性
$("#picture")attr("src" "http://url/to/image");
DOM元素允许直接读取属性值写法要简洁许多
$("#picture")src = "http://url/to/image";
需要注意input元素的thisvalue返回的是输入框中的值链接元素的thishref返回的是绝对URL如果需要用到这两个网页 元素的属性准确值可以用thisgetAttribute(value)和thisgetAttibute(href)
七addClass方法
jQuery的addClass方法用于为DOM元素添加一个class
$(body)addClass(hasJS);
DOM元素本身有一个可读写的className属性可以用来操作class
documentbodyclassName = hasJS;
// or
documentbodyclassName += hasJS;
HTML 还提供一个classList对象功能更强大（IE 不支持）
documentbodyclassListadd(hasJS);
documentbodyclassListremove(hasJS);
documentbodyclassListtoggle(hasJS);
documentbodyclassListcontains(hasJS);
八CSS
jQuery的css方法用来设置网页元素的样式
$(node)css( "color" "red" );
DOM元素有一个style属性可以直接操作
elementstylecolor = "red";;
// or
elementstylecssText += color:red;
九数据储存
jQuery对象可以储存数据
$("body")data("foo" );
HTML 有一个dataset对象也有类似的功能（IE 不支持）不过只能保存字符串
elementdatasetuser = JSONstringify(user);
elementdatasetscore = score;
十Ajax
jQuery的Ajax方法用于异步操作
$ajax({
type: "POST"
url: "somephp"
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;
}
xhropen(type url);
var fd = new FormData();
if (type === POST && opts) {
for (var key in opts) {
fdappend(key JSONstringify(opts[key]));
}
}
xhronload = function () {
callback(JSONparse(xhrresponse));
};
xhrsend(opts ? fd : null);
}
然后基于request函数模拟jQuery的get和post方法
var get = requestbind(this GET);
var post = requestbind(this POST);
十一动画
jQuery的animate方法用于生成动画效果
$fooanimate(slow { x: +=px })
jQuery的动画效果很大部分基于DOM但是目前CSS 的动画远比DOM强大所以可以把动画效果写进CSS然后通过操作DOM元素的class来展示动画
fooclassListadd(animate)
如果需要对动画使用回调函数CSS 也定义了相应的事件
eladdEventListener("webkitTransitionEnd" transitionEnded);
eladdEventListener("transitionend" transitionEnded);
十二替代方案
由于jQuery体积过大替代方案层出不穷
其中最有名的是zeptojs它的设计目标是以最小的体积做到最大兼容jQuery的APIzeptojs 版的原始大小是KB优化后是KBgzip压缩后为KB
如果不求最大兼容只希望模拟jQuery的基本功能那么minjs优化后只有字节而dolla优化后是KB
此外jQuery本身采用模块设计可以只选择使用自己需要的模块具体做法参见它的github网站或者使用专用的Web界面
十三参考链接
Remy SharpI know jQuery Now what?
HemanthHMPower of Vanilla JS
Burke Holland Things You Should Stop Doing With jQuery
（完）
