Android更快速的開發-aquery類庫
鏈接地址:
https://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":"https://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的寫法.那麼選擇器一定要非常的強大.可是目前的選擇器非常非常的粗糙和簡單.這部分,也需要找到一個正則表達式高手,如果找不到.就隻有自己硬著頭皮學習了.
總之:我的目的就是希望誌同道合的人一起編寫.一起完成一件事情,對自己有幫助.也能幫助到別人的好事情.
這裏是類庫的下載地址:點擊下載
最後更新:2017-04-02 18:14:53