使用VirtualView渲染的前端UI组件开发模式

简介:

上篇文章中,我讲到我们的组件开发模式解决了以下几个问题

  1. 渲染逻辑,业务逻辑,事件分发,控制器彻底分离
  2. 组件内部只有一个状态
  3. 渲染逻辑只有一处
  4. 只绑定一次事件
  5. 没有任何学习成本

下面来看我们具体我们是通过什么方式解决的

  1. 渲染逻辑,业务逻辑,事件分发,控制器彻底分离,易于维护和重用

    我们在原来的开发中一般都是把这些代码都写在同一个文件中,整个文件上千行是常有的事。在维护代码或者根据需求的变化修改代码的时候会变得极其困难,从团队的角度来说,根本没法互相协作。为了解决这些问题我们把一个组件拆分为渲染逻辑,业务逻辑,时间分发,和控制器。下面是我们开发一个组件时的文件结构

    组件文件结构

    - index.js
    
        组件的控制器: 主要负责组件的变量的初始化,这些变量主要包括组件的container,template,event,store,initData;根据不同的状态拿到对应的模版;virtual dom的转换,diff,pattch;事件的绑定与解绑。
    
    - store.js
    
        业务逻辑: 主要负责在内存中对业务逻辑的处理,如add,remove,modify,query等的操作,处理完成后把最终的状态告诉组件的控制器,组件只会存在这样的一个唯一的状态;同时也负责从service中取得数据。
    
    - tempate.js
    
        渲染逻辑: 该文件中都是组件的不同的状态对应的模版方法,每个方法都会根据传入的组件状态参数,和相对应模版结构组合为最终的html.
    
    - actions.js
    
        事件分发: 该部分主要用于组件的对外通信,如果组件内部的变化需要通知其他组件,就需要该部分来协作完成。
    
  2. 组件内部只有一个状态

    组件内部只有一个状态是通过Store来维护的,这里所说的状态其实就是组件需要的数据。组件的初始化数据会传给store,在每次事件的操作会触发store中的对数据的处理方法,等数据更新完成会发出一个updateData的事件告诉组件控制器。具体的实现看下面的代码

    
            createStore: function(){
                var Store = this.get('store');
                var that = this;
    
                if(Store){
                    var initData = this.get('initData');
                    var storeObj = new Store({
                        data:initData
                    });
                    storeObj.on('updateData',function(e){
                        var data = e.data.data;
                        that.updateView(data);  
                    });
    
                    this.store = storeObj;
                }
            }
    
  3. 渲染逻辑只有一处

    组件的所有渲染都是通过一个render方法进行.在render方法中拿到最新的html字符串,通过VirtualHtml转换为VirtualDom,如果是首次渲染就直接附加到真正的dom树上;如果是以后渲染,需要拿最新的VirtualDom和上次的VirtualDom进行diff,把diff所产生的patches,patche到真正的dom树上。具体的实现看下面的代码

    
        render: function(data,cb){
            var that = this;
    
            var firstRender = !this.tree;
    
            this.renderedTemplate = this.buildHTML();
    
            //把字符串转换为dom
            VirtualHtml(this.renderedTemplate, function (err, dom) {
                if (err) {
                    if (cb) return cb(err);
                    throw err;
                }
    
                if (firstRender) {
                    that.tree = dom;
                    that.el = CreateElement(dom);
                } else {
                    var patches = Diff(that.tree, dom);
                    that.tree = dom;
                    that.el = Patch(that.el, patches);
                }
    
                if (cb) cb(null, that);
            });
        }
    
    
  4. 只绑定一次事件

    会在组件的容器上或者页面的body上绑定一次事件,以后组件内部的所有的事件操作都是基于这个事件代理外分发。具体的实现代码如下

        delegateEvents: function(events) {
            //默认通过参数传入,也可以通过配置属性传入
            events = events || this.get('events');
    
            if (!events) return this;
    
            //循环所有事件,并代理
            for (var key in events) {
                var method = events[key];
                if (!S.isFunction(method)) method = this[events[key]];
                if (!method) continue;
                var match = key.match(delegateEventSplitter);
    
                this.undelegate(match[1], match[2]);
                this.delegate(match[1], match[2], S.bind(method, this));
            }
            return this;
        }   
    
  5. 没有任何学习成本

    * 基于开发这都很熟悉的字符串模版
    * virtual dom的相关操作封装在所有组件的基类中,对开发者不透明
    

这里是源码文件http://g.tbcdn.cn/de/cicada/1.0.0/widget/base-widget/index.js,这篇文章其实是一篇对源码的解读。

最后我想说的是,我们数娱用到的ui组件开发模式,都不是最新的或者我们发明的[实际上大部分的框架也都是这样,没有发明什么新技术],我们做的只是把开发过程中的重复行为或者容易犯错误的地方封装在框架中,从根本上解决了开发人员的开发效率低,写的代码不易于维护和扩展的问题。

目录
相关文章
|
3月前
|
前端开发 JavaScript 定位技术
一、前端高德地图注册、项目中引入、渲染标记(Marker)and覆盖物(Circle)
文章介绍了如何在前端项目中注册并使用高德地图API,包括注册高德开放平台账号、引入高德地图到项目、以及如何在地图上渲染标记(Marker)和覆盖物(Circle)。
97 1
|
2月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
前端开发 JavaScript API
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
深度剖析:前端如何驾驭海量数据,实现流畅渲染的多种途径
87 3
|
3月前
|
前端开发 开发者 UED
前端只是切图仔?来学学给开发人看的UI设计
该文章针对前端开发者介绍了UI设计的基本原则与实践技巧,覆盖了布局、色彩理论、字体选择等方面的知识,并提供了设计工具和资源推荐,帮助开发者提升产品的视觉与交互体验。
|
2月前
|
JavaScript 前端开发 应用服务中间件
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
Vue开发中,在实现单页面应用(SPA)前端路由时的hash模式和history模式的区别及详细介绍
35 0
|
3月前
|
前端开发 定位技术 API
二、前端高德地图、渲染标记(Marker)引入自定义icon,手动设置zoom
文章介绍了如何在前端使用高德地图API渲染标记(Marker),并引入自定义图标,同时展示了如何手动设置地图的缩放级别。
314 1
|
3月前
|
前端开发
前端web入门第四天】03 显示模式+综合案例热词与banner效果
本文档介绍了HTML中标签的三种显示模式:块级元素、行内元素与行内块元素,并详细解释了各自的特性和应用场景。块级元素独占一行,宽度默认为父级100%,可设置宽高;行内元素在同一行显示,尺寸由内容决定,设置宽高无效;行内块元素在同一行显示,尺寸由内容决定,可设置宽高。此外,还提供了两个综合案例,包括热词展示和banner效果实现,帮助读者更好地理解和应用这些显示模式。
|
4月前
|
开发者 C# Android开发
明白吗?Xamarin与Native的终极对决:究竟哪种开发方式更适合您的项目需求,让我们一探究竟!
【8月更文挑战第31天】随着移动应用开发的普及,开发者面临多种技术选择。本文对比了跨平台解决方案Xamarin与原生开发方式的优势与劣势。Xamarin使用C#进行跨平台开发,代码复用率高,可大幅降低开发成本;但因基于抽象层,可能影响性能。原生开发则充分利用平台特性,提供最佳用户体验,但需维护多套代码库,增加工作量。开发者应根据项目需求、团队技能和预算综合考量,选择最适合的开发方式。
121 0
|
4月前
|
API Java 数据库连接
从平凡到卓越:Hibernate Criteria API 让你的数据库查询瞬间高大上,彻底告别复杂SQL!
【8月更文挑战第31天】构建复杂查询是数据库应用开发中的常见需求。Hibernate 的 Criteria API 以其强大和灵活的特点,允许开发者以面向对象的方式构建查询逻辑,同时具备 SQL 的表达力。本文将介绍 Criteria API 的基本用法并通过示例展示其实际应用。此 API 通过 API 构建查询条件而非直接编写查询语句,提高了代码的可读性和安全性。无论是简单的条件过滤还是复杂的分页和连接查询,Criteria API 均能胜任,有助于提升开发效率和应用的健壮性。
143 0
|
4月前
|
前端开发 数据处理 开发者
解锁Django模板系统终极奥义!揭秘高效前端渲染秘籍,让你的网站秒变炫酷黑科技!
【8月更文挑战第31天】Django作为Python的高级Web框架,内置的模板系统支持动态HTML渲染。本文通过在线书店案例,详细介绍Django模板系统的设置与高效渲染技巧,包括创建模板文件、编写视图函数及URL配置。通过合理使用过滤器、深度查询和模板继承等技巧,提升前端渲染效率和安全性,优化Web应用开发流程。
27 0