Web前端开发最佳实践(12):JavaScript代码中有大量写死的配置数据?这些数据难以维护,你需要合理组织这些数据
2015-03-23 14:40
1021 查看
前言
JavaScript代码基本上都是由业务逻辑和数据组成的,逻辑代码根据数据完成一定的操作。很多数据在代码中是写死的,比如一些URL、显示在界面上的提示信息、页面元素相关的样式值及其他使用到的固定值,这部分无逻辑的数据可统称为配置数据。一种好的编码实践是把这部分配置数据和业务逻辑分离,这样修改配置数据时就不需要修改业务逻辑代码了,从而提高了代码的可维护性。同时,配置数据的分离,使得业务逻辑代码也可以重用了,不同的配置数据可以对应相同的业务逻辑。配置数据和逻辑分离
那么,要如何把配置数据和代码逻辑分离呢?第一步是把代码中的配置数据部分抽取出来。抽取的原则是这些数据在代码中是写死的,并且在后期有可能会变更。下面的示例展示了如何把代码中的配置数据分离,配置数据未分离时的代码如下:var sm = startHours*60+startMinutes; var em = (endHours*60+endMinutes)||(24*60); var top = (sm*60*1000-0*60*60*1000)*42; var height = Math.max(40,(em-sm)*42/60)+1;
这段代码使用到的数据很多,如果不经过数据的分离,代码是很难维护和阅读的,因为这些数据本身并不能表明实际的用途。经过业务分析,把可变的配置数据分离了出来,并使用命名有意义的属性保存了这些数据。抽离的数据如下:
this.config = { first_hour:0, last_hour:24, hour_size_px:42, min_event_height:40 }
同时,修改业务代码,使用配置数据代替原来写死的数据:
var sm = startHours*60+startMinutes; var em = (endHours*60+endMinutes)||(this.config.last_hour*60); var top = (sm*60*1000-this.config.first_hour*60*60*1000)*this.config.hour_size_px; var height = Math.max(this.config.min_event_height,(em-sm)*this.config.hour_size_px/60);
可以看到,把经常需要更改的数据分离出来后,代码看起来清爽了很多,即使后面碰到配置数据的变更,也不需要修改业务逻辑的代码了,直接修改对应的配置数据项即可。推荐开发者使用这种数据配置模式。
开源框架的做法
有部分框架同样把配置数据和逻辑给剥离开了,并且把这部分配置数据作为默认的配置数据,以方便框架使用者通过自定义配置数据来修改框架提供的默认数据。比如,在Bootstrap框架中,所有的控件都有一个默认的属性DEFAULTS,用于保存默认的配置数据。如下代码展示了Bootstrap框架中Tooltip控件的配置数据:Tooltip.DEFAULTS = { animation: true , placement: 'top' , selector: false , template: '<div class="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>' , trigger: 'hover focus' , title: '' , delay: 0 , html: false , container: false }
如果开发者想修改
Tooltip控件的一些行为或外观,仅仅修改这个配置数据就可以了,比如要修改
Tooltip展示的外观,则可以修改
Tooltip.DEFAULTS.template的属性值,如果要修改
Tooltip展示的时机,则可以修改
Tooltip.DEFAULTS.trigger的属性值,等等。
YUI框架等其他流行的框架中也有类似的做法。这种将配置数据分离的做法极大地提高了代码的可维护性和可扩展性,开发者可以很方便地修改配置数据而不会导致逻辑的错误。
这种将配置数据分离的方式也大量应用于前后端数据的交互上,很多时候这些配置数据会随着用户或者场景的不同而不同,后端逻辑会根据当前的用户或场景返回不同的配置数据。在选择配置数据和业务逻辑分离的方式后,就不需要生成内嵌了数据的JavaScript代码了,后端可只关心配置数据的构建。下图中的代码片段展示新浪微博网站在后端生成的配置数据,该数据供前端逻辑使用。
stackoverflow 网站也使用了类似的方式,它把JSON格式的配置数据作为一个参数传给了一个名为
StackExchange.init的函数,通过这个函数的处理,可把数据保持在客户端。其代码片段如下图所示。
在JavaScript代码中,分离的配置数据一般以JSON格式保存,JSON格式是JavaScript原生支持的格式,所以更简单一些。如果配置数据过多或者期望客户端缓存配置数据,则推荐把配置数据放置在单独的JavaScript文件中,从而把代码逻辑和配置数据彻底分离,让配置数据的修改变得更方便,同时客户端也可以缓存配置数据文件。
相关文章推荐
- Web前端开发最佳实践(9):CSS代码太太乱,重复代码太多?你需要精简CSS代码
- Web前端开发最佳实践(11):使用更严格的JavaScript编码方式,提高代码质量
- Web前端开发最佳实践(13):前端页面卡顿?可能是DOM操作惹的祸,你需要优化代码
- Web前端开发最佳实践(3):前端代码和资源的压缩与合并
- Web前端开发最佳实践(10):JavaScript代码不好读,不好维护?你需要改变写代码的习惯
- JavaScript 实践HTML5 localStorage 本地存储Json等数据 助于移动设备和web前端开发
- 【Web前端开发最佳实践系列】前端代码推荐和建议
- 【Web前端开发最佳实践系列】标准的HTML代码
- 1 开发一个注重性能的JDBC应用程序不是一件容易的事. 当你的代码运行很慢的时候JDBC驱动程序并不会抛出异常告诉你。 本系列的性能提示将为改善JDBC应用程序的性能介绍一些基本的指导原则,这其中的原则已经被许多现有的JDBC应用程序编译运行并验证过。 这些指导原则包括: 正确的使用数据库MetaData方法 只获取需要的数据 选用最佳性能的功能 管理连
- Web前端开发最佳实践(5):正确闭合HTML标签,停止使用不标准的标签和属性
- 【WEB前端开发最佳实践系列】高可读的HTML
- 【WEB前端开发最佳实践系列】CSS篇
- 【WEB前端开发最佳实践系列】JavaScript篇
- Web前端高效开发最佳实践总结一:前端开发综述
- Web前端高效开发总结二:HTML最佳实践
- Web前端开发最佳实践总结三:CSS最佳实践
- web前端之MVC的JavaScript Web富应用开发三:模型和数据
- 第2.1.10章 WEB系统最佳实践Spring文件配置多数据源
- web前端开发需要用到的软件及相应配置集锦
- 10 个你需要了解的最佳 JavaScript 开发实践