高质量编码-实现基于html的参数配置

Web前端编程中为了方便代码的复用性扩展性易读性,往往需要配置参数。现在多数都是通过json文件来配置。往往人们过于关注表面,优化的根本是业务的优化,代码本身的优化,而不仅是使用新技术,程序员产品经理架构师都得自身角色称职合格,并且业务经验丰富技术眼界开阔克制冲动用心完成功能,满足需求,在项目迭代过程中凝练提取确定性因素,甚至汲取客户意见,扩展需求和丰富细节。往往大家注重手边项目开发,忽视重构和优化,很少去回头看,永远忙碌着下一个。如果说编码开发体现的是逻辑高度重构优化体现的是思维高度

回归话题,我所在公司为了节省后台开发,往往在需要后台修改,甚至需要改写SQL语句,甚至发现数据库设计以及后端设计一团乱,为了所谓的省时省力,一个子项目竟然有40个json配置文件。作用是将后端数据基于id进一步修改或连接或例外来满足前端要求。后果就是前端存在大量的业务判断,例外处理。代码没有任何复用性而且混乱难以修改调试。这样做毫无意义,后端做一遍,前端配置文件做一遍,前端js代码再做一遍。而且前端js代码依然大量存在业务数据。

json配置文件

所以本人采用将某些配置参数写在html页面中,类似xml的思想,修改代码只需修改一处。为了使其通用,而且更容易修改参数,采用ul和li嵌套的方式。

日志参数,数据报警参数,函数参数

onLoad表示地图加载完成后需要执行的函数,preLoad表示地图加载前需要执行的函数。通过函数在外面配置,实现业务代码和逻辑代码分离,逻辑代码易于复用。

函数放在<pre><code>标签里,方便函数可视化和编辑。

这种配置方式很灵活和强大,可以实现任意层级的配置,如果不想嵌套层级太多,也可以随时以code方式返回json对象表示的配置。

直接以code方式返回json对象避免嵌套层次太深造成混乱
每层以<li>结束,若有子节点,必须再嵌套一层<ul>,在<ul>里继续写<li>

下面介绍解析嵌套<ul><li>的函数,通过递归方式:

递归函数实现解析<ul><li><ul>为字典树
所有配置存在dictConfig里来供js代码取用

接下来我们要陆续介绍以这种配置方式零编码实现静态地图图层的管理,以及动态地图图层GraphicsLayer表示的实时监测点位数据。

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券