如果我像这样运行代码。
// 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); });更多推荐
发布评论