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的选择器,而现在,所有的浏览器基本都支持了querySelectorquerySelectorAll这里是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的更多相关文章

  1. (转)在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]

    写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery.bootstrap的 ...

  2. 解决sea.js引用jQuery提示$ is not a function的问题

    在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...

  3. 转 mvc项目中,解决引用jquery文件后智能提示失效的办法

    mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法   这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常 ...

  4. discuzx3.1中引用 Jquery报错的解决办法

    我们可以引用jQuery给JQ赋予一个变量var jq = jQuery.noConflict(); 修改成为:<script type="text/javascript"& ...

  5. 引用jquery框架后出错

    问题描述:当引用了jquery框架后,页面的js不能正常工作. 后面我的解决办法:是因为在引用 jquery的框架时的代码为 <script type="text/javascript ...

  6. webpack 引用 jquery + bootstrap 报错解决

    webpack 引用 jquery + bootstrap , error : jQuery is not defind 在webpack.dev.conf.js plugins[] 加入 new w ...

  7. react 或 vue 中引用 jQuery 插件

    前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...

  8. vue 中引用jquery

    1.安装jquery npm install jquery --save-dev 2.打开配置文件webpack.base.conf.js 加入'jquery': path.resolve(__dir ...

  9. 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...

随机推荐

  1. Constructing Roads In JGShining's Kingdom

    点击打开题目链接 本题目是考察  最长递增子序列的  有n^2     n(logn)  n^2  会超时的 下面两个方法的代码  思路  可以百度LIS  LCS dp里面存子序列 n(logn) ...

  2. Swift类型转换

    关于「类型转换」(Type Casting),<The Swift Programming Language>描述如下: Type casting is a way to check th ...

  3. CS231n 2016 通关 第三章-Softmax 作业

    在完成SVM作业的基础上,Softmax的作业相对比较轻松. 完成本作业需要熟悉与掌握的知识: cell 1 设置绘图默认参数 mport random import numpy as np from ...

  4. JS正则对象 RegExp(有变量的时候使用),用来匹配搜索关键字(标红)

    1,平常我们写js正则规则的时候,一般是这样写: var reg = /abc/; 然而,这样写的话,如果abc是一个变量这样就不行,我们需要下面这种写法: var abc = "汉字&qu ...

  5. ShutdownHook作用

    源地址:http://kim-miao.iteye.com/blog/1662550 void java.lang.Runtime.addShutdownHook(Thread hook) 该方法用来 ...

  6. IP地址库解析——读取IP地址获得实际地理位置信息的java源码实现

    说明:IP地址库来自QQwry.dat数据库文件,通过解析地址库当中的ip,已经细化最后获取的信息:获取ip地址对应的:国家 / 省 / 市 / 运营商ISP信息. 解析主要用到三个类: (1) IP ...

  7. Identity Server 4 原理和实战(完结)_Hybrid Flow 实例, Claims, 角色授权和策略授权

    4分50 建立客户端 不需要身份认证 客户端叫做HybirdClient 配置IdentityServer服务端,先把客户端添加上 把userClaims添加到token里面 然后运行服务端就可以了 ...

  8. python之文件的读写(1)

    真的崩溃,刚写完的笔记由于点错了,现在特么又要重新写了.  崩溃呀.......... 之前的废话就不再重复了,直接进入正题吧. 今天小R 学了一天的NP课程,但是python还是不能忘得,所以晚上又 ...

  9. FileWriter 写文件

    FileWriter fw = new FileWriter("C://Users//pc//Desktop//aaa.txt",true); fw.write("201 ...

  10. C# 程序软件启动默认管理员权限。

    在vs的Properties目录中找到 app.manifest,将其中level="asInvoker" 改成 level="requireAdministrator& ...