Catfan喵友首个开源项目——Qatrix，轻量级高性能的JavaScript架构

[catfan]

相信在v2ex的大部分同学都应该听过Catfan喵友（ http://catfan.me ）吧，也相信有不少人也注册一个账户，甚至是忠实用户(╰(￣ω￣) 出来打声招呼吧~喵）

Qatrix是继旗下的Mu6（http://mu6.me）社交音乐分享网站后，在Catfan两周年之际发布的一个开源新项目。是在Catfan开发过程中经过知识不断积累和研究，独立开源出来的项目。

Qatrix Javascript架构有如下的特点：

硬件加速的动画效果（Hardware Accelerated Animation）
基于CSS3 transition的功能，使用Native code处理动画效果，并且具有启用硬件加速的特性，动画效果将比以往其它的JavaScript架构里单纯基于JavaScript的更加流畅。

高性能代码（High performance code）
专门为性能做前提为优化和设计，尽可能使用Native code进行处理，让其运行更有效率。

易学易用（Easy-to-learn）
function的命名多数与jQuery类似，简单易记，并且容易理解，不需要学习太多新的概念，便能快速入门。

麻雀虽小五脏俱全（Incredible size）
包含60+个实用功能，却只有5KB的文件大小（gzipped）。不会明显增加载入的时间。

协议：最宽松的MIT license
兼容性：IE6-10, Chrome, Firefox2+, Safari3+, Opera9+

Qatrix之前已经经过与国外的开发者讨论多次后，经过多个版本的修正和优化，目前的版本为0.8.9，基本功能已经定下，剩下的就是BUG的修复。下一版本将会比较公开地发布。

目前Qatrix一直作为Catfan和Mu6的JavaScript核心架构存在，更新和修正速度都会很及时的，可以放心。

相关链接，欢迎关注和讨论：）
官方网站： http://qatrix.com
GitHub： https://github.com/qatrix/Qatrix
性能测试： http://qatrix.com/benchmark

PS：还是借此机会简单公开说明一下，虽然经常到处解释，但总是有误解：Catfan喵友并不是什么轻博客，类Tumblr的东东，两者的基本设计概念与操作方式差别本来就很大！它就是一个博客社交网站，简单点说就是社交网站，就这样，不要搞错了：）

[yyycat]

惊现喵大！！ > <
下载学习～～

[catfan]

Er...如何发链接？

[mufeng]

过去研究下这个库

[icyflash]

赞，体积很小，应该适合mobile

[catfan]

帮忙修正一下链接吧，现在不能编辑了...

[Livid]

@catfan 嗯，autolink 需要有空格。修改好了。

非常开心能在这里见到喵大。

[qiuai]

欢迎喵大光临...

[atshow]

不错

[airyland]

支持一下

[fline]

！！！喵大好！

[sobigfish]

没有搜到touch。。。应该不适合mobile

[tamamaxox]

硬生生地霸占了$...

[catfan]

@Livid 嗯？原来L大也知道我？

@sobigfish 对于mobile，只需要添加自己touchstart，touchmove事件便可。不过更有可能的是会另开一个分支，专门针对mobile作优化。

@tamamaxox 只会在$没有使用的情况下才会定义$的功能，可以兼容其它framework。不过实际上同时使用两个framework的情况很少。

[gujiaxi]

哇嗷～喵大也来V2EX了……

[shawiz]

恭喜！有没有放上 HackerNews?

另外，size 的确很小。不知道有没有和功能类似的 zepto.js benchmark?

[catfan]

0.9的beta已经在Github放出...待完善修复后，将会作为首个稳定版发布。

[tamamaxox]

我好吃惊啊 $明显就应该调用$select()的方法啦,另外好多框架需要调用部分jquery的方法,例如backbone调用了$ajax;

如果Qatrix能某程度上兼容一下写法,我觉得还是有好处的;

这个身段好吸引人啊~亲

[catfan]

@tamamaxox 每次DOM操作都调用复杂的选择器只会降低效率和性能。既然是一个相对独立的framework，那就不太可能完全兼容其它framework的写法，否则就没有其存在价值。不过可以说，如果学过jQuery的同学们会很易上手，只需做一些简单的概念调整就可以了。

单是最常用jQuery的$('#id')就比单纯的Qatrix里的$('id')慢了10倍有多。

[zythum]

感觉不错。下次做东西就用这个使使。
话说$pos这个函数只是修改top,left值的话感觉就木有意义了。换成全局的pos应该会更好。

[underone]

喵！

[kernel1983]

说说代码风格吧, 一会用tab, 一会用空格

[catfan]

@zythum 也许可以把你的想法在Github上fork一下，有一定贡献的话，日后会在网站中列出来的：）

[tamamaxox]

@catfan 不是有一个$id吗,怎么说每次都操作呢.而且,做一个正则就可以分类了.

[liyandong]

@Livid 貌似Http、hTtp另类连接识别还没处理好吧^_^

[zythum]

@tamamaxox 正则匹配还是很慢的。你看如果用了正则是不是应该很合情合理的吧css选择器功能也坐上...

[tamamaxox]

@zythum 我看见文档里面就有选择器了

[tamamaxox]

其实我的感觉就是,格式能够尽可能的相同的话,人家把代码移植到这个框架上面,也能方便一点吧.毕竟用这个框架讨的是轻量.不是格式.

[panlilu]

ie6!哇...就冲这个..我要试试!

[bigzhu]

除了比 jquery 快,还有什么特点?有没有现成的 UI 库?

[notedit]

@catfan mu6.me 有可以改进的地方，上传音乐后可以立即生成一个链接，而没有必要完全上传完在生成链接

[catfan]

@tamamaxox 每一个framework的设计，概念和写法都不一样，各自有各自的特点，代码不可能全部兼容。

@bigzhu 特点大部分都列出了，当然还包含了一些实用的功能。UI库日后可能会提供。

简单说明Qatrix的选择器：

最简单最快的ID选择器：
$()

集合选择器：
$id()
$class()
$tag()

最慢，但最强大的CSS选择器：
$select()

性能从高至低，基本上能满足大部分元素选择的需求。按需使用便可。

[catfan]

首个稳定版0.9将会在近期出来，目前正在各种加紧修复和改进中。需要用此framework的同学可以先hold一下：）

[leecade]

勇气可嘉

[sunshineg]

赞 +1

[level_225]

$new('div', {
'id' : 'box_wrap',
'className' :'box-popup',
'css' : {
'css': {
'width': '720px',
'height': '240px',
'overflow': 'hidden',
'z-index': '9000',
'position' : 'absolute',
'margin-top' : '-170px',
'margin-left' : '-465px',
''
}
}
});

用 $new 创建带 style 属性的元素感觉有些别扭，要多一层 css 对象

[vivalon]

突然发现我还有账号……貌似好久之前就注册了

[catfan]

现在更新到了0.9.5版本了，此版本优化了更多地方的性能并且进一步缩小文件的体积。推荐大家更新~~

http://qatrix.com/download

[zythum]

感谢喵大。
喵大 下面是使用了之后的一些建议。
1. $event.metaKey 中cmd键一直没有用啊。
2. 还有个意见是$event.key。朱一有个建议是加入一个$event.keyWord之类的。直接返回字母，而不是keyCode感觉会更使用一些。然后是兼容的禁止事件冒泡，禁止浏览器默认行为这些。
3. 时间的delegetedEvent感觉还是需要的。有的话会轻松不少。
4. 然后一些className的add，remove第一个参数是数组啊之类的可有可无有了最好的这些。

感觉qatrix还是不错的，喵大辛苦了。
朱一接下去应该会一直会用下去。虽然现在用qatrix做的一个东西暂时是搁置了。
至少目前还没找到比qatrix更加适合的轻量级的解决方案。

[zythum]

@zythum
还有0.9.5貌似加了挺多改进的。刚才去喵了下。 感谢

[catfan]

@zythum 谢谢您的建议。如果合适的话，日后会在新的版本中添加功能：）

该项目还在不断完善中。

如发现BUG或想提交代码的话，可以直接在GitHub上submit一下：-D

[catfan]

已经更新到0.9.7好几天了，优化了不少东西。

[catfan]

经过努力，现在更新到0.9.8版本了....距离1.0还差一点了..

这次包含的更新都挺重要的，推荐更新一下^ ^

[zythum]

@catfan 辛苦

[catfan]

@zythum 在国内搞开源还真的不好推广....= o=

[ttym7993]

mark,有时间研究下。

[zythum]

@catfan 类似这种基础框架其实不好做。一般公司不会使用。基本就自己写东西玩可以。没有企业帮助不好推广。并且这个框架其实也不适合大项目。并且大的命名空间污染是硬伤。

[reorx]

刚出来的时候就试了一下，做效果确实非常流畅，今天看到帖子就再来顶一下。一点建议，做成默认情况下不将Qatrix中的函数暴露到全局变量的命名空间，而提供一个特殊的方法（比如叫$expose），来手动给windows映射函数，这样就可以让使用者自己选择是使用：$ajax，还是使用：Qatrix.$ajax。

[catfan]

@zythum 主要是讨论不给力...其它国内大公司的开源框架也没有多少人讨论...不过由于目前是全英文，偶尔还是有些国外的开发者贡献一下代码的。

另外，多库共存的问题和解决冲突的方法在教程里面有。

而且，经测试globe function比namespaced function快几乎有8%-10%，复杂调用的差距更大。

再者，只要不命名以$开头的function就可以了（实际上需要这样做的情况也不多）。

[catfan]

@reorx 其实很简单，要么优先载入，如$ajax有问题的话就直接使用Qatrix.$ajax或var Q=Qatrix;Q.$ajax()；要么最后载入，全部统一使用Qatrix的方法。

其实还有一个很实际的问题：究竟在实际使用中，自行把function命名成以$开头，并与框架冲突的可能性有多大？

另外，其实目前只需要加一些代码，Qatrix便能与多个框架共存了（具体方法见教程）。

[reorx]

@catfan 我估计蛮大的。对我自己而言，除了使用Backbone之类可以用OO思想来组织代码的框架的时候，我总是会把jquery选择到的dom对象存储在以`$`开头的变量上。不过现在逐渐在改成把`$`放在末尾的奇怪命名方式了 -。-

[darcy]

看首页的示例，好奇怪的语法。

[catfan]

@darcy 第一个示例只需理解成一个function wrap就可以了，操作所有匹配的元素。其实更多时候是用到第二个示例，也就是$style.set(元素, 参数1, 参数2)...这样，与其它框架无疑。

[catfan]

目前已经推出到0.9.9的版本了，里面改进了不少地方，而且还研究出一个比较特别的hack，有利于进一步缩小文件的体积。

[manihome]

喵友过来赞一个

[catfan]

挖坟一下。目前有重大更新了，虽然还不是正式版，但是最新版里面把所有与元素有关的功能都提供了把元素集合作为参数的支持。大大方便了对多个元素的同时操作的可能。

譬如，我要让id=aa和id=bb的元素同时隐藏，只需要：
$hide([
$('aa'),
$('bb')
]);

同时添加className：
$className.add([
$('aa'),
$('bb')
], 'someClassName');

当然，也可以使用通过Qatrix自带的选择器所获取的集合
$className.add( $select('div span'), 'someClassName' );

另外，Qatrix添加了$toggle的支持，由于其内置动画引擎是基于CSS3（具备硬件加速特性），效果会比jQuery流畅不少。使用方法也很简单：
// 0.5毫秒内（可选）显示/隐藏id为aa的元素
$toggle( $('aa'), 500 );

最新源代码可以从Github中获取（官网还是旧版的）：
https://github.com/qatrix/Qatrix

目前也可以使用官网提供的JS压缩器来获取压缩版，压缩率比packer高不少（当然，其它JavaScript代码也可以压缩）：
http://qatrix.com/compressor

[luckyduck]

@catfan 确实是一个挺好的framework，lightweight，high performance都很吸引人，但我想很难推广起来的主要原因还是缺少像jQuery那么丰富的plugin吧。selectors和ajax这些功能丝毫不比jQuery差，可是要想实现datepicker，colorpicker，slider，image crop，modal，tip，ajax uploader以及最近挺流行的瀑布流布局这些功能，有不少国内用户第一反应就是去搜搜看有什么插件可以直接下了就能用，这样jQuery就为他们提供了很多的选择。所以我觉得Qatrix的核心功能其实已经很完善了，再把一些细节和BUG处理好，发个1.0版，然后作者就可以去围绕Qatrix开发一些常用的UI组件了，这样既满足了用户需求，也起到一个抛砖引玉的作用，吸引更多开发者来为Qatrix构建生态系统。毕竟如果持续不断的往Qatrix主干里面添加新功能，只会让它重走其它framework的老路，变得越来越臃肿。另外twitter的bootstrap我觉得也是一个很值得借鉴的发展路线。

[zythum]

@luckyduck Qatrix是作为一个最基础类的实现。里面貌似根本没有要去实现plugin的意思。

[catfan]

@luckyduck 其实你所提及到的plugin所需要的功能，Qatrix都基本上包含了（其实都是对dom的操作而已）。我想目前Qatrix已经可以用它来开发各种的应用和plugin等，看大家自由的发挥了。

日后预计还会实现多几个功能，但会尽量保持压缩后6KB-7KB以下的体积。

jQuery重点在于dom操作，Qatrix则是注重日常开发中所涉及到的，各取所需吧。

[catfan]

@zythum 要不你写几个plugin？我会考虑把你的名字列在contributors list里咯：）

[zythum]

@catfan = =. 真个其实真可以哈。

[zythum]

喵大的最新代码更新是加了一堆的mapcall...

[catfan]

@zythum 这是实现新功能的关键啊。不过其实从0.9.9到目前最新版本改进的地方也非常多..