设备数据管理前端模块化设计构建

最新推荐文章于 2022-09-10 10:38:31 发布

风飞扬fq

最新推荐文章于 2022-09-10 10:38:31 发布

阅读量630

点赞数 1

分类专栏：前端笔记文章标签：前端模块化

本文链接：https://blog.youkuaiyun.com/fq_fly/article/details/97882945

版权

前端笔记专栏收录该内容

29 篇文章

订阅专栏

设备数据管理前端模块化设计构建

根据公司业务需求，本人根据现有资源搭建LAMP平台，其中L代表Linux操作系统，A代表Apache服务器，M代表MYSQL数据库，P代表PHP语言。应用现有的DIV+CSS布局前端页面，根据业务需求使用PHP语言设计后端业务逻辑，从而设计出一款设备的数据管理平台。
由于公司业务的不断扩展，客户数量越来越多，各个客户不同的定制化需求随之不断增加，前端代码的版本维护越来越复杂。针对此现状，产生模块化设计的想法。将平台业务的各个功能模块化，组件化设计，根据不同客户的需求进行相对应的配置，配置过后形成对应需求的数据管理页面。
前端的模块化组件化设计，就是将数据管理平台所有的功能业务看做是一个一个的功能模块。首先需对平台的业务作一个逻辑拆分，把控拆分粒度，形成相对应适合的业务模块。
数据管理平台框架如图所示

拆分设计标准如下：

模块职责明确
模块代码边界清晰
模块之间数据通信清晰

拆分注意要点如下：

各个业务模块之间的依赖关系
业务功能之间的耦合关系
业务模块页面之间的跳转逻辑
业务模块之间的事件通知
业务模块之间数据接口的调用

根据上述设计标准及设计注意点，后端逻辑设计方面拆分平台业务，把控拆分粒度，形成业务功能模块，明确各个业务模块之间的代码边界，数据通信，依赖关系等模块化要求，将后端业务代码相关功能定义在一个函数组件中。
前端页面方面，考虑到不同组件相互影响及不同的配置对页面的排版的影响，考虑DIV盒子式的布局。类似的代码如下：

<body>
	<div id="box1" class="box1"></div>
	<div id="box2" class="box2"></div>
	<div id="box3" class="box3"></div>
	<div id="box4" class="box4"></div>
	<div id="box5" class="box5"></div>	
</body>

考虑到页面的排版布局，样式box1-box5的风格设计需类似，使得不同的配置之后对页面的影响降至最小。
业务功能配置页面的设计初步考虑两种思路：

PHP设计
设计思路与用户权限管理相类似，每个业务功能模块配置一个FLAG标识，业务功能模块配置之后将其FALG置0。前端页面根据FLAG标识确定是否显示相对应的div模块。
HTML设计
设计思路应用JavaScript，调用DOM方法，设置样式Style中dispaly属性。定义相关函数，当配置业务功能之后，将不需要的盒子DIV的样式属性设置成none，使其不显示，从而达到前端页面根据所需业务模块显示的效果。关键代码如下：

document.getElementById("box1").style.dispaly="none";

此设计方法中业务需求配置页面与各前端页面之间的逻辑还需进一步研究。

最后推荐一个公众号，一枚IT技术人成长路上关于生活和职场的思考，欢迎书友们前来交流和分享心得

在这里插入图片描述