飞码LowCode前端技术系列:如何便捷快速验证实现投产及飞码探索 | 京东云技术团队

京东云开发者
• 阅读 253

本篇文章从数据中心,事件中心如何协议工作、不依赖环境对vue2.x、vue3.x都可以支持、投产页面问题定位三个方面进行分析。

一、数据中心,事件中心设计

飞码是数据驱动+事件驱动的产品,考虑到飞码运行环境,飞码自己封装了store。

数据中心:在同一个页面中可能存在多个飞码标签,飞码通过实例化实现store。在接入飞码的时候详见图1

飞码LowCode前端技术系列:如何便捷快速验证实现投产及飞码探索 | 京东云技术团队

图1

在运行的时候,飞码会对该部分创建一个实例。详见图2

飞码LowCode前端技术系列:如何便捷快速验证实现投产及飞码探索 | 京东云技术团队

图2

数据中心会根据当前运行环境,借用不同技术栈底层能力,实现数据流转。图2中JSONSchema来自图1中paasDSL或者通过页面id获取,其中页面pageId优先级最高。

事件中心:页面生命周期函数与用户操作的时候会触发事件,事件可能会触发其他事件。事件类型详见飞码[LowCode前端技术(三)]。飞码事件通过实例化对象实现,事件被触发的时候会创建一个事件实例eventCenter,编辑态事件产物eventId与事件中心相对应。有时会弹框消失的时候会触发其他事件,其它事件持续执行任务。飞码引入事件增强机制,对弹框消失的时候进行监控,并持续执行之前任务。详见图3

飞码LowCode前端技术系列:如何便捷快速验证实现投产及飞码探索 | 京东云技术团队

图3

事件中心会触发数据中心数据的改变,数据中心会触发组件相关UI改变。之间关系详见图4,箭头指向并不是每次都会发生,例如页面生命周期函数不一定配置了事件,在页面运行的时候若生命周期函数中没有配置事件,则不会触发事件中心。

飞码LowCode前端技术系列:如何便捷快速验证实现投产及飞码探索 | 京东云技术团队

图4

二、不依赖环境设计

前端项目技术栈差异,目前主流的技术栈有vue(vue2.x,vue3.x),react。依据部门内部技术栈情况,飞码支持vue2.x,vue3.x。详见图5

飞码LowCode前端技术系列:如何便捷快速验证实现投产及飞码探索 | 京东云技术团队

图5

飞码运行态的组件使用h函数进行开发,组件中对环境进行了判断。每一个组件与数据中心关联,数据中心通知组件的更新。组件的事件与事件中心关联。以button为例,通过isV3()判断当前运行环境是不是vue3进行适配。详见图6

飞码LowCode前端技术系列:如何便捷快速验证实现投产及飞码探索 | 京东云技术团队

图6

飞码对于复杂业务场景设计思路与电路图设计一致,飞码本身也是一种组件,飞码支持嵌套自己。详见图7

飞码LowCode前端技术系列:如何便捷快速验证实现投产及飞码探索 | 京东云技术团队

图7

问题:飞码会支持react吗?

会支持的,根据目前业务场景需求,对数据中心、事件中心增加react能力即可。目前模式不会发生变化的。

三、投产页面问题定位

FMHelper在编辑态可对页面众多问题进行监测,当页面预览之后发现有问题,搭建人员需要有前端经验才可以对问题进行定位之后在编辑态进行更改,达到预期效果。若不太了解前端知识的情况下快速定位并更正是飞码探索方向之一。
飞码持续在便捷、稳健、0测试方向探索。

四:小结

本章节分析了飞码如何便捷快速验证实现投产及飞码探索,分别数据中心,事件中心如何协议工作、不依赖环境对vue2.x、vue3.x都可以支持、投产页面问题定位三个方面进行了详细介绍。下章节介绍[飞码LowCode前端技术(七)]飞码画布技术介绍。

作者:京东科技 王光辉

来源:京东有开发者社区 转载请注明来源

点赞
收藏
评论区
推荐文章
飞鹅官方账号 飞鹅官方账号
2个月前
飞鹅博客如何部署?
飞鹅博客如何部署?本文讲一下如何部署飞鹅系统,首先需要明白飞鹅系统的架构首先先熟悉一下飞鹅的特点一、飞鹅系统的特点飞鹅是一个前后端分离的项目飞鹅前端用vue技术栈,后端go技术栈,数据库为mysql飞鹅总共有3个源码库,分别是博客https://githu
Wesley13 Wesley13
2年前
PPDB:今晚老齐直播
【今晚老齐直播】今晚(本周三晚)20:0021:00小白开始“用”飞桨(https://www.oschina.net/action/visit/ad?id1185)由PPDE(飞桨(https://www.oschina.net/action/visit/ad?id1185)开发者专家计划)成员老齐,为深度学习小白指点迷津。
Wesley13 Wesley13
2年前
UIWebView长按保存图片和识别图片二维码的实现方案(使用缓存)
0x00需求:长按识别UIWebView中的二维码,如下图长按识别二维码0x01方案1:给UIWebView增加一个长按手势,激活长按手势时获取当前UIWebView的截图,分析是否包含二维码。核心代码:略优点:流程简单,可以快速实现。不足:无法实现保存UIWebView中图片,如果当前We
Wesley13 Wesley13
2年前
PPDB——飞桨开发者技术小白
PPDE——飞桨(https://www.oschina.net/action/visit/ad?id1185)开发者技术专家,是飞桨(https://www.oschina.net/action/visit/ad?id1185)开发者技术专家的荣誉认证体系,由飞桨(https://www.oschina.net/action/visit/a
Stella981 Stella981
2年前
Python Challenge Level 18
初学Python,挑战一下流行的PythonChallenge,很不幸,卡在了18关~~被字符字节码之间的转换搞得焦头烂额,不过终于搞定了还是很happy的~~~主要的问题就是16进制形式的字符如何转成字节码(注意:不是encoding)如:\'89','50','4e','47','0d','0a','1a','0a','00
京东云开发者 京东云开发者
5个月前
飞码LowCode前端技术系列(一):数据结构设计 | 京东云技术团队
简介飞码是京东科技研发的低代码产品,可使营销运营域下web页面快速搭建。飞码是单web页面搭建工具,从创建页面到监测再到投产的一站式解决方案。会通过七篇文章介绍飞码,分别是:(1)背景与数据结构设计,(2)如何便捷配置出页面1,(3)如何便捷配置出页面2,
京东云开发者 京东云开发者
5个月前
飞码LowCode前端技术系列(二):如何便捷配置出页面 | 京东云技术团队
一、配置解法中飞码提出了至少需要满足2个大能力点以及对应16个细化点。在业务复杂的场景下数据具有流转性质,事件的触发会改变数据、同时也会触发其他事件等情况。飞码使用数据驱动事件驱动的模式解决数据流转性与事件不确定性问题。数据驱动事件驱动的模式决定了需要
京东云开发者 京东云开发者
5个月前
飞码LowCode前端技术:如何便捷配置出页面 | 京东云技术团队
简介飞码是京东科技平台研发部研发的低代码产品,可使营销运营域下web页面快速搭建。本文将从三个方面来讲解如何便捷配置出页面,第一部分从数据、事件、业务支持三个方面进行分析,第二部分从模板与页面收藏与升级、页面UI结构、画布功能三个方面进行分析,第三部分从监
京东云开发者 京东云开发者
4个月前
飞码LowCode前端技术之画布的设计 | 京东云技术团队
简介本章节从精准定位、分层设计、异步组件、拖拽四个方面分析飞码画布设计。一、精准定位设计飞码画布是一个套件,可对外提供画布能力。精准定位有两种情况,一是目标组件无子组件,而是目标组件有子组件。无子组件:目标组件分为支持与不支持放子组件两种情况。有子组件:鼠
为什么mysql不推荐使用雪花ID作为主键
作者:毛辰飞背景在mysql中设计表的时候,mysql官方推荐不要使用uuid或者不连续不重复的雪花id(long形且唯一),而是推荐连续自增的主键id,官方的推荐是auto_increment,那么为什么不建议采用uuid,使用uuid究