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

相信在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的东东，两者的基本设计概念与操作方式差别本来就很大！它就是一个博客社交网站，简单点说就是社交网站，就这样，不要搞错了：）

catfan

2012-07-07 22:12:18 +08:00

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

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

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

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

catfan

2012-07-07 22:30:38 +08:00

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

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

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

catfan

2012-10-07 20:23:11 +08:00

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

譬如，我要让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

2012-10-07 21:46:11 +08:00

@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我觉得也是一个很值得借鉴的发展路线。

catfan

2012-10-08 00:42:05 +08:00

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

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

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