0

このアニメーションがより複雑になるにつれて、各コールバックで使用できるようにパラメーターを追加し続けます。現在合計6つ。

たとえば、メッセージが表示されている間は入力ボックスを無効にしたいので、さらに別の要素を追加する必要があります-in_element;

呼び出し：

    Mo.C.movePane( cover_element, pane_element, 0, 0, 0, 'begin' );

関数：

    movePane: function( cover_element, pane_element, start, end, index, state ) {
        if( ( state === 'begin' ) ) {
            start = parseInt( window.getComputedStyle( pane_element, null ).getPropertyValue("top"), 10 );
            end = start + 40;
            index = start;
            state = 'down';
            cover_element.style.display = 'inline';
            Mo.C.movePane(cover_element, pane_element, start, end, index, 'down' );
        }
        if( ( state === 'down' ) && ( index < end ) ) {
            index += 1;
            pane_element.style.top = ( index ) + 'px';
            setTimeout( function( ){ Mo.C.movePane(cover_element, pane_element, start, end, index, state ); }, 1 );
        }
        else if( ( state === 'down' ) && index === end ) { 
            state = 'up';
            setTimeout( function( ){ Mo.C.movePane(cover_element, pane_element, start, end, index, state ); }, 2000 );
        }
        else if( ( state === 'up' ) && ( index > start ) ) {
            index -= 1;
            pane_element.style.top = ( index ) + 'px';
            setTimeout( function( ){ Mo.C.movePane(cover_element, pane_element, start, end, index, state ); }, 1 );
        }
        else if( ( state === 'up' ) && ( index === start ) ) {
            cover_element.style.display = 'none';
            // signup_pass_input.addEventListener( "keypress", Mo.UserNew.enter, false );
        }
    }
};

可能な解決策

  • すべてをと呼ばれる単一のオブジェクトにラップし、object_all = {}この1つの変数だけを渡します。
  • 何らかの方法で機能を分割します-開始条件と終了条件を引き出して機能を分離する可能性があります
  • 関数パラメーターからオブジェクトプロパティ（静的）に移動して、必要な変数を永続的に維持します
  • ？
4

4 に答える 4

2

複数のパラメーターがある場合は、オブジェクトを使用するのが通常です。以下に、リファクタリングされたコードの例を示します。

function( cover_element, pane_element, opt ) {
  var delay=1;
  if (!opt) {
    opt = {};
    opt.start =
      parseInt(
        window.getComputedStyle( pane_element, null ).
          getPropertyValue("top"),
        10
      );
    opt.end = opt.start + 40;
    opt.index = opt.start;
    opt.state = 'down';
    cover_element.style.display = 'inline';
  }

  switch(opt.state) {
    case 'down':
      opt.index += 1;
      if (opt.index >= opt.end) {
        opt.index = opt.end;
        opt.state = 'up';
        delay=2000;
      }
      break;
    case 'up':
      opt.index -= 1;
      if (opt.index <= opt.start) {
        cover_element.style.display = 'none';
        opt = null;
      }
  }

  if (opt) {
    pane_element.style.top = ( opt.index ) + 'px';
    setTimeout(
      function( ){
        Mo.C.movePane(cover_element, pane_element, opt);
      },
      delay
    );
  }
}

そして、次のように呼び出します。

Mo.C.movePane(elem1, elem2);

方向を切り替えるときの遅延は、2001 ではなく 2000 になりました。

于 2012-08-11T04:43:55.160 に答える
1

オブジェクトを使用することをお勧めします。以下のようにすることもできます

function movePane() {
    var a = arguments; // to make it easy
    var name = a[0];
    var age = a[1];
    var place = a[2];
    console.log(name, age, place)
}

movePane("abc", 28, "def");
于 2012-08-11T05:30:45.047 に答える
1

@mVChr には正しい答えがあります。さまざまなパラメーターのプロパティを持つ単一のオブジェクトを渡します。これは、多くのインターフェイスを非常にクリーンにする標準的なパラダイムです。良い例として、 jQuery の$.ajax()メソッドを参照してください。

于 2012-08-10T23:55:29.687 に答える
0

コメントの答えによると：

オブジェクトの使用o。それらを使用するためにオブジェクトプロパティを初期化する必要はないことに注意してください。非常に簡潔です。

        var o = {};
            o.cover_element = cover_element;
            o.pane_element = pane_element
            o.state = 'begin';
        Mo.C.movePane( o );
        return o_p;
    },
    movePane: function( o ) {
        if( ( o.state === 'begin' ) ) { 

            // start

            o.start = parseInt( window.getComputedStyle( o.pane_element, null ).getPropertyValue("top"), 10 );
            o.end = o.start + 40;
            o.index = o.start;
            o.state = 'down';
            o.cover_element.style.display = 'inline';
            Mo.C.movePane( o );
        }
        else if( ( o.state === 'down' ) && ( o.index < o.end ) ) { 

            // move down

            o.index += 1;
            o.pane_element.style.top = ( o.index ) + 'px';
            setTimeout( function( ){ Mo.C.movePane( o ); }, 1 );
        }
        else if( ( o.state === 'down' ) && ( o.index === o.end ) ) { 

            // pause

            o.state = 'up';
            setTimeout( function( ){ Mo.C.movePane( o ); }, 2000 );
        }
        else if( ( o.state === 'up' ) && ( o.index > o.start ) ) { 

            // move up

            o.index -= 1;
            o.pane_element.style.top = ( o.index ) + 'px';
            setTimeout( function( ){ Mo.C.movePane( o ); }, 1 );
        }
        else if( ( o.state === 'up' ) && ( o.index === o.start ) ) { 

            // complete

            o.cover_element.style.display = 'none';
        }
    }
};
于 2012-08-11T19:07:05.820 に答える