链接地址:
http://www.frontdig.com/index.php/faster-development-aquery-library/
aquery是一组用来加快代码编写的类库,主要思想借鉴了jquery.aquery能快速的查找到可视化对象并且进行操作.aquery的核心是core的AQ.as,这个类囊括了主要的功能.然后还有辅助的Selector选择器.这个是用来选择元素的.当然现在的功能还很稚嫩.然后借助了第三方类库来实现动画效果.
类库面向的人群是js程序员,对于习惯编写jquery的前端人员来说,能以比较小的学习成本来学习as3.0并快速的开发as应用程序,如果你是资深的as程序员.而且如果没有高效率上的要求的话,使用这个类库也可以比 较快的进行开发.
这个类库目前是不够完善的.主要体现在选择器上.可供选择的元素太少.而且不支持伪类和属性等选择器.以后会逐渐的支持.鉴于本人的水平.所以很多高级的功能没有实现,如果你有兴趣的话.可以和我一起编写这 组类库,这是我的博客地址www.frontdig.com
下面是主要的特征:
1.aquery框架的选择器:
目前支持选择的元素还很有限.主要包括基于实例名的选择,基于实例name属性的选择.基于数组列表的选择,基于稀疏数组列表的选择.尚未完成的选择器功 能:基于范围的选择,基于坐标的选择.还有最重要的选择器:基于属性的选择.这点是比较难的一点.因为执行效率很慢.遍历所有对象的属性是一件非常费力的 事情.在考虑着是不是要加进去.
2.核心部分:
内部隐性的迭代,这个是框架的核心函数.比如在被$包含起来的aq对象中.设置属性的时候.自动迭代.设置所有的属性.所以能够快的编写代码.
3.事件绑定机制:
使用aquery框架能够非常容易的绑定一个事件.如下面的代码AQ.$("可视化对象如sprite").bind("click",fucntion(){});这样就完成了一次绑定,解除绑定也是很简单的.只要这样就行了AQ.$("可视化对象如sprite").unbind("click");事件机制还支持事件的 命名空间.比如绑定点击事件的时候.想要区分出不同的事件.可以使用下面的格式:click.a,这样就表示同样是 点击事件却是不同命名空间.也支持滑过事件
4.设置属性
使用aquery框架让设置属性变得十分的容易,比如一个数组arr里面保存着10个sprite,现在要设置这10个sprite的alpha属性的 话.只要用一句就能搞定了,AQ.$(arr).attr("alpha",0.5);这样设置就达到了以前要编写许多代码的效果了.当然.设置这样一个 属性是比较容易的,如果是多个属性的话.可以使用键值对的语法来设置.例如这样 AQ.$(arr).attr({"alpha":0.5,"height":100,"width":100});这样就可以快速的设置对象属性了.
5.动画效果:
动画效果是借助了开源的Tweenlite类库.这样能够使用许多Tweenlite的优点和好处,实现属性的渐变非常的容易,如果要优雅的隐藏元素.只要使用一个 hide("fast");函数就可以了,当然也可以自己传入一个时间数值hide(1000);显示出来也是一样的show();一秒内移到某一点animate({"x":100,"y":100},1000)
6.链式写法:
支持连写的方式.比如AQ.$(arr).bind("click",function()).attr("alpha",0.5).show("slow")可以这样连写下去.非常的方便快速.
7.网络加载:
这部分还不够完整,没有加入许多高级的特性.这个主要是因为我对网络加载方面不熟悉,目前只加入了加载可视化对象和加载网络协议那部分.
8.遇到的问题:
1.首先是事件机制的问题.如果使用bind绑定之后.只能使用unbind接触绑定.如果使用了removeChild()事件移除.可能会使侦听器存在引用.
2.其次是性能问题.使用类库之后.会增加额外的内存.因为一个aquery对象包含着许多的属性.所以方便与内存是一个需要权衡的问题.
说了那么多.我在这里就使用这个类库来实现几个小小的demo,尽量的展示一下这组类库的使用方法.
第一个例子
先看实现的效果->点击这里
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
package { import com.aquery.core.AQ; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; /** * ... * @author 陈伟群 */ public class Main extends Sprite { public function Main() { AQ.$(this).bind("enterFrame", gameLoop);//为舞台绑定一个帧事件.跟js的setInterval差不多 } private function gameLoop(e:Event):void { if (uint(Math.random()*60)==1) //随机生成 { var star:MovieClip = new Star();//生成星星对象 addChild(star);//加入显示列表 AQ.$(star)//包装star .attr({"buttonMode":true,"x":Math.random()*stage.stageWidth,"y":Math.random()*stage.stageHeight})//设置attr属性 .animate( { "rotation":10, "scaleX":10, "scaleY":10 }, 5000)//动画,使星星大小改变 .click(function(e){AQ.$(star).hide("fast",function(){AQ.$(e.target).remove(true)}),star=null});//绑定点击事件.点击之后则消去星星 } } } } |
上面是aquery的第一个例子.一个类似于点圆圈的游戏,代码看起来不多.游戏的代码逻辑也写在上面了,这里主要是注意AQ.$方法,这个是aquery的入口.从这里选择可视化元素并且进行了包装成aquery对象,这样就可以使用attr,animate方法和快速的绑定事件了,这里的AQ.$我们传入了实例名,其实AQ.$可以接受许多种类型的参数,下面的例子也会用到.
第二个例子
点击这里 查看效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
package { import com.aquery.core.AQ; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; /** * ... * @author 陈伟群 */ public class Main extends Sprite { public var $:Function; public function Main() { $ = AQ.init(this); var arr:Array = []; for (var i:int = 0; i < 500; i++) { var s:Star = new Star(); addChild(s); arr.push(s); } $(arr).each(function(i,index,o) { o .attr( { "x":Math.random() * stage.stageWidth, "y":Math.random() * stage.stageHeight } ) .mouseover(function(e) { $(e.target).animate( { "x":Math.random() * stage.stageWidth, "y":Math.random() * stage.stageHeight, "rotation":Math.random() * 360, onComplete:function() { }},1000)}) }) } } } |
这个例子也比较的简单.类似于以前的那种躲避鼠标的效果.这里先用循环生成500个星星,然后放入到一个数组中,如果你有仔细发现的话.你会发现这段代码
public var $:Function;
$ = AQ.init(this);
这句代码的意思是初始化的意思.我们把舞台传给了参数.因为init这个方法的返回值是AQ.$,其实没什么神秘的.就是把$作为AQ.$的别名而已,当然你也可以使用$q来代替,不过.用这个替代的方法有个缺点.缺少代码提示,如果你觉得写AQ.$也没什么大碍的话.就继续像第一个例子一样使用AQ.$来选择并包装元素吧
这个例子也没有什么难以解释的地方.$(e.target)的意思是说取得那个事件的接受者.注意这个函数each(i,index,o),这个函数是用来遍历aquery里面的元素的.那三个参数你可以自己起任意名字(或者留空).它们依次代表i是代表可视化对象,index代表索引值,o代表被包装过的可视化对象,相当于$(i),
第三个例子
点击这里 查看效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
package { import com.aquery.core.AQ; import flash.display.MovieClip; import flash.display.Sprite; import flash.events.Event; import flash.events.ProgressEvent; /** * ... * @author 陈伟群 */ public class Main extends Sprite { public var $:Function; public function Main() { $ = AQ.init(this); AQ.load( { "url":"http://www.dznw.net/home/attachment/201007/10/56_1278751205MCD7.jpg", "success":function(e) { addChild(e.target.content); $(e.target.content).attr( { "width":stage.stageWidth, "height":stage.stageHeight } ) ; var arr:Array = []; for (var i:int = 0; i < 27; i++) { for (var j:int = 0; j < 20; j++) { var block:MovieClip = new Block(); addChild(block); arr.push(block); block.y = j * 20; block.x = i * 20; } } $(arr).mouseover(function(e) { $(e.target).hide(100, function() { $(e.target).show(50000)} ); }) } , "fail":function() {}, "loading":function(e:ProgressEvent){trace(e.bytesLoaded/e.bytesTotal*100)} }); } } } |
这个例子是类似于马赛克那种的效果,这里我们先使用AQ的静态方法load去获取远程的一张图片,然后生成许多的马赛克去覆盖它,还是使用了老办法,把存储可视化对象的数组arr包装成我们的aquery对象,时候绑定一个mouseover事件,然后使用hide和show方法去隐藏或者显示.注意e.target.content.这里是指的loader里面的内容.这里是指那张被远程加载的图片.
这个就是aquery的概述,这不是一篇全解读这个类库的方法,主要是基于以下方面的考虑:
- 个人原因,因为只有我一个人编写.而我现在已经离开学校去公司实习了,不能够用所有的时间去写这个类库了.我希望有人能一起编写.然后当然是一起编写帮助文档了.
- 这个类库不完善.还有许多的功能没有完成.提前放出来的原因是希望有人看了之后觉得有些兴趣.能够参与到里面来.然后说:你不是一个人在战斗.
- 没有经过严格的测试.只有少部分人在使用和测试.虽然改正过一部分的bug.可是这只是测试人比较少而曝露的问题不够多而已.
- 选择器的问题,既然是模仿jquery的写法.那么选择器一定要非常的强大.可是目前的选择器非常非常的粗糙和简单.这部分,也需要找到一个正则表达式高手,如果找不到.就只有自己硬着头皮学习了.
总之:我的目的就是希望志同道合的人一起编写.一起完成一件事情,对自己有帮助.也能帮助到别人的好事情.
这里是类库的下载地址:点击下载