开发者社区> slalx_1986> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

基于唯一状态的前端组件开发

简介:
+关注继续查看

facebook的react的框架提出了一个基于唯一状态来渲染前端组件的想法,什么是唯一状态,采用唯一状态渲染到底有什么好处。希望大家看到这篇文章以后不用任何框架也可以写出基于唯一状态渲染的前端组件。

基于唯一状态的组件的开发模式就是组件内部永远只存在一份数据来表示组件的状态,并且更新组件时只只使用这一份数据。

这种开发模式的好处,主要体现在以下两个方面

  • 减少事件与Dom元素的联系
  • 便于保存和恢复组件的状态

减少事件与Dom元素的联系

我们先来看一段传统开发页面交互逻辑时写的代码:


    <span id="click_count">0</span>
    <input id="color">
    <button id="btn">递增</button>

    <script type="text/javascript">
        function $(id){
            return document.getElementById(id); 
        }

        $('color').onkeyup = function(){
            var countDom = $('click_count');
            countDom.style.backgroundColor = this.value;
        } 

        $('btn').onclick = function(){
            var countDom = $('click_count');

            var oldClickCount = parseInt(countDom.innerHTML);
            var newClickCount = oldClickCount+1;

            countDom.innerHTML = newClickCount;
        }

    </script>

如果我们采用基于唯一状态的组件开发模式以后的代码


    <span id="click_count">0</span>
    <input id="color">
    <button id="btn">递增</button>

    <script type="text/javascript">
        function $(id){
            return document.getElementById(id); 
        }
        //这里就是组件的唯一状态
        var state = {
            count:0,
            color:''
        };

        function render(){
            var countDom = $('click_count');

            countDom.style.backgroundColor = state.color;
            countDom.innerHTML = state.count;
        }

        $('color').onkeyup = function(){
            state.color = this.value;
            render();
        } 

        $('btn').onclick = function(){
            state.count++;
            render();
        }

    </script>

通过这个比较简单的事例我们可以看出代码已经简洁了很多。但是这样写到底有什么好处呢,我们通过图形的方式来比较下

第一种方式的图例

第二种方式的图例

通过这个简单的事例,感觉好处不是太明显;但是我们在平常的业务大部分时候要比这复杂的多,会有很多的Event和很多的Element,我们如果采用第一种方式的写法,图例如下

但是如果我们采用第二种方式的写法,图例如下

假如我们有M个Event,有N个Element,如果采用第一种方式的写法,一共会有(M*N)中连接;如果我们采用第二种方式的写法,在Event这里会有M个state的连接,从state到Element会有N个链接,一共的会有(M+N)个链接;这样写是不是简化了很多。

便于记录和恢复组件的状态

我们在开发复杂表单应用,或者操作状态比较多的场景,页面刷新时需要把当前的状态保存到localStorate,服务器端或者文件中,都需要把当前页面作为一个唯一状态保存起来。

上面的这样一个界面,当我们与页面交互时,点击添加,上一条,下一条这些按钮时,所需要做的就是更新这个唯一状态,保存当前状态,重新更新红色的区域,再次刷新页面时还会恢复原来的状态,像下面的代码这样

更新状态


        $('add').onclick = function(){
            state.count++;
            state.items.push('item'+state.count);
            state.pos=state.count;

            saveState();

            render();
        }

        $('prev').onclick = function(){
            if(state.pos==1) return;
            state.pos--;

            saveState();

            render();
        }

        $('next').onclick = function(){
            if(state.pos == state.count) return;
            state.pos++;

            saveState();

            render();
        }

保存状态

把state序列化为字符串后,保存到localStorage中


    function saveState(){

        localStorage.setItem('state',JSON.stringify(state));
    }

渲染组件

获取最新的state,拼装html字符串,然后使用innerHTML重绘整个组件


    function render(){
        state = JSON.parse(localStorage.getItem('state'))||state;

        var items = '';
        var itemData = state.items;

        for (var i = 0,l=itemData.length; i < l; i++) {
            var bg = '';
            var oneItem = itemData[i];

            if(state.pos==i+1){
                bg = 'style="background-color:red"';
            }
            items+='<li '+bg+'>'+oneItem+'</li>';
        };

        var html = '<span>列表数'+state.count+'</span>'+
                    '<ul>'+
                            items+
                    '</ul>'+
                    '<span>当前条目的位置'+state.pos+'</span>';

        $('container').innerHTML = html;
    }   

采用innerHTML重绘组件,每次交互时都会重新渲染整块区域[没有更新的部分也会重新渲染],使得页面的reflow,repaint的次数急剧增加,这样就会造成的页面你的性能下降。

有没有办法解决这个问题呢?答案当然是有的,下篇文章中我们会重点分析解决这个问题。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
基于SSM开发的简易版人力资源管理系统
基于SSM开发的简易版人力资源管理系统
40 0
java中正规的项目包结构:域名倒序.项目名称.模块名称.类名
java中正规的项目包结构:域名倒序.项目名称.模块名称.类名
25 0
绝不误人子弟!零基础应该选择学习Java、PHP,还是前端?(1)
绝不误人子弟!零基础应该选择学习Java、PHP,还是前端?
28 0
web前端开发分享-css,js进阶篇
一,css进阶篇:   等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手的地方可以用firebug, chrome调试工具分析网站结构样式。
2070 0
《SEO的艺术(原书第2版)》——2.2 基于算法的排名系统:爬行、索引和排名
本节书摘来自华章计算机《SEO的艺术(原书第2版)》一书中的第2章,第2.2节,作者:(美)恩吉(Enge, E.)著, 更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1017 0
+关注
41
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载