Упрощение кода 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> 

большое спасибо за ваше время!

m.

Answer 1

Ваш пример кода идеально подходит для того OO'ed (из объектно-ориентированных).

У вас есть четыре вещи (которые вы определите с помощью одного класса), которые содержат ссылку на кнопку, текст, открытое состояние и т. Д. Таким образом, вы определяете один класс как компонент MXML, который содержит кнопку, текст и любое другое состояние, и вы помещаете методы ON THAT COMPONENT (в блок <mx:Script>). Кроме того, вы инициализируете компонент в его методе creationComplete, чтобы открытая переменная была ложной, когда заканчивается внутренний чертеж. Даже ваш метод mouseOver идеален: вы можете позволить объектам решить, нужно ли им что-то делать или нет (и компонент MXML автоматически будет обрабатывать события). В основном, это то, что мы собираемся сделать: компонент MXML имеет дело с собственным внутренним состоянием, а не с внешним объектом, которому нужно управлять состоянием для списка.

Поскольку метод MouseOver будет помещен в ваш компонент MXML, каждый из них должен будет содержать ссылки на другие. Есть много способов сделать это, включая передачу ссылки в какой-то момент раньше и ее хранение, или наличие var static var, в котором содержится список других x число объектов.

Надеюсь, что это имеет смысл и помогает.

Answer 2

Следуйте некоторый учебник по разработке архитектуры приложений, использовать некоторые модели, попробовать MVC или MVP, Checkout SmartyPants МОК

Answer 3

Скорее сделайте что-нибудь подобное. В псевдокоде:

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 4

В самом деле, значение moveOut.target после выполнения следующей сегмент кода всегда будет txt3, если opened3 является true (независимо от значений opened2/3). Это по дизайну или opened1/2/3/4 взаимно исключающее (только одно может быть истинным за раз) или вы отсутствуете else заявления или ...?

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