apache-flex - 简化 Flex/AS3 代码

Question

我用 php 编程了一段时间，但它都是面向过程的。现在我在 Flex 3 中有一个项目，我制作了一个简单的脚本，它可以动画(移动)几个对象，但我认为我在这里错过了面向对象编程的要点，因为我一遍又一遍地重复一些东西......也许它与我对 AS3 仍然存在的所有困惑混合在一起，所以请告诉我是否有任何“更智能”的方式来编写这段代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    width="100%" height="100%"
    paddingBottom="0" paddingLeft="0" paddingRight="0" paddingTop="0"
    horizontalScrollPolicy="off" verticalScrollPolicy="off"
    creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import mx.events.EffectEvent;

            public var opened1:Boolean;
            public var opened2:Boolean;
            public var opened3:Boolean;
            public var opened4:Boolean;

            [Bindable] public var pgW:Number;

            private function init():void{
                pgW = this.width;

                opened1 = false;
                opened2 = false;
                opened3 = false;
                opened4 = false;

                addListeners();
            }

            private function mouseOver1(event:MouseEvent):void{
                removeListeners();

                if (opened2){
                    moveOut.target = txt2;
                }
                if (opened3){
                    moveOut.target = txt3;
                }
                if (opened4){
                    moveOut.target = txt4;
                }

                moveOut.play();
                setOpened(1);
                moveIn.target = txt1;
                moveIn.play();
            }

            private function mouseOver2(event:MouseEvent):void{
                removeListeners();

                if (opened1){
                    moveOut.target = txt1;
                }
                if (opened3){
                    moveOut.target = txt3;
                }
                if (opened4){
                    moveOut.target = txt4;
                }

                moveOut.play();
                setOpened(2);
                moveIn.target = txt2;
                moveIn.play();
            }

            private function mouseOver3(event:MouseEvent):void{
                removeListeners();

                if (opened1){
                    moveOut.target = txt1;
                }
                if (opened2){
                    moveOut.target = txt2;
                }
                if (opened4){
                    moveOut.target = txt4;
                }

                moveOut.play();
                setOpened(3);
                moveIn.target = txt3;
                moveIn.play();
            }

            private function mouseOver4(event:MouseEvent):void{
                removeListeners();

                if (opened1){
                    moveOut.target = txt1;
                }
                if (opened2){
                    moveOut.target = txt2;
                }
                if (opened3){
                    moveOut.target = txt3;
                }

                moveOut.play();
                setOpened(4);
                moveIn.target = txt4;
                moveIn.play();
            }




            private function addListeners():void{
                btn1.addEventListener(MouseEvent.MOUSE_DOWN, mouseOver1);
                btn2.addEventListener(MouseEvent.MOUSE_DOWN, mouseOver2);
                btn3.addEventListener(MouseEvent.MOUSE_DOWN, mouseOver3);
                btn4.addEventListener(MouseEvent.MOUSE_DOWN, mouseOver4);
            }

            private function removeListeners():void{
                btn1.removeEventListener(MouseEvent.MOUSE_DOWN, mouseOver1);
                btn2.removeEventListener(MouseEvent.MOUSE_DOWN, mouseOver2);
                btn3.removeEventListener(MouseEvent.MOUSE_DOWN, mouseOver3);
                btn4.removeEventListener(MouseEvent.MOUSE_DOWN, mouseOver4);
            }

            private function setOpened(nr:int):void{
                if (nr == 1){
                    opened1 = true;
                    opened2 = false;
                    opened3 = false;
                    opened4 = false;
                }
                if (nr == 2){
                    opened1 = false;
                    opened2 = true;
                    opened3 = false;
                    opened4 = false;
                }
                if (nr == 3){
                    opened1 = false;
                    opened2 = false;
                    opened3 = true;
                    opened4 = false;
                }
                if (nr == 4){
                    opened1 = false;
                    opened2 = false;
                    opened3 = false;
                    opened4 = true;
                }
                trace("opened" + nr);
            }

            private function setPositions(event:EffectEvent):void{
                event.effectInstance.target.x = -(pgW);
            }

            private function klik(event:MouseEvent):void {
                event.stopPropagation();
            }
        ]]>
    </mx:Script>

    <mx:Move id="moveIn"
        xFrom="{-pgW}" xTo="0"
        yFrom="0" yTo="0"
        duration="1000"
        effectEnd="addListeners();"/>

    <mx:Move id="moveOut"
        xFrom="0" xTo="0"
        yFrom="0" yTo="250"
        duration="1000"/>


    <mx:Image id="btn1" source="assets/img/32/32-btn1.swf"
            x="0" y="0"
            width="100%"
            click="klik(event)"/>

    <mx:Image id="btn2" source="assets/img/32/32-btn2.swf"
            x="0" y="0"
            width="100%"
            click="klik(event)"/>

    <mx:Image id="btn3" source="assets/img/32/32-btn3.swf"
            x="0" y="0"
            width="100%"
            click="klik(event)"/>

    <mx:Image id="btn4" source="assets/img/32/32-btn4.swf"
            x="0" y="0"
            width="100%"
            click="klik(event)"/>



    <mx:Image id="txt1" source="assets/img/32/32-txt1.swf"
            x="{-pgW}" y="0"
            width="100%"/>

    <mx:Image id="txt2" source="assets/img/32/32-txt2.swf"
            x="{-pgW}" y="0"
            width="100%"/>

    <mx:Image id="txt3" source="assets/img/32/32-txt3.swf"
            x="{-pgW}" y="0"
            width="100%"/>

    <mx:Image id="txt4" source="assets/img/32/32-txt4.swf"
            x="{-pgW}" y="0"
            width="100%"/>
</mx:Canvas>

非常感谢您抽出时间!

米。

Answer 1

您的示例代码非常适合 OO(面向对象)。

您有四件事(您将使用一个类来定义)，它们保存对按钮、文本、打开状态等的引用。因此，您将一个类定义为 MXML 组件，其中保存按钮、文本，以及任何其他状态，并且您将方法放在该组件上(在 <mx:Script> block 中)。另外，您可以在 creationComplete 中初始化该组件。方法，以便在完成初始绘制时 open 变量为 false。甚至你的mouseOver方法是完美的:您可以让对象决定是否需要执行某些操作(并且 MXML 组件将自动进行事件处理)。基本上，这就是我们想要的:MXML 组件处理其自己的内部状态，而不是拥有必须管理列表状态的外部对象。

由于 MouseOver 方法将放入您的 MXML 组件中，因此每个组件都必须保存对其他组件的引用。有很多方法可以做到这一点，包括在早些时候传递引用并存储它，或者使用 static var 包含其他 x 个对象的列表。

希望这有一定道理并有所帮助。