概述

回顾过去，创建 jQuery 是为了应对浏览器之间的 JavaScript 实现差异，Internet Explorer 是当时的罪魁祸首。作为一个易于使用的解决方案，jQuery 已经被开发人员和初学者广泛接受，大多数人开始通过这个库使 JavaScript。

在 2019 年，IE8 到 IE11 的使用量已经极少。这意味着我们可以从应用程序中删除 jQuery 并改为标准 DOM 和一些 ES6 的特性。从此，浏览器不必在处理代码前加载整个库了，大大减小了前端的性能压力，这对移动端浏览器来说尤为重要。

JQuery 不可取代吗?

AJAX

当你想用AJAX，原生的实现方式是 XMLHttpRequest，但是几乎没有人愿意使用这个难用的 API。jQuery 用 $.ajax 方法封装了这个难用的 API，并且提供了 $.get 和 $.post 两个快捷的方式。

1
2
3
4
5
6
7

$.ajax({  
  url: "https://swapi.co/api/people/",  
  type: "GET"  
  success: function(data) {    
   console.log(data);  
  }
});

在现代浏览器中，我们可以使用 fetch 方法来取代 AJAX 了，需要注意的是， fetch 并不是对 AJAX 的另一种封装，而是作为 AJAX 的替代者，避免了 AJAX 常见的回调地狱的问题，若搭配 ES2017 的 await 和 async API 使用的话堪称神器，fetch API 相对于 AJAX 就如写 GO 语言的协程相对于写 JAVA 多线程一般的快感。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

data = { name: "a name", email: "an@email.com" };

fetch(url, {  
  method: 'POST',  
  headers: { "Content-Type": "application/json" },  
  body: JSON.stringify(data)
})
.then(response => response.json())
.then((data) => {
     console.log(data);
});

关于此部分的详细内容和 Promise 对象的使用，后面的文章会专门介绍。

选择器

在 jQuery 中我们使用 $( ) 函数来进行选择元素

1
2
3

var lead = $('#lead');
var firstRedItem = $('.red').eq(0);
var greenListItems = $('li.green');  // Adding `li` not to select the `p`.

下面是标准 DOM 进行选择的方法

1
2
3

const lead = document.getElementById('lead');  //注意没有 #
const firstRedItem = document.querySelector('.red');
const greenListItems = document.querySelectorAll('li.green');

插入一个 DOM 元素

jQuery 的做法

1
2

var commentContent = $('#commentContent').val(); 
$('#comments').append('<p class="comment">' + commentContent + '</p>');

标准 DOM 的做法，此处用到了 ES6 的模板字符串

1
2
3
4

const commentContent = document.getElementById('commentContent').value;
const comments = document.getElementById('comments');
comments.insertAdjacentHTML('beforeend', `<p class="comment">${commentContent}</p>`);

操作 CSS 样式列表

jQuery 的做法

1
2
3

$(selector).addClass('bold');
$(selector).removeClass('bold');
$(selector).toggleClass('bold');

标准 DOM 的做法

1
2
3

element.classList.add('bold');
element.classList.remove('bold');
element.classList.toggle('bold');

事件监听

jQuery 的做法

1
2
3

$('#useless-btn').on('click', function(event) {  
  alert('Thanks for clicking!');
});

标准 DOM 的做法

1
2
3
4

const button = document.getElementById('useless-btn');
button.addEventListener('click', (event) => {  
  alert('Thanks for clicking!');
});

小结

为了所谓的兼容性，尤其是业界毒瘤 IE 浏览器的存在，多数情况下我们不能直接使用 HTML5 和 ES2016+ 的部分特性，不过近年来繁荣的前端生态圈出现了Babel 这个 JavaScript 编译器和 Polyfill 这个项目，借助它们可以让你避免这个问题。

等一等，JavaScript 不是解释执行的嘛？为什么还需要编译器呢？要注意的是，此处所属的编译是指将 ES2016+ 标准的 JavaScript 语法翻译为古老的浏览器能够理解的 JavaScript 语法，并非传统意义上编译的概念。

那么 Polyfill 又是什么呢？

Polyfill 可以理解为装修中的腻子，用于抹平新老浏览器之间的差异，将新的 JavaScript API 用于老的浏览器上，而Babel 只负责语法上的转换。

需要注意语法和 API 两个概念是不一样的，如 ES6 的箭头函数可以用原生 Babel 转为 function 形式，而 Array 是 ES5 就存在的一个对象了，但是该对象没有 of 方法，这个方法就是一个 API ，但 ES6 有这个 API 了。对于不支持 ES6 的浏览器，我们可以引入 babel-polyfill 使其支持 ES6 的 API。