模仿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);
  • 对于数组可使用大部分数组方法,目前已经支持了:pushpopunshiftshiftindexOfspliceforEachfilter

性能如何

感谢@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% 前一个数据为通常的模版引擎

Road to the future——伪MVVM库Q.js的更多相关文章

  1. 自己动手实现一个MVVM库

    我们知道的,常见的数据绑定的实现方法 1.数据劫持(vue):通过Object.defineProperty() 去劫持数据每个属性对应的getter和setter2.脏值检测(angular):通过 ...

  2. 借助Q.js学习javascript异步编程。

    金字塔式 //add1 function step1(n, callback) { setTimeout(function(){ callback.call(null, n + 1); }, 100) ...

  3. 爬虫实战:汽车之家配置页面 破解伪元素和混淆JS

    本篇介绍如何破解汽车之家配置页面的伪元素和混淆的JS. ** 温馨提示:如需转载本文,请注明内容出处.** 本文链接:https://www.cnblogs.com/grom/p/9242156.ht ...

  4. KnockoutJS---一个极其优秀的MVVM模型的js框架

    相信对于DotNet平台的开发人员来讲,MVVM模式已经不再是个陌生的词汇了吧.而我们今天介绍的Knockout JS, 则是一个MVVM模式的JS框架,官方网址:http://knockoutjs. ...

  5. 移动端手势库Hammer.js学习

    感觉移动端原生支持的 touch.tap.swipe 几个事件好像还不够用,某些时候还会用到诸如缩放.长按等其他功能. 近日学习了一个手势库 Hammer.js,它是一个轻量级的触屏设备手势库,能识别 ...

  6. 网页3D效果库Three.js初窥

    网页3D效果库Three.js初窥 背景 一直想研究下web页面的3D效果,最后选择了一个比较的成熟的框架Three.js下手 ThreeJs官网 ThreeJs-github; 接下来我会陆续翻译 ...

  7. q.js实现nodejs顺序调用

    nodejs的异步调用有时候是最让人头疼的,如何能是一些代码顺序的执行呢,这里和大家分享nodejs的promise 什么是promise promise一个标准,它描述了异步调用的返回结果,包括正确 ...

  8. 深入解析Backbone.js框架的依赖库Underscore.js的作用

    这篇文章主要介绍了深入解析Backbone.js框架的依赖库Underscore.js的作用,用过Node.js的朋友对Underscore一定不会陌生:)需要的朋友可以参考下 backbone必须依 ...

  9. MVC、MVP、MVVM、Angular.js、Knockout.js、Backbone.js、React.js、Ember.js、Avalon.js、Vue.js 概念摘录

    注:文章内容都是摘录性文字,自己阅读的一些笔记,方便日后查看. MVC MVC(Model-View-Controller),M 是指业务模型,V 是指用户界面,C 则是控制器,使用 MVC 的目的是 ...

随机推荐

  1. grunt-replace和grunt-include-replace问题

    关于最近在做的项目要用到的grunt-replace和grunt-include-replace,百度上很多将grunt的压缩合并的教程,可是很少讲关于这两个插件的教程,不过官网上有教程,我就是按照官 ...

  2. objective-c 创建工程/编译/运行程序

    // First program example #import <Foundation/Foundation.h> int main (int argc, const char * ar ...

  3. C++注册表操作

    数据结构 注册表由键(或称"项").子键(子项)和值项构成.一个键就是分支中的一个文件夹,而子键就是这个文件夹中的子文件夹,子键同样是一个键.一个值项则是一个键的当前定义,由名称. ...

  4. MySql连接JDBC数据库------借鉴的红客联盟的

    首先安装MySQL数据库,我安装的是MySQL5.5,具体安装步骤这里就不介绍了.需要提醒的是,如果安装进程一直停在start service那里,无法继续进行下去的话,请参照我的博文<安装My ...

  5. Mac 快捷键整理

    Mac 快捷键整理 文本编辑 适用于文本编辑器,浏览器等 跳到页首 cmd + ↑ 类似windows下的 ctrl + home 跳到页尾 cmd + ↓ 类似windows下的 ctrl + en ...

  6. [WinAPI] API 12 [获取程序所在的目录、程序模块路径,获取和设置当前目录]

    Windows系统提供一组API实现对程序运行时相关目录的获取和设置.用户可以使用GetCurrentDirectory和SetCurrentDirectory获取程序的当前目录,获取模块的路径使用G ...

  7. [ACM_图论] The Perfect Stall 完美的牛栏(匈牙利算法、最大二分匹配)

    描述 农夫约翰上个星期刚刚建好了他的新牛棚,他使用了最新的挤奶技术.不幸的是,由于工程问题,每个牛栏都不一样.第一个星期,农夫约翰随便地让奶牛们进入牛栏,但是问题很快地显露出来:每头奶牛都只愿意在她们 ...

  8. [C++] socket -9[匿名管道]

    ::怎么弄都不能读取信息....先把代码放着.... #include<windows.h> #include<stdio.h> int main() { HANDLE rea ...

  9. django orm总结

    目录1.1.1 生成查询1.1.2 创建对象1.1.3 保存修改的对象1.1.4 保存 ForeignKey 和 ManyToManyField 字段1.1.5 检索对象1.1.6 检索所有的对象1. ...

  10. netstat常见参数

    -a (all)显示所有选项,默认不显示LISTEN相关-t (tcp)仅显示tcp相关选项-u (udp)仅显示udp相关选项-n 拒绝显示别名,能显示数字的全部转化成数字.-l 仅列出有在 Lis ...