JQuery used to be king, times have changed, but times are still changing, and jQuery is still king. React compared to jquery, don’t you find that all the bells and whistles in jquery make you look like a dumb elephant? Isn’t the react ecosystem so large, and the coroutines proposed by React itself, all because react is slow? Package a React-DOM inside the project, oh, let the interface open and fly for a while. All in all, for all the innovation on the modern front end, there has been plenty of pain.

Let’s go back and flick the dust off jQuery, and look, it’s still glowing. React makes us love it, not just because it’s engineered, but purely view-driven, because it introduces the Virtual DOM, a killer feature that allows interface updates to be made in smaller areas, resulting in better performance when updating the interface. However, prior to Act16, the so-called better performance in the official demo, aka Kakaka, resulted in Fiber. Jquery will always manipulate the DOM directly, so it’s as fast as you can manipulate the DOM directly, and jquery packages are only tens of kilobytes. So why can’t jquery absorb the react innovation?

Introduction to the jQuery

JQuery specifically refers to jQuery Core, as well as jQuery UI and other suites, which are out of our consideration. Using jQuery is very simple and doesn’t require any build tools:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
Copy the code

The core of jQuery design is to encapsulate DOM manipulation as a simpler interface, and to support it, it also provides many auxiliary modules. When manipulating the DOM, it emphasizes an abstract collection operation, such as:

<script>
$(document).ready(() = > {
  const $div = $('div') // $div is an abstract collection of selected DOM nodes
  $div.css({ margin: '10px' }) // Do the same for all elements in the collection
})
</script>
Copy the code

A $contains all the core concepts of jQuery.

You can get started quickly by reading the jQuery API documentation. You don’t need a lot of other tools. You might think it has too many apis to remember, but here’s a way to categorize them:

  • Selector: : Focus: Selected :hidden…
  • Select DOM nodes: $, find, eq…
  • Identify DOM collections: each…
  • Manipulating DOM nodes: HTML, appendTo, prependTo…
  • Event related: on, off, trigger…
  • Ajax: ajax, get, post …
  • Deferered
  • CSS: css, addClass …
  • Animation effects: fadeIn, fadeOut, slideDown…
  • Handler: extend…

Basically, you can touch all the apis, and its API documentation page also provides this classification, you can quickly find the API you need.

Modern programming

With jQuery, we can manipulate the DOM directly and quickly, but because jQuery doesn’t include the idea of data-driven views, we can’t run the familiar routines of modern programming. In this case, can we use data-driven views in jQuery? Fortunately, jQuery has a mature plug-in system, and with this plug-in system, there are countless jQuery plug-ins on the market that achieve all kinds of great effects. To enable modern programming, we introduce the JQVM plug-in:

<script src="https://unpkg.com/jquery/dist/jquery.min.js"></script>
<script src="https://unpkg.com/jqvm/dist/jqvm.min.js"></script>
Copy the code

Next, we can use this plug-in to complete the development of data-driven views:

<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>
Copy the code

You see, in the modern programming paradigm, jquery, like Vue, has state-driven view updates. Also, unlike Vue React, jquery can manipulate the DOM directly. Vue and React do not support DOM manipulation, so we lose the special effects of DOM manipulation in some scenarios, such as drag-and-drop scenarios. With jquery, it’s completely integrated with the native 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()Copy the code

In other words, the changes in the state that drive the view change are complementary to the changes in the view itself. The changes in the view change in real time by the user operation, and then feedback back to the state. In this way, you can enjoy the convenience brought by the state-driven view without losing the pleasure of directly manipulating the DOM.

conclusion

JQuery, as a view-driven library, is a view-driven library, unlike React, which claims to be a view-driven library but does a whole framework thing. We use jquery as the bottom view driver to build a framework that is different from/borrowed from React, etc., which can achieve a lot of interesting things. For example, we can combine RXJS with jquery to create a streaming view-driven framework. Even though it’s over 10 years old, it’s still the king of the Web. What can’t jquery do in the DOM without using Vue or React?