Road to the future——伪MVVM库Q.js

  • 时间:
  • 浏览:1
  • 来源:大发快3_快3电脑版_大发快3电脑版

Road to the future——伪MVVM库Q.js

2015-01-28 19:11  Justany_WhiteSnow  阅读(...)  评论()  编辑  收藏
<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>

基本概念

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) {
        

通用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.$set('msg', obj);
  • 对于数组可使用大次责数组土依据,目前过后 支持了:pushpopunshiftshiftindexOfspliceforEachfilter

性能怎么里能

感谢@ouvenzhang提供的测试数据,具体参考https://github.com/miniflycn/Q.js/tree/master/benchmarks

用例Q.jsjQueryNative
单节点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%
30个节点repeat渲染操作OPS 13.54 ops/sec ±2.32% 31.67 ops/sec ±5.45% 前另一有一个多数据为通常的模版引擎
  • 分类 Javascript
  •