如何尽量避免引用jQuery
Introduction
正如jQuery所宣称的一样,Write Less, Do More。很多时候我们喜欢用它来解决问题。但增加一个库必然意味着更大的网络负担,意味着更高的页面初始载入时间。并且,现在与当初已经有了很大不同,jQuery是伴随着IE6出来的,当时,jQuery在跨浏览器开发上有不可替代的作用。但今天,伴随ES5的广泛被支持以及各个浏览器本身的完善,我们可以考虑适当的丢掉它,改善性能。
需要注意的是,并不是说jQuery是不可取的,在某些场合,用它是更合适的,需要我们自己判断。
Listening for Document Ready
我们经常用到$( document ).ready()
或者它的简写 $()
,用来传入当所有dom准备完毕后,执行逻辑的相关回调。原生js可以这么写:
document.addEventListener('DOMContentLoaded', function () {
// dom 已经准备好被操作了
});
Selecting elements
我们常常依赖于jQuery的选择器,而现在,所有的浏览器基本都支持了querySelector
与 querySelectorAll
,这里是MDN链接
var lochNess = document.querySelector(".monsters");
console.log("It's from Scotland - " + lochNess.textContent);
var scary = document.querySelectorAll(".monsters");
for (var i = 0; i < scary.length; i++) {
console.log(scary[i].innerHTML);
}
Attaching and removing event listeners
侦听事件是web开发中再重要不过的一环。曾经IE独树一帜,与其它浏览器提供的API不一致,导致需要用jQuery来快速开发,现在,所有的浏览器都提供了addEventListener:
var btn = document.querySelectorAll("button"),
btn[0].addEventListener("click", function () {
list.addEventListener("mouseover", enlarge);
});
btn[1].addEventListener("click", function () {
list.removeEventListener("mouseover", enlarge);
});
Manipulating classes and attributes
曾经,不使用jQuery来处理class是一件很麻烦的事情,而现在,由于classList的存在(这里是MDB链接)我们可以快捷的解决这一类问题,另外,如果需要操作attribute,可以使用setAttribute(同样是MDN链接)
var btn = document.querySelectorAll("button"),
div = document.querySelector("#myDiv");
btn[0].addEventListener("click", function () {
//可以获取任意的属性
console.log(div.id);
});
// Element.classList存放了所有当前元素的class
var classes = div.classList;
btn[1].addEventListener("click", function () {
console.log(classes);
});
btn[2].addEventListener("click", function () {
//可以添加,删除
classes.add("red");
});
btn[3].addEventListener("click", function () {
//也可以翻转
classes.toggle("hidden");
});
Getting and setting element content
jQuery提供了text() html()用以操作元素的内容,我们可以使用原生的textContent与innerHTML属性代替它们。
var myText = document.querySelector("#myParagraph"),
btn = document.querySelectorAll("button");
// 获取
var myContent = myText.textContent;
console.log("textContent: " + myContent);
// 改变
btn[0].addEventListener('click', function () {
myText.textContent = " Koalas are the best animals ";
});
var myHtml = myText.innerHTML;
console.log("innerHTML: " + myHtml);
btn[1].addEventListener('click', function () {
myText.innerHTML = "<button> Penguins are the best animals </button>";
});
Inserting and removing elements
原生的js可以这样添加与删除元素:
var lunch = document.querySelector("#lunch");
// 添加
var fries = document.createElement("div");
fries.innerHTML = '<li><h4> Fries </h4></li>';
lunch.appendChild(fries);
// 特定位置添加
var beef = document.querySelector("#Beef"),
topSlice = document.createElement("li"),
bottomSlice = document.createElement("li");
bottomSlice.innerHTML = topSlice.innerHTML = 'Cheese';
beef.parentNode.insertBefore(topSlice, beef);
beef.parentNode.insertBefore(bottomSlice, beef.nextSibling);
};
//删除
var pickles = document.querySelector("#pickles");
if (pickles) {
pickles.parentNode.removeChild(pickles);
}
Walking the DOM tree
原生的js也可以遍历DOM树
var snakes = document.querySelector('#snakes'),
birds = document.querySelector('#birds');
snakes.addEventListener('click', function (e) {
console.log("Children: ");
var children = e.target.children;
for (var i = 0; i < children.length; i++) {
console.log(children[i].textContent);
}
});
birds.addEventListener('click', function (e) {
// 获取最近的兄弟节点
var previous = e.target.previousElementSibling;
if (previous) {
console.log("Previous sibling: " + previous.textContent);
}
var next = e.target.nextElementSibling;
if (next) {
console.log("Next sibling: " + next.textContent);
}
//所有的兄弟们
Array.prototype.filter.call(e.target.parentNode.children, function (child) {
if (child !== e.target) {
console.log(child.textContent);
}
});
});
Looping over arrays
jQuery提供的 each与map已经可以被ES5的forEach与map替代
var ninjaTurtles = ["Donatello", "Leonardo", "Michelangelo", "Raphael"];
ninjaTurtles.forEach(function (entry) {
console.log(entry);
});
var lovesPizza = ninjaTurtles.map(function (entry) {
return entry.concat(" loves pizza!");
});
console.log(lovesPizza);
Animations
jQuery的动画效果是非常强大的,在很多场合还是很难替代的,不过,由于CSS3,动画可以转到由CSS来实现。这部分就不给DEMO了。
AJAX
如果唯一使用jQuery的唯一理由,是它便捷的AJAX,那么,将jQuery替换成一个轻量的多的库吧!比如reqwest,这个库压缩后不到10kB。
总结
尽全力使脚本变的更小,可以使用户获得更高的加载速度,以及更好的用户体验。但也要谨慎的做取舍,没必要大量的造jQuery已经提供的轮子。
除了在编码方面带来性能优化,我们还可以借助工具达到同样的效果。可以看一看博主的webpack方面的文章
如何尽量避免引用jQuery的更多相关文章
- (转)在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]
写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery.bootstrap的 ...
- 解决sea.js引用jQuery提示$ is not a function的问题
在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...
- 转 mvc项目中,解决引用jquery文件后智能提示失效的办法
mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法 这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常 ...
- discuzx3.1中引用 Jquery报错的解决办法
我们可以引用jQuery给JQ赋予一个变量var jq = jQuery.noConflict(); 修改成为:<script type="text/javascript"& ...
- 引用jquery框架后出错
问题描述:当引用了jquery框架后,页面的js不能正常工作. 后面我的解决办法:是因为在引用 jquery的框架时的代码为 <script type="text/javascript ...
- webpack 引用 jquery + bootstrap 报错解决
webpack 引用 jquery + bootstrap , error : jQuery is not defind 在webpack.dev.conf.js plugins[] 加入 new w ...
- react 或 vue 中引用 jQuery 插件
前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...
- vue 中引用jquery
1.安装jquery npm install jquery --save-dev 2.打开配置文件webpack.base.conf.js 加入'jquery': path.resolve(__dir ...
- 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件
copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...
随机推荐
- C++之log4cpp库的使用
log4..简介 log4..是基于log4j的一系列的c++移植版本,使用了log4j的模式结构,目前主要有以下几个版本: 1. log4cxx, 目前是到0.10.0版,Apache下的孵化项目, ...
- HDU1083(最大匹配)
Courses Time Limit: 20000/10000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...
- UVA562(01背包均分问题)
Dividing coins Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu Descriptio ...
- haproxy小结(一)基础概念篇
HAProxy是法国人Willy Tarreau个人开发的一个开源软件,目标是应对客户端10000以上的同时连接,为后端应用服务器.数据库服务器提供高性能的负载均衡服务.HAproxy可以实现基于TC ...
- Windows服务卸载服务窗口仍显示的问题
关于Windows服务通过命令卸载后, 打开服务窗口,服务还有显示,只是状态改为了禁用,运行停止.那么我们怎么解决呢, 不要心慌,打开你的任务管理器,查看服务所用的exe程序是否还在运行,若有的话,便 ...
- sublime配置java环境
今天突然不想用eclipse编写java了,觉得sublime挺好用,就想用sublime配置java环境,以下是过程以及出现的问题. 一.配置Java环境 1.打开我的电脑–属性–高级–环境变量 2 ...
- C - Present
C - Present Time Limit:2000MS Memory Limit:262144KB 64bit IO Format:%I64d & %I64u Submit ...
- 【HBase】HBase笔记:HBase的Region机制
HBase 的机制里包含了许多优秀的算法,如 Region 定位.Region 分配.Region Server的上线和下线.Master 的上线和下线.在谈到这些之前,先把 HBase 的基本架构里 ...
- UVa 10214 Trees in a Wood. (数论-欧拉函数)
题意:给定一个abs(x) <= a, abs(y) <= b,除了原点之外的整点各有一棵树,可以相互阻挡,求从原点可以看到多少棵树. 析:由于a < b,所以我们可以一列一列的统计 ...
- UVa 557 Burger (概率+递推)
题意:有 n 个牛肉堡和 n 个鸡肉堡给 2n 个客人吃,在吃之前抛硬币来决定吃什么,如果剩下的汉堡一样,就不用投了,求最后两个人吃到相同的概率. 析:由于正面考虑还要要不要投硬币,太麻烦,所以我们先 ...