基于react-native的原型设计开发工具的设计与实现
发布时间：2021-12-19 03:29
近几年来,前端技术发展迅猛。前端日趋组件化和复杂化,并且随着手机端混生开发的兴起和桌面程序框架如electron的出现,前端几乎覆盖了由服务器到浏览器到手机端再到桌面程序如此巨大的开发范围。但是,问题也出现了,对于日趋饱满甚至过剩的前端组件、框架,在进行开发人员的过渡时,都需要重新掌握这些知识,增加了学习成本。而往往由于每个人的内在知识体系不同,对于框架的选择也是偏重不同,增加了框架变动的机率,这对于继承过往封装、开发出的优秀组件,无疑是没有帮助的。本文通过对上述问题和开发需求的分析,设计并实现了基于react-native的原型设计开发工具,采用菜单辅助团队管理、维护组件,并通过内部实现的GUI模块透明化应用框架,使得同一个团队可以采用一个工具完成多个端的开发任务。开发人员可以采用该原型设计工具,借由该工具内的gui辅助设计模块快速完成手机app或者网页的原型设计并生成代码,节省技术调研的学习成本。基于react-native的原型设计工具采用electron框架提供运行时环境,electron由主线程和ui线程构成,彼此通过消息转发进行交互。对于需要操作本地资源以及权限需求的业务分...
【文章来源】：山东大学山东省 211工程院校 985工程院校 教育部直属院校
【文章页数】：80 页
【学位级别】：硕士
【部分图文】：
图２－１系统架构图??８??
树的形式进行组织，同时分析源代码的组件标签，将每个组件标签的位置以及??相应结点的属性、样式映射到语法树的对应结点属性。??源代码语法解析流程如下图２－２所示：???语法綱？流程????■Ｓｇｔｆｇ?ｇ染进ｇ?文件楼铁?ｒｅｄｕｘＳｆｌｇｊＳ????（—）?ＸＸ?Ｎ?，?，?，?，??ｒＫ＾ｏｒｃｆｃｈＪ＾?衫６Ｐａｒｓ＂?ｈＨ?ｂａｂｙ丨如进行边法分祈?Ｉ—??丨卜耐的丨?Ｙ?ｉ?｜｜＞ｒｔａＷｒ．Ｓ８Ｗ？．?ｔｔｇ??１６进獅８?｜?ｇ？絲达式糊ｎ?，??｜?析组件衍ｓ的文本位ｇ?１??｜?Ｃａ膝奴勘??★?：????｜条降ｇ达式》这ＪＳＸ眾达ｉｔ腔祈｜??丨ｈ?卜仏一叫卜一—纖?????图２－２源代码语法解析流程图??首先，开发人员在文件树上进行文件打开操作，随后文件模块在ｒｅｄｕｘ的??文件缓存数据中进行命中检测。文件缓存数据的数据结构如下表２－１所示：??１０??
??ｉｐｃ消息交互时序如下图２－３所示：??丨主谢Ｓ：ｍａｍｊｔ?｜?｜?ｆｉｌｃＨａｎｄｌｅｒ?｜?｜?Ｂｎｄｇ？?｜?［?Ｒｅ＜；ｕｅｓｔＥｍｉｔｔｅｒ?｜?｜?：?Ｒｅｕｑｅｓｔ?｜??：?ｊ?ｉｐｃＲｅｎｄｅｒ．ｏｎ??：?ｊＳＩｔｆＨＲＢ?主撕輸?ＪＢ??门?．Ｉ?门■■…??ｒｅｇｉｓｔｅｒ?／■－－—＞?丨糰?？??对ｍ?＊?ｓ?ｓ?＊?ｇ?ｅ丨ｄ进行ｉｔｆＳ??ｃｏｎｓｔｒｕｃｔｏｒ?；?初触?「＿???？??１?ｉｐｃＭａｉｎ．ｏｎ??Ｂｒｉｄｇ？．ｏｎ?ｔｔ?听来?ＳｉｌＲｆｔｉＳｉＥＳＳＳ?’??ＳＥＷ？来ｇｎｏｄｅｊｓ的濟＊?嚅?Ｉ??一?ｅｘ?回ｑａｐ?？ｉｐｃ＊ａｏ？？ｎ〇ｄｅｊｓｉｊ！ｉ?越ｉｐｃｊｆｌｊｅ??图２－３?ｉｐｃ消息交互过程??２．?１．３本地资源操作过程??主线程的本地资源操作模块是用于解决ｕｉ线程对于本地资源操作的权限??问题而设计的。本地资源操作可划分为文件内容读取、文件保存、文件新建、??文件删除、文件重命名、ｎｐｍ组件安装、ｒｅａｃｔ－ｎａｔｉｖｅ工程新建。??文件内容读取的过程涉及到ｕｉ线程的文件模块、主线程的ｉｐｃ消息转发模??块和编辑器模块，如下图２－４所示：??ｕｉ银呈文辦１＾￣｜?丨ｉｐｃ；？肖思转雄丨本地资觸作ｉｉＴ｜?｜?ｓ法解析ｆ莫块??＾缓存检测??？???缳存命中．交由??编铝器进行显示?：??缓存
【参考文献】：
期刊论文
[1]SWT搭建仿Eclipse框架界面[J]. 张健. 电脑编程技巧与维护. 2012(19)
[2]基于Java的GUI设计与实现[J]. 曾雅琳,郭斌. 计算机与现代化. 2005(10)
硕士论文
[1]基于Qt的图形用户界面的研究与实现[D]. 缪雨润.东南大学 2015
[2]Eclipse平台GUI测试插件的设计与实现[D]. 赵旭.大连海事大学 2012
[3]基于SWT/JFACE可定制的TABLE控件设计与实现[D]. 马月花.北京邮电大学 2012
[4]基于Eclipse RCP的应用系统研究与实现[D]. 金星善.武汉理工大学 2011
[5]基于Eclipse的可视化工作流编辑器的研究与实现[D]. 石一峰.电子科技大学 2009
[6]基于故事板的用户界面原型工具的研究与实现[D]. 王蓓.西北大学 2008
[7]WEB快速应用开发框架的研究[D]. 秦长春.重庆大学 2008
[8]Eclipse中工具界面集成的研究[D]. 马钊.西安电子科技大学 2007
[9]基于IBM Workplace架构的企业应用的研究与实现[D]. 黄玮.浙江大学 2006
[10]基于Eclipse的WEB应用快速开发工具的研究与实现[D]. 甘树满.中国地质大学（北京） 2006
本文编号：3543683
【文章来源】：山东大学山东省 211工程院校 985工程院校 教育部直属院校
【文章页数】：80 页
【学位级别】：硕士
【部分图文】：
图２－１系统架构图??８??
树的形式进行组织，同时分析源代码的组件标签，将每个组件标签的位置以及??相应结点的属性、样式映射到语法树的对应结点属性。??源代码语法解析流程如下图２－２所示：???语法綱？流程????■Ｓｇｔｆｇ?ｇ染进ｇ?文件楼铁?ｒｅｄｕｘＳｆｌｇｊＳ????（—）?ＸＸ?Ｎ?，?，?，?，??ｒＫ＾ｏｒｃｆｃｈＪ＾?衫６Ｐａｒｓ＂?ｈＨ?ｂａｂｙ丨如进行边法分祈?Ｉ—??丨卜耐的丨?Ｙ?ｉ?｜｜＞ｒｔａＷｒ．Ｓ８Ｗ？．?ｔｔｇ??１６进獅８?｜?ｇ？絲达式糊ｎ?，??｜?析组件衍ｓ的文本位ｇ?１??｜?Ｃａ膝奴勘??★?：????｜条降ｇ达式》这ＪＳＸ眾达ｉｔ腔祈｜??丨ｈ?卜仏一叫卜一—纖?????图２－２源代码语法解析流程图??首先，开发人员在文件树上进行文件打开操作，随后文件模块在ｒｅｄｕｘ的??文件缓存数据中进行命中检测。文件缓存数据的数据结构如下表２－１所示：??１０??
??ｉｐｃ消息交互时序如下图２－３所示：??丨主谢Ｓ：ｍａｍｊｔ?｜?｜?ｆｉｌｃＨａｎｄｌｅｒ?｜?｜?Ｂｎｄｇ？?｜?［?Ｒｅ＜；ｕｅｓｔＥｍｉｔｔｅｒ?｜?｜?：?Ｒｅｕｑｅｓｔ?｜??：?ｊ?ｉｐｃＲｅｎｄｅｒ．ｏｎ??：?ｊＳＩｔｆＨＲＢ?主撕輸?ＪＢ??门?．Ｉ?门■■…??ｒｅｇｉｓｔｅｒ?／■－－—＞?丨糰?？??对ｍ?＊?ｓ?ｓ?＊?ｇ?ｅ丨ｄ进行ｉｔｆＳ??ｃｏｎｓｔｒｕｃｔｏｒ?；?初触?「＿???？??１?ｉｐｃＭａｉｎ．ｏｎ??Ｂｒｉｄｇ？．ｏｎ?ｔｔ?听来?ＳｉｌＲｆｔｉＳｉＥＳＳＳ?’??ＳＥＷ？来ｇｎｏｄｅｊｓ的濟＊?嚅?Ｉ??一?ｅｘ?回ｑａｐ?？ｉｐｃ＊ａｏ？？ｎ〇ｄｅｊｓｉｊ！ｉ?越ｉｐｃｊｆｌｊｅ??图２－３?ｉｐｃ消息交互过程??２．?１．３本地资源操作过程??主线程的本地资源操作模块是用于解决ｕｉ线程对于本地资源操作的权限??问题而设计的。本地资源操作可划分为文件内容读取、文件保存、文件新建、??文件删除、文件重命名、ｎｐｍ组件安装、ｒｅａｃｔ－ｎａｔｉｖｅ工程新建。??文件内容读取的过程涉及到ｕｉ线程的文件模块、主线程的ｉｐｃ消息转发模??块和编辑器模块，如下图２－４所示：??ｕｉ银呈文辦１＾￣｜?丨ｉｐｃ；？肖思转雄丨本地资觸作ｉｉＴ｜?｜?ｓ法解析ｆ莫块??＾缓存检测??？???缳存命中．交由??编铝器进行显示?：??缓存
【参考文献】：
期刊论文
[1]SWT搭建仿Eclipse框架界面[J]. 张健. 电脑编程技巧与维护. 2012(19)
[2]基于Java的GUI设计与实现[J]. 曾雅琳,郭斌. 计算机与现代化. 2005(10)
硕士论文
[1]基于Qt的图形用户界面的研究与实现[D]. 缪雨润.东南大学 2015
[2]Eclipse平台GUI测试插件的设计与实现[D]. 赵旭.大连海事大学 2012
[3]基于SWT/JFACE可定制的TABLE控件设计与实现[D]. 马月花.北京邮电大学 2012
[4]基于Eclipse RCP的应用系统研究与实现[D]. 金星善.武汉理工大学 2011
[5]基于Eclipse的可视化工作流编辑器的研究与实现[D]. 石一峰.电子科技大学 2009
[6]基于故事板的用户界面原型工具的研究与实现[D]. 王蓓.西北大学 2008
[7]WEB快速应用开发框架的研究[D]. 秦长春.重庆大学 2008
[8]Eclipse中工具界面集成的研究[D]. 马钊.西安电子科技大学 2007
[9]基于IBM Workplace架构的企业应用的研究与实现[D]. 黄玮.浙江大学 2006
[10]基于Eclipse的WEB应用快速开发工具的研究与实现[D]. 甘树满.中国地质大学（北京） 2006
本文编号：3543683
本文链接：https://www.wllwen.com/kejilunwen/ruanjiangongchenglunwen/3543683.html
