一、应用简述

为了完整表述应用的开发过程,根据自己的理解进行描述,或有不准确,望请指正。本应用及数据转换,后台交互均有一个人独立完成。设计模式在逐渐摸索中进行扩展,对不利于开发,重复的功能模块,及时进行整合。

二、设计模式

由于考虑到后续的代码扩展性,模块化是必要的,并且是必须的,面向的可能不是单一的API接口,需要统一函数和方法的使用,兼容ES5和ES6的写法,函数的结构便于转换CommonJS。   

数据层 JSON数组(数据通过静态或后台接口获取)

模块层modules(由define封装成各模块,每个模块尽量独立,为开发最小单元)

展示层widget(根据模块结合样式(CSS)实现半功能显示效果)

功能层 app(确定的功能,由denfine封装,通过require挂接到主JS文件,并通过参数共享全局变量)

三、功能模块化

本项目使用RequireJS进行模块化,ES5和ES6并行使用。模块化是为了组件分发,使用requre进行模块的组装。

模块化的目的是为了减少重复开发量,方便模块移植和分发,更快速的实现基础通用功能。模块内设置可变参数变量,在模块初始化时配置各内部参数(不配置则使用默认配置参数)。对于不符合AMD规范的第三方插件进行修改,使其符合统一的引用模式。不能修改则直接引用。各模块的引用使用统一配置文件进行管理。

JS功能分为三层,第一层主JS文件;第二层功能性JS文件;第三层模块JS文件或widget的JS文件;主JS引用功能JS,功能JS引用模块JS,各功能相互独立,便于挂载和移除。

CSS(层叠样式表)通过分层来统一各页面的样式显示。第一层:全局样式;第二层:公用样式;第三层独特样式

四、版本控制

本项目使用Git来进行版本控制,重点在于协调多地开发,在没有网络的情况下可以继续开发进程,另外进行代码控制和分支管理。

五、打包部署

本项目使用r.js打包,由于mapboxGL打包有问题,打包之后需要修改项目文件,满足运行的要求。

六、附言

1、Bootstrap框架提供前端搭建模板

2、MapboxGL地图库提供地理数据及地图切片可视化

3、Jquery提供节点操作和前后端数据交流

4、ThreeJS结合地图库提供模型加载

5、Turf提供前端地理计算、分析功能

6、Proj4提供坐标点的投影转换

7、Font-awesome提供图标符号

8、GEOJSON数据格式作为系统内部数据交流的统一格式。

应用链接

发表评论

邮箱地址不会被公开。 必填项已用*标注