如何尽量避免引用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的配置文件是分散在很多地方的,而我们需要 ...
随机推荐
- Constructing Roads In JGShining's Kingdom
点击打开题目链接 本题目是考察 最长递增子序列的 有n^2 n(logn) n^2 会超时的 下面两个方法的代码 思路 可以百度LIS LCS dp里面存子序列 n(logn) ...
- Swift类型转换
关于「类型转换」(Type Casting),<The Swift Programming Language>描述如下: Type casting is a way to check th ...
- CS231n 2016 通关 第三章-Softmax 作业
在完成SVM作业的基础上,Softmax的作业相对比较轻松. 完成本作业需要熟悉与掌握的知识: cell 1 设置绘图默认参数 mport random import numpy as np from ...
- JS正则对象 RegExp(有变量的时候使用),用来匹配搜索关键字(标红)
1,平常我们写js正则规则的时候,一般是这样写: var reg = /abc/; 然而,这样写的话,如果abc是一个变量这样就不行,我们需要下面这种写法: var abc = "汉字&qu ...
- ShutdownHook作用
源地址:http://kim-miao.iteye.com/blog/1662550 void java.lang.Runtime.addShutdownHook(Thread hook) 该方法用来 ...
- IP地址库解析——读取IP地址获得实际地理位置信息的java源码实现
说明:IP地址库来自QQwry.dat数据库文件,通过解析地址库当中的ip,已经细化最后获取的信息:获取ip地址对应的:国家 / 省 / 市 / 运营商ISP信息. 解析主要用到三个类: (1) IP ...
- Identity Server 4 原理和实战(完结)_Hybrid Flow 实例, Claims, 角色授权和策略授权
4分50 建立客户端 不需要身份认证 客户端叫做HybirdClient 配置IdentityServer服务端,先把客户端添加上 把userClaims添加到token里面 然后运行服务端就可以了 ...
- python之文件的读写(1)
真的崩溃,刚写完的笔记由于点错了,现在特么又要重新写了. 崩溃呀.......... 之前的废话就不再重复了,直接进入正题吧. 今天小R 学了一天的NP课程,但是python还是不能忘得,所以晚上又 ...
- FileWriter 写文件
FileWriter fw = new FileWriter("C://Users//pc//Desktop//aaa.txt",true); fw.write("201 ...
- C# 程序软件启动默认管理员权限。
在vs的Properties目录中找到 app.manifest,将其中level="asInvoker" 改成 level="requireAdministrator& ...