资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/JSLite 的目标：缩小体积，做到 jQuery-free

JSLite 的目标：缩小体积，做到 jQuery-free

Scott / 3405人阅读

摘要：转载大牛的分析，这将是的方向。域名分析据统计，目前全世界的网站使用它。的市场份额不断下降，以为基础的标准语法，正得到越来越广泛的支持。下面就探讨如何用标准语法，取代的一些主要功能，做到。

转载大牛的分析，这将是JSLite的方向。前人栽树后人乘凉，jQuery为我们制定了一套接口标准，我们继续为此努力。域名：JSLite.io

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），为开发者提供一个简洁的统一接口。相比当时，如今的情况已经发生了很大的变化(Usage share of web browsers)。IE的市场份额不断下降，以ECMAScript为基础的JavaScript标准语法，正得到越来越广泛的支持。开发者直接使用JavScript标准语法，就能同时在各大浏览器运行，不再需要通过jQuery获取兼容性。

下面就探讨如何用JavaScript标准语法，取代jQuery的一些主要功能，做到jQuery-free。

选取DOM元素

jQuery的核心是通过各种选择器，选中DOM元素，可以用querySelectorAll方法模拟这个功能。

js     var $ = document.querySelectorAll.bind(document);

这里需要注意的是，querySelectorAll方法返回的是NodeList对象，它很像数组（有数字索引和length属性），但不是数组，不能使用pop、push等数组特有方法。如果有需要，可以考虑将Nodelist对象转为数组。

jsmyList = Array.prototype.slice.call(myNodeList);
DOM操作

DOM本身就具有很丰富的操作方法，可以取代jQuery提供的操作方法。
尾部追加DOM元素。

js　　// jQuery写法
　　$(parent).append($(child));
　　// DOM写法
　　parent.appendChild(child)

头部插入DOM元素。

js　　// jQuery写法
　　$(parent).prepend($(child));
　　// DOM写法
　　parent.insertBefore(child, parent.childNodes[0])

删除DOM元素。

js　　// jQuery写法
　　$(child).remove()
　　// DOM写法
　　child.parentNode.removeChild(child)
事件的监听

jQuery的on方法，完全可以用addEventListener模拟。

jsElement.prototype.on = Element.prototype.addEventListener;

为了使用方便，可以在NodeList对象上也部署这个方法。

jsNodeList.prototype.on = function (event, fn) {
　　[]["forEach"].call(this, function (el) {
　　　　el.on(event, fn);
　　});
　　return this;
};
事件的触发

jQuery的trigger方法则需要多带带部署，相对复杂一些。

jsElement.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对象上也部署这个方法。

jsNodeList.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方法，读写网页元素的属性。

js$("#picture").attr("src", "http://url/to/image");

DOM元素允许直接读取属性值，写法要简洁许多。

js　　$("#picture").src = "http://url/to/image";

需要注意，input元素的this.value返回的是输入框中的值，链接元素的this.href返回的是绝对URL。如果需要用到这两个网页元素的属性准确值，可以用 this.getAttribute("value")和this.getAttibute("href") 。

addClass方法

jQuery的addClass方法，用于为DOM元素添加一个class。

js　　$("body").addClass("hasJS");

DOM元素本身有一个可读写的className属性，可以用来操作class。

js　　document.body.className = "hasJS";
　　// or
　　document.body.className += " hasJS";

HTML 5还提供一个classList对象，功能更强大（IE 9不支持）。

js　　document.body.classList.add("hasJS");
　　document.body.classList.remove("hasJS");
　　document.body.classList.toggle("hasJS");
　　document.body.classList.contains("hasJS");
CSS

jQuery的css方法，用来设置网页元素的样式。

js　　$(node).css( "color", "red" );

DOM元素有一个style属性，可以直接操作。

js　　element.style.color = "red";;
　　// or
　　element.style.cssText += "color:red";
数据储存

jQuery对象可以储存数据。

js　　$("body").data("foo", 52);

HTML 5有一个dataset对象，也有类似的功能（IE 10不支持），不过只能保存字符串。

js　　element.dataset.user = JSON.stringify(user);
　　element.dataset.score = score;
Ajax

jQuery的Ajax方法，用于异步操作。

js　　$.ajax({
　　　　type: "POST",
　　　　url: "some.php",
　　　　data: { name: "John", location: "Boston" }
　　}).done(function( msg ) {
　　　　alert( "Data Saved: " + msg );
　　});

我们可以定义一个request函数，模拟Ajax方法。

jsfunction 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方法。

jsvar get = request.bind(this, "GET");
var post = request.bind(this, "POST");
动画

jQuery的animate方法，用于生成动画效果。

js$foo.animate("slow", { x: "+=10px" });

jQuery的动画效果，很大部分基于DOM。但是目前，CSS 3的动画远比DOM强大，所以可以把动画效果写进CSS，然后通过操作DOM元素的class，来展示动画。

js　　foo.classList.add("animate");

如果需要对动画使用回调函数，CSS 3也定义了相应的事件。

js　　el.addEventListener("webkitTransitionEnd", transitionEnded);
　　el.addEventListener("transitionend", transitionEnded);
参考链接

Remy Sharp，I know jQuery. Now what?

Hemanth.HM，Power of Vanilla JS

Burke Holland，5 Things You Should Stop Doing With jQuery

混合云 idc机房托管 语音识别是怎么做到的 webrtc怎么做到的低延迟 JSLite 好的数据中心应做到机房高效稳定

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91447.html

相关文章

  • [教程] JSLite 01 介绍

    摘要：极大地简化了编程。与有着类似的，通用库只有，手机上每一都是钱。可以通过下面的标记把添加到网页中请注意，标签应该位于页面的部分。 简介 JSLite 是一个 JavaScript 库。 JSLite 极大地简化了 JavaScript 编程。 JSLite 只针对先进浏览器支持(HTML5,CSS3)移动端浏览器编写。 JSLite 使用js新方法实现j...

    elva 评论0 收藏0

  • JSLite 与jQuery有着类似的api，模仿jQuery的语法规范，并不是100%的覆盖【官方

    摘要：与有着绝大部分类似的，通用库只有，手机上每一都是钱。目前及的最新版已经支持。在这个函数中，原来的对象是无效的。与方法相同，接受一个标准格式的字符串，并返回解析后的对象。这有点像，但是是相反的方式。 [JSLite.io] showImg(https://img.shields.io/github/issues/JSLite/JSLite.svg); showImg(https://im...

    Kyxy 评论0 收藏0

  • JavaScript装逼指南

    摘要：构造函数很多教程都告诉我们，不要直接用内置对象的构造函数来创建基本变量，例如的写法就应该用的写法来取代。但是，构造函数注意是大写的有点特别。构造函数接受的参数中，第一个是要传入的参数名，第二个是函数内的代码用字符串来表示。 如何写JavaScript才能逼格更高呢？怎样才能组织JavaScript才能让别人一眼看出你不简单呢？是否很期待别人在看完你的代码之后感叹一句原来还可以这样写呢？...

    oneasp 评论0 收藏0

  • 文档生成工具 idoc

    摘要：文档生成工具简介通过生成静态页面的工具。通过生成静态页面的工具本地存储操作本地操作浏览器各种方法通知常用命令测试工具快捷键源码仓库仓库地址欢迎提需求和，提交地址。运行预览生成的静态页面。监控文件发生变化自动。 AIP文档生成工具 ,, ,, db `7MM MM `7MM ,MbMM ,pWWq. ,p6...

    ASCH 评论0 收藏0

发表评论

登陆后可评论

0条评论

Scott

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<