jQuery王者归来

曾经jQuery也是王者，只是时代变了，不过时代仍然在变，我们会发现jQuery还是那个王者。react和jquery比起来，你会不会发现，那些花里胡哨的东西，在jquery面前，就是笨拙的大象么？react的生态如此庞大，以及react本身所提出的协程，不都是因为react慢吗？项目里面打包一个react-dom，噢，让界面打开再飞一会儿。总而言之，现代前端虽然有很多创新，但带来的痛苦也不尽其数。

让我们再回头，弹一弹jQuery身上的尘土，看，它还在发光。 react之所以让我们热爱，抛开工程化的那一套，单纯从视图驱动讲，是因为它提出了virtual dom，在这一杀手级特性下，它可以让界面更新在更小范围内进行，从而在更新界面时拥有更好的性能。然而，在react16之前，所谓的更好的性能，在官方demo里面，也就是卡卡卡，于是有了fiber。而jquery永远都是直接操作DOM，所以直接操作DOM有多快，它的性能就有多好，而且jquery的包只有几十kb。那么，jquery怎么就不能吸收react这一创新呢？

jQuery入门

jQuery特指jQuery Core，它还有jQuery UI等其他套件，不在我们考虑范围内。要使用jQuery非常简单，不需要任何构建工具：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
复制代码

jQuery的设计，核心是封装DOM操作为更简便的接口，为了配套，它还提供了很多辅助的模块。在操作DOM时，它强调一种抽象的集合操作，比如：

<script>
$(document).ready(() => {
  const $div = $('div') // $div是指被选取到的所有DOM节点的一个抽象集合
  $div.css({ margin: '10px' }) // 对集合中的所有元素进行相同操作
})
</script>
复制代码

一个$包含了jQuery的所有核心理念。

通过阅读jQuery的API文档，可以快速入门，不需要太多其他辅助工具。你可能觉得它的api太多了，记不住，我可以教你一个方法，把这些api进行分类：

• 选择器：:focus :selected :hidden ...
• 选DOM节点：$, find, eq ...
• 识别DOM集合：each ...
• 操作DOM节点：html, appendTo, prependTo ...
• 事件相关：on, off, trigger ...
• Ajax: ajax, get, post ...
• Deferered
• CSS: css, addClass ...
• 动画效果：fadeIn, fadeOut, slideDown ...
• 处理函数：extend ...

基本上按照这样分，就可以把api都摸一遍了，而且它的api文档页面，也提供了这个分类，可以快速找到你需要的api。

现代编程

基于jQuery，我们可以直接快速操作DOM，但是由于jQuery不包含数据驱动视图的思想，所以导致我们无法运营现代编程的熟悉套路。既然如此，我们能不能在jQuery中使用数据驱动视图的方案呢？幸运的是，jQuery提供了成熟的插件系统，而基于这个插件体系，市面上出现了无数的jQuery插件，实现了各种非常棒的效果。为了实现现代编程，我们引入jqvm插件：

<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<script src="https://unpkg.com/jqvm/dist/jqvm.min.js"></script>
复制代码

接下来，我们就可以利用这个插件完成数据驱动视图的开发：

<template id="app">
  <div class="count">{{count}}</div>
  <button jq-on="click:plus">+</button>
  <button jq-on="click:minus">-</button>
</template>

<script>
  const view = $('#app')
    .vm({ count: 0 })
    .fn('plus', state => state.count ++)
    .fn('minus', state => state.count --)
    .mount()
</script>
复制代码

你看，在现代编程范式下，jquery也和vue一样，由状态驱动视图更新。 而且，和vue react不同的是，jquery可以直接操作DOM，而vue和react理念上不提倡对DOM进行操作，这样在某些场景下，我们就失去了操作DOM带来的特殊效果，例如在拖拽场景下。而使用jquery则完全和原生DOM结合在一起。

$('#app')
  .vm({ ... })
  .on('mousedown', '.dragbar', function() {
    const view = this
    return function() {
      view.draging = $(this)
    }
  })
  .on('mousemove', function(state) {
    if (!this.draging) {
      return
    }
    ...
  })
  .on('mouseup', function(state) {
    this.draging = null
    ...
  })
  .mount()
复制代码

也就是说，驱动视图变化的状态的变化，与视图本身的变化是相辅相成的，视图的变化由用户操作实时变化，再反馈回状态，这样既可以享受状态驱动视图带来的便利性，又不丢失直接操作DOM的愉悦性。

结语

jQuery作为视图驱动库，本身只考虑视图驱动问题，不像react，声称的是视图库，却干着一整套框架的事。我们以jquery作为底层视图驱动，在上面去搭建区别于/借鉴于react等的框架，可以实现非常多有意思的东西。比如，我们可以结合rxjs和jquery，创建一个流式的视图驱动框架。虽然它已经有10多年的年龄，但是，它依然在web领域处于王者的高度，试想一下，DOM领域还有什么是jquery实现不了而非得用vue或react的呢？

本文首发于前端黑洞网，csdn同步跟新