网站制作如何用javascript代替Jquery--【酷站科技】高端网站建设领导者

网站制作如何用javascript代替Jquery

2015-04-29 酷站科技大中小

jQuery是如今最时兴的JavaScript专用工具库。

据调查，现阶段全球57.3%的网址应用它。换句话说，10个网址里边，有6个应用jQuery。假如只调查应用专用工具库的网站制作，这一占比便会升高到令人震惊的91.7%。

jQuery是现在最流行的JavaScript工具库

尽管jQuery这般火爆，可是它松垮的容积也令人头疼不己。jQuery 2.0的初始尺寸为235KB，优化后为81KB；如果是适用IE6、7、8的jQuery 1.8.3，初始尺寸为261KB，优化后为91KB。

那样的容积，即便是光纤宽带自然环境，彻底载入也必须一秒或更长，更不要说移动终端了。这代表着，假如你应用了jQuery，客户最少延迟时间一秒，才可以见到网页页面实际效果。充分考虑实质上，jQuery仅仅一个实际操作DOM的专用工具，大家不但要问：假如仅仅为了更好地好多个网页特效，是不是必须使用这么大的库？

二零零六年，jQuery问世的情况下，关键用以清除不一样电脑浏览器的差别（主要是IE6），为开发人员出示一个简约的统一插口。对比那时候，现如今的状况早已发生了非常大的转变。IE的市场占有率持续降低，以ECMAScript为基本的JavaScript规范英语的语法，正获得愈来愈普遍的适用。开发人员立即应用JavScript规范英语的语法，就能另外在各种电脑浏览器运作，已不必须根据jQuery获得兼容模式。

下边就讨论怎样用JavaScript规范英语的语法，替代jQuery的一些关键作用，保证jQuery-free。

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", "h ttp://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);

}