你也在寫Flex嗎? 那你可能要特別注意…
本篇文章來自MAX2009的session:
How Not to code FLEX
演講者主要說明何謂壞程式碼(bad code)，但也說壞程式碼不一定不好，只要你確定能盡快回來改正他。那何謂壞程式碼?
- Container 元件的誤用：Container元件諸如Box, Canvas, Tile等等，他們的原本目的都是: 排列裡面的子元件。因此只要你不是拿來排版或甚至沒有給予它任何的子元件，就違背原本用意了。
例子:<mx:TextInput/>
<mx:VBox backgroundImage="blah.png" borderStyle="solid"/> <!-- 你看, 沒有小孩的容器元件--> - ListBase 元件的誤用: List, TileList, DataGrid 都是用來針對列表物件的選取、排序、renderer回收而生，因此，當你想要製作的元件並不需要這些功能，就不該採用List來處理。
- local model binding: 避免直接將值給UI元件，盡量用local model binding來處理。(按:此方法還可避免元件初始化延遲所帶來的問題)
ex:<mx:script>
//這樣是不好的
function test():void
{
myLabel.text = "hello";
}
</mx:script>
<mx:Label id="myLabel"/><mx:Script>
//用local model binding.
[Bindable]
private var helloText:String = "hello";
</mx:Script>
<mx:Label id="myLabel" text="{helloText}"/> -
別把local view event 交由非常上層的元件處理。(按:這裡必須搭配cairngorm microframework 來解釋 )
元件與元件之間的訊息傳遞，如果能在local就解決，便盡量不要拋到上層的command-frontcontroller 去處理然後又繞回來”原本的元件”。以後維護會很辛苦。 -
不適當的容器元件使用方法:
如果你發現你的容器元件裡面只有一個子元件(child)，那可能有問題。 -
Two dots and you are out.
兩個參照你就出局囉!如果你的程式碼需要進入非常多的子元件，那就有問題了。如下:
這是一個本質上的問題，應該要封裝這些子元件，若其他元件需要存取裡面的值，應該要透過Event(帶資料出來) 來幫你。
-
自以為的聰明寫法並不好。
這種情況會發生在複雜的binding寫法，像是:<mx:Button id="btn" enabled="{ isCheck && ( firstBtn.enabled & !secondBtn.enabled) && (thirdBtn.enabled|| feelGood) }"/>應該要用function 去處理這些binding 邏輯:
<mx:Script>
private function getEnabled( a:Boolea , b:Boolea , c:Boolean , d:Boolean , e:Boolean ):Boolean
{
//邏輯應該在這裡描述啦:
return a && (b&&!c) &&(d||e);
}
</mx:Script>
<mx:Button id="btn" enabled="{ getEnabled(isCheck,firstBtn.enabled,secondBtn.enabled,thirdBtn.enabled,feeGood) }"/>
Tags: actionscript, flex