首页 > 如何优化这样处理UI的JavaScript代码写法?

如何优化这样处理UI的JavaScript代码写法?

// jquery 处理UI的代码

//...

$div.scrollTop($div.find('.show-me').offset().top);
// 还有很多其他处理UI的代码
// ...

$(window).on('resize', function() {
    // 当浏览器窗口大小被调整后
    // 需要重新初始化
    // 代码与前面相同

    $div.scrollTop($div.find('.show-me').offset().top);
    // 还有很多其他处理UI的代码
    // ...
});

像这样的代码如何优化啊,相同的代码写了两遍,感觉很不好!


把相同的代码抽离出来封装成一个函数

javascriptvar renderView = function(){
    $div.scrollTop($div.find('.show-me').offset().top);
};

$(window).on('resize', function() {
    renderView();
});

另外,resize是高频触发事件,你还需要考虑函数节流
浅谈javascript的函数节流
浅谈 Underscore.js 中 _.throttle 和 _.debounce 的差异


function ui(){//.....}

ui();

window.on('resize',function(){
    ui();
})
【热门文章】
【热门文章】