閱讀922 返回首頁    go 阿裏雲 go 技術社區[雲棲]


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的概述,這不是一篇全解讀這個類庫的方法,主要是基於以下方麵的考慮:

  1. 個人原因,因為隻有我一個人編寫.而我現在已經離開學校去公司實習了,不能夠用所有的時間去寫這個類庫了.我希望有人能一起編寫.然後當然是一起編寫幫助文檔了.
  2. 這個類庫不完善.還有許多的功能沒有完成.提前放出來的原因是希望有人看了之後覺得有些興趣.能夠參與到裏麵來.然後說:你不是一個人在戰鬥.
  3. 沒有經過嚴格的測試.隻有少部分人在使用和測試.雖然改正過一部分的bug.可是這隻是測試人比較少而曝露的問題不夠多而已.
  4. 選擇器的問題,既然是模仿jquery的寫法.那麼選擇器一定要非常的強大.可是目前的選擇器非常非常的粗糙和簡單.這部分,也需要找到一個正則表達式高手,如果找不到.就隻有自己硬著頭皮學習了.

總之:我的目的就是希望誌同道合的人一起編寫.一起完成一件事情,對自己有幫助.也能幫助到別人的好事情.

這裏是類庫的下載地址:點擊下載

最後更新:2017-04-02 18:14:53

  上一篇:go 程序員們 不要想一輩子靠技術混飯吃
  下一篇:go 關於VMWARE虛擬機安裝GHOST版XP後不能硬盤啟動問題