如何尽量避免引用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的配置文件是分散在很多地方的,而我们需要 ...
随机推荐
- 「USACO16OPEN」「LuoguP3147」262144(区间dp
P3147 [USACO16OPEN]262144 题目描述 Bessie likes downloading games to play on her cell phone, even though ...
- July Cook-Off 2017
Chang and Bitwise OR 分析:因为按位或最后肯定小于等于加,所以把所有数按位或即可 #include "iostream" #include "cstd ...
- 从exgcd到exCRT
从最基础的开始. 1.gcd 这个不用说了吧--\(gcd(a,b) = gcd(b,a\%b)\),这个很显然. 2.exgcd 这玩意可以用来求形如\(ax+by = gcd(a,b)\)的不定方 ...
- myeclipse_JUnit导包问题
第一种方式: MyEclipse创建JUnit单元测试时,在需要测试的代码段前键入“@Test”时,按ctrl和1一般会自动提示JUnit需要导包,但有时会无法提示这个建议,如图所示.该经验教你如何解 ...
- 2014年将会受欢迎的IT技能--你有多少哪?
据国外媒体报道,据Global Knowledge等十几家研究机构发布的2014年IT技能和薪金调查报告显示,2014年最受欢迎的十大IT技能如下: 1.编程与应用开发 据美国劳工统计局称,开发者和程 ...
- 查看Spring源码的方法
来自为知笔记(Wiz)
- vscode实现列编辑
ctrl + shift + 左键选择要编辑的列 好用,再也不用使用\n替换了
- Lotus and Characters (stronger)
题意: 有n类物品,第i种物品权值为$val(i)$,有$cnt(i)$个,现在你可以选出一些物品排成一个序列(假设有m个), 记第i个物品种类为$x_i$,最大化$\sum_{i=1}^m{i * ...
- sql server 2008 R2 升级与安装遇到的问题
因工作需要,遂把以前的2008升级到r2,升级失败,具体原因忘了,卸载2008,清了注册表删了文件,结果安装的时候失败了,如下图: 下一步-有错误日志和错误的序列号,错误日志在C:\Program F ...
- 参考手册(html css)
HTML CSS DOM XML DOM XML DOM Document JavaScript JavaScript RegExp JSP