JavaScript之重复渲染问题

重复渲染问题

 

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)；  //重新初始化页面，只需要渲染表格即可，不需要渲染下拉框

}