随着这个动画变得越来越复杂,我不断添加参数,以便它们在每次回调时可用。目前共有 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 = {}
的单个对象中,并仅传递这一个变量。
- 以某种方式分解功能 - 可能会提取开始和结束条件以分离功能
- 从函数参数转移到对象属性(静态)以保持所需变量的持久性
- ?
当有多个参数时,使用对象是正常的。下面是重构代码的示例:
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;
}
phá vỡ;
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);
切换方向时的延迟现在为 2000,而不是 2001。
Tôi là một lập trình viên xuất sắc, rất giỏi!