Question

我想使用matchmedia.addlistener检查窗口大小，我的按钮事件看起来像这样

$('button').click(function(){
    if(this.attr('aria-expanded') === 'false'){
        $this.attr('aria-expanded', true).next().fadeOut();
    }else{
       $this.attr('aria-expanded', false).next().fadeIn();
    }
});

如果我使用matchmedia，我将需要这样做

minWidth768 = window.matchMedia('(min-width: 768px)');

if(minWidth768.matches){
    $('button').click(function(){
        if(this.attr('aria-expanded') === 'false'){
            $this.attr('aria-expanded', true).next().slideUp();
        }else{
           $this.attr('aria-expanded', false).next().slideDown();
        }
    });
}else{
    $('button').click(function(){
        if(this.attr('aria-expanded') === 'false'){
            $this.attr('aria-expanded', true).next().fadeOut();
        }else{
           $this.attr('aria-expanded', false).next().fadeIn();
        }
    });
}

如果我想添加addListener，那么我需要重复我的代码。

minWidth768.addListener(function(media) {
    if(media.matches){
      //repeat;
    }else{
      //repeat;
    }
});

有没有办法让我的代码更短，并使代码看起来更好，更易于维护？

Answer 1

您可以创建一个函数，然后在任何需要的地方调用该函数。

例如

function matchMedia(){
//do stuff here
}

//now call where you want

if(true){
  matchMedia();
}

但请注意：如果你想在函数参数中调用函数，那么你就不需要像下面那样使用括号了一个例子：

setTimeout(matchMedia, 400);// don't do matchMedia()

使用matchmedia时缩短代码

1 个答案: