重复渲染问题
1. 原因:
对于不断变化的需求,我们不想改变原有代码的实现逻辑,就会想着直接在原有代码基础上累加新需求的代码,这样会导致代码重复,并且页面会多次改变重新渲染——重复渲染,这影响了页面渲染效率。
2. 代码:
优化前的js 代码:
//页面初始化
initPage();
//初始化页面
function initPage(){
initSelect(); //渲染下拉框
initTable(); //渲染表格
}
function add(){
//添加成功
...
initPage(); //重新初始化页面
}
优化后的js 代码:
//页面初始化
initPage(true);
//初始化页面
//@param flag 标识是否重新渲染部分页面
function initPage(flag){
flag && initSelect(); //渲染下拉框,这里flag整个页面对于下拉框只渲染一次
initTable(); //渲染表格
}
function add(){
//添加成功
...
initPage(false); //重新初始化页面,只需要渲染表格即可,不需要渲染下拉框
}