代码优化

最新推荐文章于 2025-09-09 08:37:13 发布

转载最新推荐文章于 2025-09-09 08:37:13 发布 · 76 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/pauli/blog/1815378

文章标签：

#javascript #ViewUI

为什么80%的码农都做不了架构师？>>>

jQuery 级联

旧代码：

self.$container.find('table>[dataviewid]').remove();
self.$container.find('table').append(_list.getDataModal());

优化1：

self.$container.find('table').children('[dataviewid]').remove().end().append(_list.getDataModal());

优化2（根据业务逻辑，经常变动的内容，放到一个容器里面，下面代码不一定对）：

self.$container.find('table').empty().append(_list.getDataModal());

优化点：

复制的选择符（table>[dataviewid]），最好拆解成简单的
选择符可以重用

插入DOM

旧代码

!function() {
    var amount = 10;
    var $footer = $('.footer-nav-regbar');
    for (var i = 0; i < amount; i++) {
        var $star = $('<div class="star-blink"><div></div></div>');
        $star.css({
            'top': Math.random() * 100 + '%',
            'left': Math.random() * 100 + '%',
            'animation': 'blink 5s infinite ' + Math.random() * 4 + 's ease-out',
            'opacity': Math.random() * 5 / 10 + 0.5
        });
        $footer.append($star);
    }
}()

优化1

!function() {
    var amount = 10;
    var $footer = $('.footer-nav-regbar');
    for (var i = 0; i < amount; i++) {
        $('<div class="star-blink"><div></div></div>').css({
            'top': Math.random() * 100 + '%',
            'left': Math.random() * 100 + '%',
            'animation': 'blink 5s infinite ' + Math.random() * 4 + 's ease-out',
            'opacity': Math.random() * 5 / 10 + 0.5
        }).appendTo($footer);
    }
}()

优化2

!function() {
    var amount = 10, s = '';
    for (var i = 0; i < amount; i++) {
        s += `<div class="star-blink" style="top: ${Math.random() * 100 + '%'}; left: ${Math.random() * 100 + '%'}; animation: ${'blink 5s infinite ' + Math.random() * 4 + 's ease-out'}; opacity: ${Math.random() * 5 / 10 + 0.5}"><div></div></div>`;
    }
    $('.footer-nav-regbar').append(s);
}()

优化点：

重复插入 DOM，对性能有影响
链式操作，减少不必要变量的定义

遍历

旧代码：

for(let i=0,len=result.data.length; i<len; i++){
    if(result.data[i].code === 'FindM'){
        data.findm.pricingType$timeList = result.data[i].pricingType$timeList
    }
    if(result.data[i].code === 'FindCM'){
        data.findcm.pricingType$timeList = result.data[i].pricingType$timeList
    }
    if(result.data[i].code === 'FindMM'){
        data.findmm.pricingType$timeList = result.data[i].pricingType$timeList
    }
    if(result.data[i].code === 'FindS'){
        data.finds.pricingType$timeList = result.data[i].pricingType$timeList
    }
}

新代码：

result.data.forEach(item => {
    （data[item.code.toLowerCase()] || {}).pricingType$timeList = item.pricingType$timeList || {};
});

优化点：

代码简洁优雅，性能更好，
能用性更强

转载于:https://my.oschina.net/pauli/blog/1815378