Catfan喵友首个开源项目——Qatrix，轻量级高性能的JavaScript架构
catfan · 2012-04-02 17:35:12 +08:00 · 10559 次点击这是一个创建于 4653 天前的主题，其中的信息可能已经有所发展或是发生改变。
相信在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的东东，两者的基本设计概念与操作方式差别本来就很大！它就是一个博客社交网站，简单点说就是社交网站，就这样，不要搞错了：）
62 条回复 • 1970-01-01 08:00:00 +08:00
 |
1
yyycat 2012-04-02 17:39:50 +08:00
惊现喵大！！ > <
下载学习～～ |
 |
2
catfan OP Er...如何发链接？
|
 |
3
mufeng 2012-04-02 17:45:35 +08:00
过去研究下这个库
|
 |
4
icyflash 2012-04-02 17:48:00 +08:00
赞，体积很小，应该适合mobile
|
|
5
catfan OP 帮忙修正一下链接吧，现在不能编辑了...
|
 |
7
qiuai 2012-04-02 19:58:15 +08:00
欢迎喵大光临...
|
 |
8
atshow 2012-04-02 20:29:51 +08:00
不错
|
 |
9
airyland 2012-04-02 20:33:15 +08:00
支持一下
|
 |
10
fline 2012-04-02 20:39:31 +08:00 via Android
！！！喵大好！
|
 |
11
sobigfish 2012-04-02 21:24:53 +08:00
没有搜到touch。。。应该不适合mobile
|
 |
12
tamamaxox 2012-04-02 22:10:56 +08:00
硬生生地霸占了$...
|
|
13
catfan OP |
 |
14
gujiaxi 2012-04-03 14:48:46 +08:00
哇嗷～喵大也来V2EX了……
|
 |
15
shawiz 2012-04-03 15:34:33 +08:00
恭喜！有没有放上 HackerNews?
另外，size 的确很小。不知道有没有和功能类似的 zepto.js benchmark? |
|
16
catfan OP 0.9的beta已经在Github放出...待完善修复后，将会作为首个稳定版发布。
|
|
17
tamamaxox 2012-04-04 01:32:43 +08:00
我好吃惊啊 $明显就应该调用$select()的方法啦,另外好多框架需要调用部分jquery的方法,例如backbone调用了$ajax;
如果Qatrix能某程度上兼容一下写法,我觉得还是有好处的; 这个身段好吸引人啊~亲 |
|
18
catfan OP @tamamaxox 每次DOM操作都调用复杂的选择器只会降低效率和性能。既然是一个相对独立的framework，那就不太可能完全兼容其它framework的写法，否则就没有其存在价值。不过可以说，如果学过jQuery的同学们会很易上手，只需做一些简单的概念调整就可以了。
单是最常用jQuery的$('#id')就比单纯的Qatrix里的$('id')慢了10倍有多。 |
 |
19
zythum 2012-04-05 17:12:22 +08:00
感觉不错。下次做东西就用这个使使。
话说$pos这个函数只是修改top,left值的话感觉就木有意义了。换成全局的pos应该会更好。 |
 |
20
underone 2012-04-05 17:40:35 +08:00
喵！
|
 |
21
kernel1983 2012-04-05 18:13:26 +08:00
说说代码风格吧, 一会用tab, 一会用空格
|
|
27
tamamaxox 2012-04-05 22:16:06 +08:00
其实我的感觉就是,格式能够尽可能的相同的话,人家把代码移植到这个框架上面,也能方便一点吧.毕竟用这个框架讨的是轻量.不是格式.
|
 |
28
panlilu 2012-04-05 22:27:18 +08:00
ie6!哇...就冲这个..我要试试!
|
 |
29
bigzhu 2012-04-05 22:34:49 +08:00
除了比 jquery 快,还有什么特点?有没有现成的 UI 库?
|
|
31
catfan OP |
|
32
catfan OP 首个稳定版0.9将会在近期出来，目前正在各种加紧修复和改进中。需要用此framework的同学可以先hold一下：）
|
 |
33
leecade 2012-04-07 16:05:37 +08:00
勇气可嘉
|
 |
34
sunshineg 2012-04-07 16:06:19 +08:00
赞 +1
|
 |
35
level_225 2012-04-16 15:24:27 +08:00
$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 对象 |
 |
36
vivalon 2012-05-11 14:24:01 +08:00
突然发现我还有账号……貌似好久之前就注册了
|
|
37
catfan OP |
|
38
zythum 2012-05-27 21:24:31 +08:00  1
感谢喵大。
喵大 下面是使用了之后的一些建议。 1. $event.metaKey 中cmd键一直没有用啊。 2. 还有个意见是$event.key。朱一有个建议是加入一个$event.keyWord之类的。直接返回字母，而不是keyCode感觉会更使用一些。然后是兼容的禁止事件冒泡，禁止浏览器默认行为这些。 3. 时间的delegetedEvent感觉还是需要的。有的话会轻松不少。 4. 然后一些className的add，remove第一个参数是数组啊之类的可有可无有了最好的这些。 感觉qatrix还是不错的，喵大辛苦了。 朱一接下去应该会一直会用下去。虽然现在用qatrix做的一个东西暂时是搁置了。 至少目前还没找到比qatrix更加适合的轻量级的解决方案。 |
|
40
catfan OP |
|
41
catfan OP 已经更新到0.9.7好几天了，优化了不少东西。
|
|
42
catfan OP 经过努力，现在更新到0.9.8版本了....距离1.0还差一点了..
这次包含的更新都挺重要的，推荐更新一下^ ^ |
 |
45
ttym7993 2012-07-07 21:06:18 +08:00
mark,有时间研究下。
|
|
46
zythum 2012-07-07 21:32:06 +08:00
@catfan 类似这种基础框架其实不好做。一般公司不会使用。基本就自己写东西玩可以。没有企业帮助不好推广。并且这个框架其实也不适合大项目。并且大的命名空间污染是硬伤。
|
 |
47
reorx 2012-07-07 21:56:17 +08:00
刚出来的时候就试了一下，做效果确实非常流畅，今天看到帖子就再来顶一下。一点建议，做成默认情况下不将Qatrix中的函数暴露到全局变量的命名空间，而提供一个特殊的方法（比如叫$expose），来手动给windows映射函数，这样就可以让使用者自己选择是使用：$ajax，还是使用：Qatrix.$ajax。
|
|
48
catfan OP @zythum 主要是讨论不给力...其它国内大公司的开源框架也没有多少人讨论...不过由于目前是全英文，偶尔还是有些国外的开发者贡献一下代码的。
另外，多库共存的问题和解决冲突的方法在教程里面有。 而且，经测试globe function比namespaced function快几乎有8%-10%，复杂调用的差距更大。 再者，只要不命名以$开头的function就可以了（实际上需要这样做的情况也不多）。 |
|
49
catfan OP @reorx 其实很简单，要么优先载入，如$ajax有问题的话就直接使用Qatrix.$ajax或var Q=Qatrix;Q.$ajax()；要么最后载入，全部统一使用Qatrix的方法。
其实还有一个很实际的问题：究竟在实际使用中，自行把function命名成以$开头，并与框架冲突的可能性有多大？ 另外，其实目前只需要加一些代码，Qatrix便能与多个框架共存了（具体方法见教程）。 |
|
50
reorx 2012-07-07 22:40:53 +08:00
@catfan 我估计蛮大的。对我自己而言，除了使用Backbone之类可以用OO思想来组织代码的框架的时候，我总是会把jquery选择到的dom对象存储在以`$`开头的变量上。不过现在逐渐在改成把`$`放在末尾的奇怪命名方式了 -。-
|
 |
51
darcy 2012-07-20 16:53:43 +08:00
看首页的示例，好奇怪的语法。
|
|
52
catfan OP @darcy 第一个示例只需理解成一个function wrap就可以了，操作所有匹配的元素。其实更多时候是用到第二个示例，也就是$style.set(元素, 参数1, 参数2)...这样，与其它框架无疑。
|
|
53
catfan OP 目前已经推出到0.9.9的版本了，里面改进了不少地方，而且还研究出一个比较特别的hack，有利于进一步缩小文件的体积。
|
 |
54
manihome 2012-07-23 16:29:21 +08:00
喵友过来赞一个
|
|
55
catfan OP 挖坟一下。目前有重大更新了，虽然还不是正式版，但是最新版里面把所有与元素有关的功能都提供了把元素集合作为参数的支持。大大方便了对多个元素的同时操作的可能。
譬如，我要让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 |
 |
56
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我觉得也是一个很值得借鉴的发展路线。
|
|
58
catfan OP @luckyduck 其实你所提及到的plugin所需要的功能，Qatrix都基本上包含了（其实都是对dom的操作而已）。我想目前Qatrix已经可以用它来开发各种的应用和plugin等，看大家自由的发挥了。
日后预计还会实现多几个功能，但会尽量保持压缩后6KB-7KB以下的体积。 jQuery重点在于dom操作，Qatrix则是注重日常开发中所涉及到的，各取所需吧。 |
|
61
zythum 2012-10-08 18:58:22 +08:00
喵大的最新代码更新是加了一堆的mapcall...
|
Select Language