Question

如果我像这样运行代码。

// only initial for new item
var columnSplitter = {
    config: {
        $col: $('.col'),
        loopStart: 0
    },

    init: function(){
        for(var i=columnSplitter.config.loopStart; i<columnSplitter.config.$col.length; i++){
            columnSplitter.config.$col.eq(i).css({'border-radius': '1000px'});
            console.log(i);
        }
    }
}

columnSplitter.init();
columnSplitter.config.loopStart = -1;

$('.btn').on('click', function(){
    var contentString = "<div class='col' />";
    $('.test').append(contentString);

    columnSplitter.config.loopStart++
    columnSplitter.config.$col = $('.test .col');
    columnSplitter.init();
});

每次单击按钮时，只会为新项目触发一次，而不是循环所有项目。我觉得哪个更好。 https://codepen.io/anon/pen/KZQjKX?editors=1011

案例2

// always start from 0 means it will loop all of the item
var columnSplitter = {
    config: {
        $col: $('.col'),
        loopStart: 0
    },

    init: function(){
        for(var i=0; i<columnSplitter.config.$col.length; i++){
            columnSplitter.config.$col.eq(i).css({'border-radius': '1000px'});
            console.log(i);
        }
    }
}

columnSplitter.init();

$('.btn').on('click', function(){
    var contentString = "<div class='col' />";
    $('.test').append(contentString);

    columnSplitter.config.$col = $('.test .col');
    columnSplitter.init();
});

https://codepen.io/anon/pen/opErgR?editors=1011

每次单击按钮时，它都会从旧项目循环到新项目，我认为这会降低性能吗？

那么在这种情况下初始函数的最佳实践是什么？

Answer 1

为什么需要这样的循环结构来为每个元素（旧的和新的）应用一些逻辑？我认为更容易理解将是这样的：

var container = $('.test');
var items = container.find('.col');

function applyElementChanges(item) {
    item.css({ 'border-radius': '1000px' });
}

items.each(function(i, q) {
    q = $(q);
    applyElementChanges(q);
});

$('.btn').on('click', function(){
    var newCol = $('<div class="col"></div>');
    container.append(newCol);
    applyElementChanges(newCol);
});

初始化新项目功能的最佳做法是什么？

1 个答案: