Question

我有以下代码，如果某个div有一个特定的类，使用默认布局或另一个类执行一个同位素代码块，则使用砖石布局执行第二个块。

它工作得很好，但只想稍微改进一下代码。什么是最好的方式？

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

我建议使用选项对象（实际上是同位素所期望的）删除代码重复。这可能如下所示：

// 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？

1 个答案: