原生 JavaScript 代替 jQuery？

随着 javascript 本身的完善，越来越多的人开始喜欢使用原生 javascript 开发代替各种库，其中不少人发出了用原生 javascript 代替 jquery 的声音。这并不是什么坏事，但也不见得就是好事。如果你真的想把 jquery 从前端依赖库中移除掉，我建议你慎重考虑。

首先 jQuery 是一个第三方库。库存在的价值之一在于它能极大地简化开发。一般情况下，第三方库都是由原生语言特性和基础 API 库实现的。因此，理论上来说，任何库第三方库都是可以用原生语言特性代替的，问题在于是否值得？

jQuery 的作用

引用一段 jQuery 官网的话：

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.

这一段话很谦虚的介绍了 jQuery 在处理 DOM 和跨浏览器方面做出的贡献。而事实上，这也正是我们选用 jQuery 的主要原因，并顺带使用了它带来的一些工具，比如数组工具，Deferred 等。

对于我来说，最常用的功能包括

立即学习“Java免费学习笔记（深入）”；

• 在 DOM 树中进行查询

• 修改 DOM 树及 DOM 相关操作

• 事件处理

• Ajax

• Deferred 和 Promise

• 对象和数组处理

• 还有一个一直在用却很难在列清单时想到的——跨浏览器

到底是谁在替代谁？

上面提到的所有功能都能用原生代码来实现。从本质上来说，jQuery 就是用来代替原生实现，以达到减少代码，增强可读性的目的的——所以，到底是用 jQuery 代替原生代码，还是用原生代码代替 jQuery？这个先后因果关系可否搞明白？

我看到说用 querySelectorAll() 代替 $() 的时候，不禁在想，用 jQuery 一个字符就能解决的，为什么要写十六个字符？大部分浏览器是有实现 $()，但是写原生代码的时候你会考虑 $() 的浏览器兼容性吗？jQuery 已经考虑了！

我看到一大堆创建 DOM 结构的原生 JavaScript 代码的时候，不禁在想，用 jQuery 只需要一个方法链就解决了，我甚至可以用和 HTML 结构类似的代码(包含缩进)，比如

// 创建一个 ul 列表并加在 #container 中
$("
").append(
    $("
").append(
        $("").attr("href", "#").text("first")),
    $("
").append(
        $("").attr("href", "#").text("second")),
    $("
").append(
        $("").attr("href", "#").text("third"))
).appendTo($("#container"));

这段代码用 document.createElement() 来实现完全没有问题，只不过代码量要大得多，而且会出现大量重复(或类似)的代码。当然是可以把这些重复代码提取出来写成函数的……不过 jQuery 已经做了。

Asp+Ajax(Jquery)实用例子

Ajax是目前比较流行的网站建设技术，尤其作为网站建设者来说，掌握它十分有必要，如果用原生Javascript开发则比较困难，还好有强大的Jquery加持，开发则变的十分简单和容易。

下载

如果要获得某个元素，可以用 [] 运算符或 get(index) 方法；如果要获得包含所有元素的数组，可以使用 toArray() 方法，或者通过 ES6 中引入的 Array.from() 来转换。

// 将普通数组转换成 jQuery 对象
const jo = $([1, 2, 3]);
jo instanceof jQuery;   // true
Array.isArray(jo);      // false

// 从 jQuery 对象获取元素值
const a1 = jo[0];       // 1
const a2 = jo.get(1);   // 2

// 将 jQuery 对象转换成普通数组
const arr1 = jo.toArray();      // [1, 2, 3]
Array.isArray(arr1);            // true
const arr2 = Array.from(jo);    // [1, 2, 3]
Array.isArray(arr2);            // true

注意 each/map 和 forEach/map 回调函数的参数顺序

jQuery 定义在 $.fn 上的 each() 和 map() 方法与定义在 Array.prototype 上的原生方法 forEach() 和 map() 对应，它们的参数都是回调函数，但它们的回调函数定义有一些细节上的差别。

$.fn.each() 的回调定义如下：

Function(Integer index, Element element )

回调的第一个参数是数组元素所在的位置(序号，从 0 开始)，第二个参数是元素本身。

而 Array.prototype.forEach() 的回调定义是

Function(currentValue, index, array)

回调的第一个参数是数组元素本身，第二个参数才是元素所有的位置(序号)。而且这个回调有第三个参数，即整个数组的引用。

请特别注意这两个回调定义的第一个参数和第二个参数，所表示的意义正好交换，这在混用 jQuery 和原生代码的时候很容易发生失误。

对于 $.fn.map() 和 Array.prototype.map() 的回调也是如此，而且由于这两个方法同名，发生失误的概率会更大。

注意 each()/map() 中的 this

$.fn.each() 和 $.fn.map() 回调中经常会使用 this，这个 this 指向的就是当前数组元素。正是因为有这个便利，所以 jQuery 在定义回请贩时候没有把元素本身作为第一个参数，而是把序号作为第一个参数。

不过 ES6 带来了箭头函数。箭头函数最常见的作用就是用于回调。箭头函数中的 this 与箭头函数定义的上下文相关，而不像普通函数中的 this 是与调用者相关。

现在问题来了，如果把箭头函数作为 $.fn.each() 或 $.fn.map() 的回调，需要特别注意 this 的使用——箭头函数中的 this 不再是元素本身。鉴于这个问题，建议若非必要，仍然使用函数表达式作为 $.fn.each() 和 $.fn.map() 的回调，以保持原有的 jQuery 编程习惯。实在需要使用箭头函数来引用上下文 this 的情况下，千万记得用其回调定义的第二个参数作为元素引用，而不是 this。

// 将所有输入控制的 name 设置为其 id
$(":input").each((index, input) => {
    // const $input = $(this) 这是错误的！！！
    const $input = $(input);
    $input.prop("name", $input.prop("id"));
});

$.fn.map() 返回的并不是数组

与 Array.prototype.map() 不同，$.fn.map() 返回的不是数组，而是 jQuery 对象，是伪数组。如果需要得到原生数组，可以采用 toArray() 或 Array.from() 输出。

const codes = $([97, 98, 99]);
const chars = codes.map(function() {
    return String.fromCharCode(this);
});     // ["a", "b", "c"]

chars instanceof jQuery;    // true
Array.isArray(chars);       // false

const chars2 = chars.toArray();
Array.isArray(chars2);      // true

jQuery Promise

jQuery 是通过 $.Deferred() 来实现的 Promise 功能。在 ES6 以前，如果引用了 jQuery，基本上不需要再专门引用一个 Promise 库，jQuery 已经实现了 Promise 的基本功能。

不过 jQuery Promise 虽然实现了 then()，却没有实现 catch()，所以它不能兼容原生的 Promise，不过用于 co 或者 ES2017 的 async/await 毫无压力。

// 模拟异步操作
function mock(value, ms = 200) {
    const d = $.Deferred();
    setTimeout(() => {
        d.resolve(value);
    }, ms);
    return d.promise();
}

// co 实现
co(function* () {
    const r1 = yield mock(["first"]);
    const r2 = yield mock([...r1, "second"]);
    const r3 = yield mock([...r2, "third"]);
    console.log(r1, r2, r3);
});

// ['first']
// ['first', 'second']
// ['first', 'second', 'third']

// async/await 实现，需要 Chrome 55 以上版本测试
(async () => {
    const r1 = await mock(["first"]);
    const r2 = await mock([...r1, "second"]);
    const r3 = await mock([...r2, "third"]);
    console.log(r1, r2, r3);
})();

// ['first']
// ['first', 'second']
// ['first', 'second', 'third']

虽然 jQuery 的 Promise 没有 catch()，但是提供了 fail 事件处理，这个事件在 Deferred reject() 的时候触发。相应的还有 done 事件，在 Deferred resovle() 的时候触发，以及 always 事件，不论什么情况都会触发。

与一次性的 then() 不同，事件可以注册多个处理函数，在事件触发的时候，相应的处理函数会依次执行。另外，事件不具备传递性，所以 fail() 不能在写在 then() 链的最后。

结尾

总的来说，在大量操作 DOM 的前端代码中使用 jQuery 可以带来极大的便利，也使 DOM 操作的相关代码更易读。另一方面，原生 JavaScript 带来的新特性确实可以替代 jQuery 的部分工具函数/方法，以降低项目对 jQuery 的依赖程序。

jQuery 和原生 JavaScript 应该是共生关系，而不是互斥关系。应该在合适的时候选用合适的方法，而不是那么绝对的非要用谁代替谁。

原生JS取代一些JQuery方法

1.选取元素

// jQuery
var els = $('.el');
// Native
var els = document.querySelectorAll('.el');
// Shorthand
var $ = function (el) {
  return document.querySelectorAll(el);
}

querySelectorAll方法返回的是NodeList对象，需要转换为数组。

myList = Array.prototype.slice.call(myNodeList)

2.创建元素

// jQuery
var newEl = $('
');
// Native
var newEl = document.createElement('div');

3.添加事件

// jQuery
$('.el').on('event', function() {
});
// Native
[].forEach.call(document.querySelectorAll('.el'), function (el) {
  el.addEventListener('event', function() {
  }, false);
});

4.get/set属性

// jQuery
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');
// Native
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');

5.添加和移除样式Class

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

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

// jQuery
$('.el').addClass('class');
$('.el').removeClass('class');
$('.el').toggleClass('class');
// Native
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');

6.追加元素

尾部追加元素：

// jQuery
$('.el').append($('
'));
// Native
document.querySelector('.el').appendChild(document.createElement('div'));

头部追加元素：

//jQuery
$(‘.el’).prepend('
')
//Native
var parent = document.querySelector('.el');
parent.insertBefore("
",parent.childNodes[0])

7.克隆元素

// jQuery
var clonedEl = $('.el').clone();
// Native
var clonedEl = document.querySelector('.el').cloneNode(true);

8.移除元素

Remove
// jQuery
$('.el').remove();
// Native
remove('.el');
function remove(el) {
  var toRemove = document.querySelector(el);
  toRemove.parentNode.removeChild(toRemove);
}

9.获取父级元素

// jQuery
$('.el').parent();
// Native
document.querySelector('.el').parentNode;

10.获取上一个/下一个元素（Prev/next element）

// jQuery
$('.el').prev();
$('.el').next();
// Native
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;

11.XHR and AJAX

// jQuery
$.get('url', function (data) {
});
$.post('url', {data: data}, function (data) {
});
// Native
// get
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onreadystatechange = function (data) {
}
xhr.send();
// post
var xhr = new XMLHttpRequest()
xhr.open('POST', url);
xhr.onreadystatechange = function (data) {
}
xhr.send({data: data});

12.清空子元素

//jQuery
$("#elementID").empty()
//Native
var element = document.getElementById("elementID")
while(element.firstChild) element.removeChild(element.firstChild);

13.检查是否有子元素

//jQuery
if (!$("#elementID").is(":empty")){}
//Native
if (document.getElementById("elementID").hasChildNodes()){}

14.$(document).ready

DOM加载完成，会触发DOMContentLoaded事件，等同于jQuery的$(document).ready方法。

document.addEventListener("DOMContentLoaded", function() {    
   // ...
});

15.数据储存

jQuery对象可以储存数据。

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

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

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

16.动画

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

$foo.animate('slow', { x: '+=10px' }

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

foo.classList.add('animate')

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

el.addEventListener("webkitTransitionEnd", transitionEnded);
el.addEventListener("transitionend", transitionEnded);