简化 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 组件，该组件保存按钮、文本和任何内容。其他状态，并将方法放在该组件上（在 块中）。另外，您可以在其 creationComplete 方法中初始化组件，以便在完成初始绘制时 open 变量为 false。甚至您的 mouseOver 方法也是完美的：您可以让对象决定是否需要执行某些操作（并且 MXML 组件将自动进行事件处理）。基本上，这就是我们想要的：MXML 组件处理其自己的内部状态，而不是拥有必须管理列表状态的外部对象。

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

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

Answer 2

而是做类似的事情。在伪代码中：

init()
  btn[] = create array of buttons
  txt[] = create array of txt
  opened[] = create array of boolean
  opened[] = false
  for each btn
           btn.mouseover = mouseover
           add listeners

mouseover
  remove listeners
  i = find source btn index from event
  moveout.target = movein.target
  moveout.play
  opened[] = false
  opened[i] = true
  movein.target = txt[i]
  movein.play

可能您不需要打开的变量。

Answer 3

事实上，如果opened3为true，则执行以下代码段后moveOut.target的值将始终为txt3（无论opened2/3 的值如何）。这是设计使然，还是 opened1/2/3/4 相互排斥（一次只能有一个为真），或者您是否缺少 else 语句或...？

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

Answer 4

遵循一些有关构建应用程序的教程，使用一些模式，尝试 MVC 或 MVP，查看 Smartypants IOC