You must have used Vue, don’t guess, I can read your thoughts across the screen right now. However, have you ever thought of writing code in jquery that is as simple and responsive as Vue? Show me the code:

<template id="app">
  <span>{{name}}</span>
  <span>{{age}}</span>
  <button jq-on="click:grow">Grow</button>
</template>

<script>
  $('#app')
      .vm({ name: 'tom'.age: 10 })
      .fn('grow'.state= > state.age ++)
      .mount()
</script>
Copy the code

Is there a familiar smell? And this, with a few hundred lines of jquery plug-in. You just need to add the corresponding plugin file to your page:

<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

Compile? Build? None, it’s just a jquery plug-in. Of course, you can also do this using build systems, such as:

import { useJQuery } from 'jqvm'
import jQuery from 'jquery'

const $ = useJQuery(jQuery)
const view = $(` 
       `)
    .vm({ name: 'tom'.age: 10 })
    .fn('grow'.state= > state.age ++)
    
view.mount('#app')
Copy the code

As with vUE’s responsive approach, you just need to change state directly to make the interface render again.

Command control? No problem:

<div jq-if="age > 10">I am older than 10.</div>
Copy the code

Cycle? This one’s a little tricky, but ok:

<div jq-repeat="value,index in data traceby value.id">
  <span>{{index + 1}}</span>
  <span>{{value.name}}</span>
  <span>{{value.time}}</span>
</div>
Copy the code

Two-way binding? Well, there is:

<input jq-bind="age" />
Copy the code

Components? This is slightly less good, barely enough:

<template id="box">
  <div>width: {{width}}</div>
  <div>height: {{height}}</div>
</template>

<template id="app">
  <my-box></my-box>
</template>

<script>
  const box = $('#box').vm({ width: 100.height: 100 })
  const app = $('#app').vm({})
      .component('my-box', box) // Register box as a component
</script>
Copy the code

Does it smell a little vue? But 1.2 million times, it’s jquery, it’s familiar, it’s like an arrow.

As for how it does this, you’ve probably heard of how Vue intercepts data with Object.defineProperty. JQvm does the same, but it adds $set,$del,$get methods to state. State.$set(‘new_prop’, ‘value’)

Online small demo address unpkg.com/[email protected]/… And finally put the warehouse address github.com/tangshuang/… If you love programming, you will receive a star.

About the author front-end engineer a public id: WWwTangshuangnet