初始新项目功能的最佳做法是什么？(What is the best practice for initial a function for new item?)

初始新项目功能的最佳做法是什么？(What is the best practice for initial a function for new item?)

如果我像这样运行代码。

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

每次当我点击按钮时，它会从旧项目循环到新项目，我认为这会使性能更低？

那么在这种情况下最初的函数中的最佳做法是什么？

If I run the code the like this.

// 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(); });

Each time when I click the button it only fire once for the new item instead of loop all of the items. Which I think will be better. https://codepen.io/anon/pen/KZQjKX?editors=1011

In case 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

each times when I click the button it will loop from old item to new items, which I think is this will make the performance lower?

So what is the best practice in initial a function in this kind of case?

最满意答案

为什么你需要这样的循环结构来为每个元素（旧的和新的）应用一些逻辑？ 我觉得理解起来会更容易，就像这样：

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); });

Why do you need such loop structures to apply some logic to each element (old and new)? oO I think much easier for understanding will be something like this:

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); });