在 jquery 中精炼 if/else？

Question

我有以下代码，如果某个 div 有一个特定的 class 执行一个具有默认布局的同位素代码块，或另一个 class，执行第二个砌块布局。

效果很好，但我想稍微改进一下代码。最好的方法是什么？

var $body = $('.c3');
if ($body.hasClass('.standard')) {
    var $container = $('.portfolio-items').imagesLoaded(function () {
        // Initialize isotope 
        $container.isotope({
            filter: '*',
            layoutMode: 'fitRows',
            animationOptions: {
                duration: 750,
                easing: 'linear'
            }
        });
    });
} else {
    var $container = $('.portfolio-items').imagesLoaded(function () {
        $container.isotope({
            filter: '*',
            layoutMode: 'masonry',
            animationOptions: {
                duration: 750,
                easing: 'linear'
            },
            masonry: {
                columnWidth: 1
            }
        });
    });
}

Answer 1

我建议使用选项对象（这正是 isotope 所期望的）来删除代码重复。这可能如下所示：

// Default options
var isotopeOptions = {
    filter: '*',
    animationOptions: {
        duration: 750,
        easing: 'linear'
    }
};
// Set specific options
var $body = $('.c3');
if ($body.hasClass('.standard')) {
    isotopeOptions.layoutMode = 'fitRows';
} else {
    isotopeOptions.layoutMode = 'masonry';
    isotopeOptions.masonry = {
        columnWidth: 1
    };
}
var $container = $('.portfolio-items').imagesLoaded(function() {
    $container.isotope(isotopeOptions);
});

如果一种情况比另一种情况更有可能，您可以考虑设置例如'fitRows' 作为默认布局，因此删除其中一个 if 分支。

在 jquery 中精炼 if/else？

Refining an if/else in jquery?

jquery-isotope