用jQuery写出vue的味道，这个小插件真猛！

你肯定用过vue，别猜，我隔着屏幕都能读到你此刻的想法。但是，你想过用jquery写出的代码像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>

怎么样有没有一种熟悉的味道？而这，仅仅靠一个几百行的jquery插件。 你只需要在你的页面中引入对应的插件文件：

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

编译？构建？都没有，它只是一个jquery插件。当然，你也可以使用构建系统来做，比如：

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

const $ = useJQuery(jQuery)
const view = $(`
  <template>
      <span>{{name}}</span>
      <span>{{age}}</span>
      <button jq-on="click:grow">Grow</button>
  </template>
`)
    .vm({ name: 'tom', age: 10 })
    .fn('grow', state => state.age ++)
    
view.mount('#app')

和vue的响应式方式一样，你只需要直接修改state就可以让界面重新渲染。

指令控制？没问题的：

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

循环？这个有点难搞，不过也没问题：

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

双向绑定？嗯，有的：

<input jq-bind="age" />

组件？这个稍微没那么好，勉强够用：

<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) // 把box注册为一个组件
</script>

是不是闻着有点vue的味道了？不过你放120万个心，它还是jquery，是你熟悉的味道，撸起来飞快如箭。

至于它怎么做到的，你应该听说过vue用Object.defineProperty拦截数据的原理，jQvm也是一样，不过它给state增加了 $set,$del,$get 方法，比如 state.$set('new_prop', 'value') 就可以了，怎样，简单。

在线小demo地址 unpkg.com/jqvm@3.2.0/… ， 最后放上仓库地址 github.com/tangshuang/… 热爱编程的小伙伴，都会送上一个star。

关于作者
前端工程师一枚
公众号：wwwtangshuangnet