簡介

一個簡單的帶有雙向繫結的 MVVM 實現.

例子

使用

新建一個 ViewModel 物件, 引數分別為 DOM 元素以及繫結的資料即可.

指令

本 MVVM 的指令使用 data 資料, 即 data-html = "text" 表示這個 DOM 元素的 innerHTMl 為 model 中的 text 屬性.

對某些指令還可以新增引數, 比如 data-on="reverse:click", 表示 DOM 元素新增 click 事件, 處理函式為 model 中的 reverse 屬性.

  • value: 可以在 input 中使用, 只對 checkbox 進行特殊處理
  • text, html: 分別修改 innerText 和 innerHTML
  • show: 控制指定元素顯示與否
  • each: 迴圈 DOM 元素, 每個元素繫結新的 ViewModel, 通過 $index 可以獲取當前索引, $root 表示根 ViewModel 的屬性
  • on: 繫結事件,
  • *: 繫結特定屬性

參考

本實現主要參考 rivets.js 的 es6 分支, 其中 Observer 類是參考 adapter.js 實現.

Binding 就是 bindings.js 對應的簡化, 相當於其他 MVVM 中指令, ViewModel 對應 view.js.

PS: 由於雙向繫結只是簡單的實現, 因此指令中的值只能是 Model 的屬性

下面的程式碼採用 es6 實現, 如果想要本地執行的話, 請 clone git@github.com:445141126/mvvm.git, 然後執行 npm install 安裝依賴, 最後 npm run dev 開啟開發伺服器, 瀏覽器中開啟 http://127.0.0.1:8080/

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>MVVM</title>
  6. </head>
  7. <body>
  8.     <div id="vm">
  9.         設定style: <input type="text" data-value="text" data-*="text: style">
  10.         <br/>
  11.         顯示: <input type="checkbox" data-value="show">
  12.         <br/>
  13.         style: <span data-show="show" data-html="text"></span>
  14.         <br/>
  15.         <button data-on="reverse: click">reverse</button>
  16.     </div>
  17.     <script src="bundle.js"></script>
  18. </body>
  19. </html>
  1. import _ from 'lodash'
  3. function defined(obj) {
  4.     return !_.isUndefined(obj) && !_.isNull(obj)
  5. }
  7. class Observer {
  8.     constructor(obj, key, cb) {
  9.         this.obj = obj
  10.         this.key = key
  11.         this.cb = cb
  12.         this.obj.$$callbacks = this.obj.$$callbacks || {}
  13.         this.obj.$$callbacks[this.key] = this.obj.$$callbacks[this.key] || []
  15.         this.observe()
  16.     }
  18.     observe() {
  19.         const observer = this
  20.         const obj = observer.obj
  21.         const key = observer.key
  22.         const callbacks = obj.$$callbacks[key]
  23.         let value = obj[key]
  25.         const desc = Object.getOwnPropertyDescriptor(obj, key)
  26.         if(!(desc && (desc.get || desc.set))) {
  27.             Object.defineProperty(obj, key, {
  28.                 get() {
  29.                     return value
  30.                 },
  31.                 set(newValue) {
  32.                     if(value !== newValue) {
  33.                         value = newValue
  35.                         callbacks.forEach((cb) => {
  36.                             cb()
  37.                         })
  38.                     }
  39.                 }
  40.             })
  41.         }
  42.         if(callbacks.indexOf(observer.cb) === -1) {
  43.             callbacks.push(observer.cb)
  44.         }
  45.     }
  47.     unobserve() {
  48.         if(defined(this.obj.$$callbacks[this.key])) {
  49.             const index = this.obj.$$callbacks[this.key].indexOf(this.cb)
  50.             this.obj.$$callbacks[this.key].splice(index, 1)
  51.         }
  52.     }
  54.     get value() {
  55.         return this.obj[this.key]
  56.     }
  58.     set value(newValue) {
  59.         this.obj[this.key] = newValue
  60.     }
  61. }
  63. class Binding {
  64.     constructor(vm, el, key, binder, type) {
  65.         this.vm = vm
  66.         this.el = el
  67.         this.key = key
  68.         this.binder = binder
  69.         this.type = type
  70.         if(_.isFunction(binder)) {
  71.             this.binder.sync = binder
  72.         }
  74.         this.bind = this.bind.bind(this)
  75.         this.sync = this.sync.bind(this)
  76.         this.update = this.update.bind(this)
  78.         this.parsekey()
  79.         this.observer = new Observer(this.vm.model, this.key, this.sync)
  80.     }
  82.     parsekey() {
  83.         this.args = this.key.split(':').map((k) => k.trim())
  84.         this.key = this.args.shift()
  85.     }
  87.     bind() {
  88.         if(defined(this.binder.bind)) {
  89.             this.binder.bind.call(this, this.el)
  90.         }
  91.         this.sync()
  92.     }
  94.     unbind() {
  95.         if(defined(this.observer)) {
  96.             this.observer.unobserve()
  97.         }
  98.         if(defined(this.binder.unbind)) {
  99.             this.binder.unbind(this.this.el)
  100.         }
  101.     }
  103.     sync() {
  104.         if(defined(this.observer) && _.isFunction(this.binder.sync)) {
  105.             this.binder.sync.call(this, this.el, this.observer.value)
  106.         }
  107.     }
  109.     update() {
  110.         if(defined(this.observer) && _.isFunction(this.binder.value)) {
  111.             this.observer.value = this.binder.value.call(this, this.el)
  112.         }
  113.     }
  114. }
  116. class ViewModel {
  117.     constructor(el, model) {
  118.         this.el = el
  119.         this.model = model
  120.         this.bindings = []
  122.         this.compile(this.el)
  124.         this.bind()
  125.     }
  127.     compile(el) {
  129.         let block = false
  131.         if(el.nodeType !== 1) {
  132.             return
  133.         }
  135.         const dataset = el.dataset
  136.         for(let data in dataset) {
  137.             let binder = ViewModel.binders[data]
  138.             let key = dataset[data]
  140.             if(binder === undefined) {
  141.                 binder = ViewModel.binders['*']
  142.             }
  144.             if(defined(binder)) {
  145.                 this.bindings.push(new Binding(this, el, key, binder))
  146.             }
  147.         }
  149.         if(!block) {
  150.             el.childNodes.forEach((childEl) => {
  151.                 this.compile(childEl)
  152.             })
  153.         }
  154.     }
  156.     bind() {
  157.         this.bindings.sort((a, b) => {
  158.             let aPriority = defined(a.binder) ? (a.binder.priority || 0) : 0
  159.             let bPriority = defined(b.binder) ? (b.binder.priority || 0) : 0
  160.             return bPriority - aPriority
  161.         })
  162.         this.bindings.forEach(binding => {
  163.             binding.bind()
  164.         })
  165.     }
  167.     unbind() {
  168.         this.bindins.forEach(binding => {
  169.             binding.unbind()
  170.         })
  171.     }
  172. }
  174. ViewModel.binders = {
  175.     value: {
  176.         bind(el) {
  177.             el.addEventListener('change', this.update)
  178.         },
  180.         sync(el, value) {
  181.             if(el.type === 'checkbox') {
  182.                 el.checked = !!value
  183.             } else {
  184.                 el.value = value
  185.             }
  186.         },
  188.         value(el) {
  189.             if(el.type === 'checkbox') {
  190.                 return el.checked
  191.             } else {
  192.                 return el.value
  193.             }
  194.         }
  195.     },
  197.     html: {
  198.         sync(el, value) {
  199.             el.innerHTML = value
  200.         }
  201.     },
  203.     show: {
  204.         priority: 2000,
  205.         sync(el, value) {
  206.             el.style.display = value ? '' : 'none'
  207.         }
  208.     },
  210.     each: {
  211.         block: true
  212.     },
  214.     on: {
  215.         bind(el) {
  216.             el.addEventListener(this.args[0], () => { this.observer.value() })
  217.         }
  218.     },
  220.     '*': {
  221.         sync(el, value) {
  222.             if(defined(value)) {
  223.                 el.setAttribute(this.args[0], value)
  224.             } else {
  225.                 el.removeAttribute(this.args[0])
  226.             }
  227.         }
  228.     }
  229. }
  231. const obj = {
  232.     text: 'Hello',
  233.     show: false,
  234.     reverse() {
  235.         obj.text = obj.text.split('').reverse().join('')
  236.     }
  237. }
  238. const ob = new Observer(obj, 'a', () => {
  239.     console.log(obj.a)
  240. })
  241. obj.a = 'You should see this in console'
  242. ob.unobserve()
  243. obj.a = 'You should not see this in console'
  245. const vm = new ViewModel(document.getElementById('vm'), obj)