Road to the future——僞MVVM庫Q.js

模仿Vuejs的僞MVVM庫，下面是使用說明 
項目地址：https://github.com/miniflycn/Q.js

 

相關項目：https://github.com/miniflycn/Ques

一個簡單例子

模版：

<a href="javascript:void(0)" q-text="msg"></a>

腳本：

var vm = new Q({ el: '#demo', data: { msg: 'hello' } });

則會展現：

<a href="javascript:void(0)">hello</a>

當使用.data方法修改data時候會觸發節點數據修改：

vm.$set('msg', '你好');

則會展現：

<a href="javascript:void(0)">你好</a>

TodoMVC例子

咱們用Q.js實現了一個TodoMVC的例子： 
https://github.com/miniflycn/Q.js/tree/master/examples/todomvc

相比jQuery的實現，分層較爲清晰，而比BackBone的實現要簡單。

固然咱們與Vuejs的實現很是像，咳咳。

基本概念

directive

告知libaray如何對節點進行操做，遵循Vuejs寫法：

<element prefix-directiveId="[argument:] expression [| filters...]"> </element>

簡單例子：

<div q-text="message"></div>

這裏表示message對應的數據，用text指令進行操做，text指令是在該節點塞入文字。

自定義directive

舉一個咱們在todoMVC的例子：

<input q-todo-focus="editing" />

則表示editing對應的數據變化時執行todo-focus指令，看看咱們todo-focus指令怎麼寫的：

directives: {
    'todo-focus': function (value) { // 若是editing的值爲false，則不處理 if (!value) { return; } // 爲true則，對該節點focus()一下 var el = this.el; setTimeout(function () { el.focus(); }, 0); } }

通用directive

目前只提供了極少的通用directive，將來可拓展

• show - 顯示與否
• class - 是否添加class
• value - 改變值
• text - 插入文本
• repeat - 重複節點
• on - 事件綁定
• model - 雙向綁定（只支持input、textarea）
• vm - 建立子VM

filter

若是設置了filter，則綁定的數據會通過filter才執行對應的directive，這是咱們能夠在塞入數據前作輸出處理，或事件觸發前作數據處理。

模版：

<input q-model="msg" q-on="keyup: showMsg | key enter" />

key是其中一個通用filter，基本實現是：

var keyCodes = { enter : 13, tab : 9, 'delete' : 46, up : 38, left : 37, right : 39, down : 40, esc : 27 }; /** * A special filter that takes a handler function, * wraps it so it only gets triggered on specific * keypresses. v-on only. * * @param {String} key */ function key(handler, key) { if (!handler) return; var code = keyCodes[key]; if (!code) { code = parseInt(key, 10); } return function (e) { if (e.keyCode === code) { return handler.call(this, e); } }; }

則，當keyup發生，keyCode爲13(即enter)時候，纔會觸發showMsg方法。

method

特製on指令會調用的方法，例如：上面講到的showMsg。

設置方法：

var vm = new Q({ el: '#demo', data: { msg: 'hello' }, methods: { showMsg: function () { alert(this.msg); } } });

則那個input框會在初始化時自動設值爲hello，當改變時候msg值也會改變，當按下回車鍵，則會觸發showMsg方法打印值。

data

大部分操做都和對象與數組的操做相同，只有當設置值的時候須要使用.$set方法，由於咱們沒有defineProperty的支持。

• 獲得一個msg的值：

vm.msg

• 設置msg的值

vm.$set('msg', obj);

• 對於數組可以使用大部分數組方法，目前已經支持了：push、pop、unshift、shift、indexOf、splice、forEach、filter

性能如何

感謝@ouvenzhang提供的測試數據，具體參考https://github.com/miniflycn/Q.js/tree/master/benchmarks

用例	Q.js	jQuery	Native
單節點html操做OPS	82,652 ops/sec ±2.32%	46,526 ops/sec ±5.45%	1,101,462 ops/sec ±1.06%
多節點html操做OPS	23,641 ops/sec ±0.58%	4,416 ops/sec ±7.76%	33,434 ops/sec ±1.37%
1000個節點repeat渲染操做OPS	13.54 ops/sec ±2.32%	31.67 ops/sec ±5.45%	前一個數據爲一般的模版引擎