WebGIS中以version方式实现代码更新后前端自动读取更新代码的方法

简介: 文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/1. 前言GIS代码进行更新后,由于用户前端已有缓存,导致更新的功能不能被及时同步。

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

1. 前言

GIS代码进行更新后,由于用户前端已有缓存,导致更新的功能不能被及时同步。为避免前端请求读取缓存,常见方法是在每一个请求后面加上一个随机生成的变量参数,这样可以保证每个请求都不会跟历史请求重复。但是,这样处理是不合理的,我们虽然避免了读取缓存,但是却会导致系统效率降低。

所以,我们要解决的问题应该是:只有当代码更新后,客户前端第一次触发的所有请求都应该不走缓存,而之后,相同请求缓存继续有效。

2.解决思路

核心思想为,在GIS的每次请求后面带上一个version参数,每次更新后version参数的值均发生变化,于是该version对应的任何请求,第一次均会重新从服务端读取最新数据,但是之后的请求由于version不再变化,缓存继续有效。

所以这里我们实际需要解决的问题变为了,如何能够自动化生成更新version。

3.实现方法

此方案主要针对前端version,所以我们要解决如何能够让该version自动赋值到前端JS代码中,而不是每次我们自己手动给一个version值。由于每次前端更新后,均需要使用ant将代码进行再次编译,所以我们的实现方法为:

a.在进行ant编译时生成时间戳变量,再将该变量直接写入到待打包的JS代码中。

b.前端所有JS代码获取时加上version变量参数。

4.补充一点:如果是数据更新了怎么办?

首先,我们将数据分为两种,一种是我们自己GIS业务库中的配置数据,一种是地理服务器中的数据(包括第三方的地理服务器)。如果这两种数据均有更新,我们如何做到前端及时同步?

4.1GIS业务配置库中的配置数据读取

先抛出解决方案:同样,所有数据类请求加上时间戳,让数据类请求均不走前端缓存。

但是,不走前端缓存并不代表不走后端缓存,而这里则是我们已经或者还需进一步优化的地方:业务库中的GIS基本配置项都会在业务服务器启动时读取到内存中,所以如果配置数据做了更新,传统方案上需要业务服务器重启才行,但是目前业务已经提供了数据重载的接口。

所以,当业务数据做了更新后,要么重启业务服务,要么在构建中点击数据重载(会加入到GIS构建中)。这样可以保证,所有的GIS业务配置类数据请求会进入到后台,但是后台中缓存的数据是最新数据,从而既保证数据最新又避免对数据库的压力。

4.2地理服务器中的数据更新

方案1:同样使用随机时间戳来确保每次请求均是最新的数据,此种方法比较简单通用。

方案2:将version概念引入,数据库中增加一个数据version配置,每次地理服务器有更新后对version进行修改,然后使用构建让业务服务器重读配置,前端请求GIS配置时获得数据version,在请求地理服务时带上该version。

建议先以方案1来进行,这样与4.1中的数据请求可以同步,代码上可以统一处理。如果要进行方案2,则需要工程知道地理服务器何时做了更新,然后再在配置中修改version,稍微增加了工程维护量。

5.总结

5.1为什么前端JS和后台数据不用统一的version确保更新

a.如果用统一version,则该version需要使用库中配置(或配置文件),但是JS文件的加载往往是在数据请求之前,如此无法保证在version获得之前的JS文件为最新文件。

b.数据的更新并不代表系统需要重新编译,所以针对数据的version无法和JS版本的version同步。

5.2方案总结

a.前端JS使用ANT编译自动生成版本号。

b.数据请求加上随机时间戳。

 

                           -----欢迎转载,但保留版权,请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/

                                                                              如果您觉得本文确实帮助了您,可以微信扫一扫,进行小额的打赏和鼓励,谢谢 ^_^

                                             

目录
相关文章
|
3天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
12 5
|
28天前
|
JavaScript 前端开发 Docker
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
在使用 Deno 构建项目时,生成的可执行文件体积较大,通常接近 100 MB,而 Node.js 构建的项目体积则要小得多。这是由于 Deno 包含了完整的 V8 引擎和运行时,使其能够在目标设备上独立运行,无需额外安装依赖。尽管体积较大,但 Deno 提供了更好的安全性和部署便利性。通过裁剪功能、使用压缩工具等方法,可以优化可执行文件的体积。
110 3
前端全栈之路Deno篇(二):几行代码打包后接近100M?别慌,带你掌握Deno2.0的安装到项目构建全流程、剖析构建物并了解其好处
|
7天前
|
Web App开发 缓存 监控
前端性能优化实战:从代码到部署的全面策略
前端性能优化实战:从代码到部署的全面策略
13 1
|
10天前
|
前端开发 JavaScript
前端界的革命:掌握这些新技术,让你的代码简洁到让人惊叹!
前端技术的快速发展带来了许多令人惊叹的新特性。ES6及其后续版本引入了箭头函数、模板字符串等简洁语法,极大减少了代码冗余。React通过虚拟DOM和组件化思想,提高了代码的可维护性和效率。Webpack等构建工具通过模块化和代码分割,优化了应用性能和加载速度。这些新技术正引领前端开发的革命,使代码更加简洁、高效、可维护。
14 2
|
10天前
|
前端开发 JavaScript 测试技术
前端工程师的必修课:如何写出优雅、可维护的代码?
前端工程作为数字世界的门面,编写优雅、可维护的代码至关重要。本文从命名规范、模块化设计、注释与文档、遵循最佳实践四个方面,提供了提升代码质量的方法。通过清晰的命名、合理的模块划分、详细的注释和持续的学习,前端工程师可以写出高效且易于维护的代码,为项目的成功打下坚实基础。
23 2
|
16天前
|
监控 前端开发 JavaScript
前端开发的终极奥义:如何让你的代码既快又美,还不易出错?
【10月更文挑战第31天】前端开发是一个充满挑战与机遇的领域,本文从性能优化、代码美化和错误处理三个方面,探讨了如何提升代码的效率、可读性和健壮性。通过减少DOM操作、懒加载、使用Web Workers等方法提升性能;遵循命名规范、保持一致的缩进与空行、添加注释与文档,让代码更易读;通过输入验证、try-catch捕获异常、日志与监控,增强代码的健壮性。追求代码的“快、美、稳”,是每个前端开发者的目标。
31 3
|
17天前
|
前端开发 JavaScript 开发者
前端开发的终极技巧:如何让你的代码既简洁又高效,还能减少bug?
【10月更文挑战第30天】前端开发充满挑战与创新,如何编写简洁高效且少bug的代码是开发者关注的重点。本文介绍五大技巧:1. 模块化,提高代码复用性;2. 组件化,降低代码耦合度;3. 使用现代框架,提高开发效率;4. 统一代码规范,降低沟通成本;5. 利用工具,优化代码质量。掌握这些技巧,让前端开发更高效。
36 1
|
24天前
|
前端开发 JavaScript 开发者
揭秘前端高手的秘密武器:深度解析递归组件与动态组件的奥妙,让你代码效率翻倍!
【10月更文挑战第23天】在Web开发中,组件化已成为主流。本文深入探讨了递归组件与动态组件的概念、应用及实现方式。递归组件通过在组件内部调用自身,适用于处理层级结构数据,如菜单和树形控件。动态组件则根据数据变化动态切换组件显示,适用于不同业务逻辑下的组件展示。通过示例,展示了这两种组件的实现方法及其在实际开发中的应用价值。
31 1
|
28天前
|
存储 前端开发 JavaScript
前端的全栈之路Meteor篇(四):RPC方法注册及调用-更轻量的服务接口提供方式
RPC机制通过前后端的`callAsync`方法实现了高效的数据交互。后端通过`Meteor.methods()`注册方法,支持异步操作;前端使用`callAsync`调用后端方法,代码更简洁、易读。本文详细介绍了Methods注册机制、异步支持及最佳实践。
|
1月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
147 0
下一篇
无影云桌面