2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

栏目: 前端 · 发布时间: 6年前

内容简介:本讲座主要分享Web前端开发项目设计过程中的一些经验,为提高项目工程开发效率、提升用户体验、提高项目可维护性而做出一些规划。遥感可视化开发中存在组件复用的情况,在遥感的参数设计以及提交的过程中,遥感的参数及处理流程有很多雷同的地方,一方面开发人员要写出具有好的开发体验代码,另一方面也要提高开发效率写出简介高效的代码。因此,在前期设计中开发人员需要考虑到组件的复用性和扩展性,这样一方面在项目进行时开发效率有保证,后期功能维护以及用户提出新的需求时系统的可维护性有保障。因此本讲座以海岸带遥感数据处理与分析系统

本讲座主要分享Web前端开发项目设计过程中的一些经验,为提高项目工程开发效率、提升用户体验、提高项目可维护性而做出一些规划。

遥感可视化开发中存在组件复用的情况,在遥感的参数设计以及提交的过程中,遥感的参数及处理流程有很多雷同的地方,一方面开发人员要写出具有好的开发体验代码,另一方面也要提高开发效率写出简介高效的代码。因此,在前期设计中开发人员需要考虑到组件的复用性和扩展性,这样一方面在项目进行时开发效率有保证,后期功能维护以及用户提出新的需求时系统的可维护性有保障。因此本讲座以海岸带遥感数据处理与分析系统为例从三个方面来讲述Web遥感前端开发的一些心得体会:组件化、状态管理、生命周期。

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

1、组件化

其实组件化就是面向对象化的思想。组件化可以对应于一个类,每个类都对外输出不变的接口,只要接口不变,类与类间的通讯可以根据接口进行,由此类与类间的耦合度就降低了。同时复杂的类可以通过若干个简单的类组合而成,这样一来,不但可以提高组件的复用性,同时可以通过组合的思想来设计复杂的控件,也极大地降低了复杂控件的设计难度。

React的做法是,把这个界面不断分解,一个大而复杂的控件分解成多个小控件的组合,小控件还可以继续往下分割,分成更小更简单的控件组合,这种分割继续进行,直到不可再往下细分为止。

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

如上图所示本系统中的产品查询模块与每个功能模块的数据检索模块相同或者相似(如图像裁剪),如果我们采用传统写法,本系统涉及到20几个功能模块,每个都要重写一遍似乎很不恰当,因此组件的复用设计思想在这里很好得体现出来。我们可以按照小功能对每一个查询模块做层层分割。我们可以分为感兴趣区绘制单元、日期选择单元、以及checkbox单元(传感器类型选择和产品选择),分割到不可再分割为止,如每个checkbox。

在系统的个人中心产品管理模块(如下图所示),我们可以再次看到日期查询、产品查询、传感器类型选择组件的复用。

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

产品查询结果模块也很好使组件得到充分的重复使用,查询结果是一个一个的li标签组成的list,每一次的查询都会生成list(如下图所示)

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

厦门大学海岸带遥感数据处理与分析系统的功能模块面板首页设计大致包含以下几个方面

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

因此前端在每个功能模块的使用就是组件的组合使用和复用,前端人员的效率可以大大提高,组件化让系统简洁、干净

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

2、状态管理

React的核心思想是组件化的思想,应用由组件搭建而成,而组件中最重要的概念是State,State是一个组件的UI模型,是组件渲染时的数据依据

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

但是单向逐层传递使得数据传递变得复杂,后期难以维护,应用层级一旦增多,维护人员的的维护成本会变高,因此,此时使用redux做状态管理

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

3、生命周期

组件是有生命周期的,在生命周期的各个时期组件执行不同的动作(组件的更新、事件的响应、组件的卸载)。

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用

生命周期函数和组件状态紧密相连,当组件状态发生改变时,组件调用相应生命周期函数,重新render组件。使用生命周期管理组件可以提高页面渲染效率,可以避免许多不必要的渲染、提高组件性能。

总结

2018UC-ENVI讲座分享:Web遥感前端开发与项目应用


以上所述就是小编给大家介绍的《2018UC-ENVI讲座分享:Web遥感前端开发与项目应用》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Game Engine Architecture, Second Edition

Game Engine Architecture, Second Edition

Jason Gregory / A K Peters/CRC Press / 2014-8-15 / USD 69.95

A 2010 CHOICE outstanding academic title, this updated book covers the theory and practice of game engine software development. It explains practical concepts and techniques used by real game studios,......一起来看看 《Game Engine Architecture, Second Edition》 这本书的介绍吧!

Base64 编码/解码
Base64 编码/解码

Base64 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具

正则表达式在线测试
正则表达式在线测试

正则表达式在线测试