Road to the future--pseudo-MVVM library q.js

Imitate Vuejs's 伪MVVM library, here is the instructions for use
Project Address: Https://github.com/miniflycn/Q.js

Related projects: Https://github.com/miniflycn/Ques

A simple example

Template:

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

Script:

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

Will show you:

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

When you modify data using the. Data method, the node data modification is triggered:

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

Will show you:

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

TODOMVC Example

We use Q.js to implement a TODOMVC example:
Https://github.com/miniflycn/Q.js/tree/master/examples/todomvc

Compared with the implementation of jquery, the layering is clearer, and is simpler than the implementation of backbone.

Of course we are very much like the vuejs, cough.

Basic concept Directive

Tells libaray how to operate the node, following the Vuejs notation:

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

Simple example:

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

The corresponding data is represented here, and the instruction message is used to text plug the text text into the node.

Custom directive

To give an example of our TODOMVC:

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

The editing corresponding data changes when executing todo-focus instructions to see todo-focus How our instructions are written:

directives: {    ‘todo-focus‘: function (value) {        // 如果editing的值为false，则不处理 if (!value) { return; } // 为true则，对该节点focus()一下 var el = this.el; setTimeout(function () { el.focus(); }, 0); }}

General directive

Currently only provides a very small number of common directive , future can expand

• Show-Display or not
• Class-whether to add class
• Value-Change values
• Text-Insert Literal
• Repeat-repeating nodes
• On-Event binding
• Model-bidirectional binding (input, textarea only)
• VMS-Creating sub-VMS

Filter

If set filter , then the bound data will go through the filter corresponding directive , which we can do before the data is plugged into the output processing, or before the event triggered data processing.

Template:

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

keyis one of the general filter, the basic implementation is:

var keycodes = {Enter:The tab:9,' Delete ':46, up: 38, left: 37, right: 39, down: 40, ESC: 27};/** * A special filter that takes a handler function, * wraps It's it only gets triggered on specific * key Presses. 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);}};}       

The ShowMsg method is triggered when keyup occurs and KeyCode is 13 (that is, enter).

Method

ona method that a specially crafted instruction invokes, such as the showmsg mentioned above.

Setup method:

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

The input box will automatically set the value to Hello when it is initialized, and the value will change when it is changed msg , and when pressed 回车键 , it will trigger the ShowMsg method to print the value.

Data

Most operations are identical to those of an array, and only if you set the value, you need to use the .$set method because we do not have defineproperty support.

• Get the value of a msg:

vm.msg

• Set the value of MSG

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

• For arrays, you can use most array methods, which currently support:,,,,,,, push pop unshift shift indexOf splice forEachfilter

How Performance

Thank @ouvenzhang for the test data provided, specific reference Https://github.com/miniflycn/Q.js/tree/master/benchmarks

Use Cases	Q.js	JQuery	Native
Single-node HTML operation OPS	82,652 ops/sec±2.32%	46,526 ops/sec±5.45%	1,101,462 ops/sec±1.06%
Multi-node HTML operation OPS	23,641 ops/sec±0.58%	4,416 ops/sec±7.76%	33,434 ops/sec±1.37%
1000 nodes repeat rendering operations Ops	13.54 ops/sec±2.32%	31.67 ops/sec±5.45%	The previous data is the usual template engine

Road to the future--pseudo-MVVM library q.js