Web前端开发最佳实践(12):JavaScript代码中有大量写死的配置数据?这些数据难以维护,你需要合理组织这些数据
前言
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前端开发最佳实践(12):JavaScript代码中有大量写死的配置数据?这些数据难以维护,你需要合理组织这些数据的更多相关文章
- Web前端开发最佳实践系列文章汇总
Web前端开发最佳实践(1):前端开发概述 Web前端开发最佳实践(2):前端代码重构 Web前端开发最佳实践(3):前端代码和资源的压缩与合并 Web前端开发最佳实践(4):在页面中添加必要的met ...
- Web前端开发最佳实践(9):CSS代码太太乱,重复代码太多?你需要精简CSS代码
前言 提高网站整体加载速度的一个重要手段就是提高代码文件的网络传输速度.之前提到过,所有的代码文件都应该是经过压缩了的,这可提高网络传输速度,提高性能.除了压缩代码之外,精简代码也是一种减小代码文件大 ...
- Web前端开发最佳实践(2):前端代码重构
前言 代码重构是业内经常讨论的一个热门话题,重构指的是在不改变代码外部行为的情况下进行源代码修改,所以重构之前需要考虑的是重构后如何才能保证外部行为不改变.对于后端代码来说,可以通过大量的自动化测试来 ...
- Web前端开发最佳实践(3):前端代码和资源的压缩与合并
一般在网站发布时,会压缩前端HTML.CSS.JavaScript代码及用到的资源文件(主要是图片文件),目的是加快文件在网络中的传输,让网页更快的展现.当然,CDN分发.缓存等方式也是加快代码或资源 ...
- Web前端开发最佳实践(1):前端开发概述
引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...
- Web前端开发最佳实践(5):正确闭合HTML标签,停止使用不标准的标签和属性
正确闭合HTML标签 HTML元素的内容模型定义了元素的结构,表明元素可以包含哪些内容以及元素可以有哪些属性.元素可以包含的内容包括其他元素和字符,但是也有一些元素是空元素,即不能包含任何内容,这些元 ...
- web前端开发最佳实践笔记
一.文章开篇 由于最近也比较忙,一方面是忙着公司的事情,另外一方面也是忙着看书和学习,所以没有时间来和大家一起分享知识,现在好了,终于回归博客园的大家庭了,今天我打算来分享一下关于<web前端开 ...
- 【社区公益】送《Web前端开发最佳实践》给需要的人
算起来至今,我进入软件开发行业已经有11年之久.从最初的研究人工智能,到后来的Web开发,控件开发,直到现在纯粹的Web前端开发.虽然没有大的作品问世,但也是勤勤恳恳,踏实做事,低调做人.从来不吹牛逼 ...
- Web前端开发最佳实践(8):还没有给CSS样式排序?其实你可以更专业一些
前言 CSS样式排序是指按照一定的规则排列CSS样式属性的定义,排序并不会影响CSS样式的功能和性能,只是让代码看起来更加整洁.CSS代码的逻辑性并不强,一般的开发者写CSS样式也很随意,所以如果不借 ...
随机推荐
- 针对《面试心得与总结—BAT、网易、蘑菇街》一文中出现的技术问题的收集与整理
最近,我在ImportNew网站上,看到了这篇文章,觉得总结的非常好,就默默的收藏起来了,觉得日后一定要好好整理学习一下,昨天突然发现在脉脉的行业头条中,居然也推送了这篇文章,更加坚定了我整理的信心. ...
- java基础-数组的折半查找原理
java基础-数组的折半查找原理 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 如果让你写一个数组的查找功能,需求如下:在一个数组中,找一个元素,是否存在于数组中, 如果存在就返回 ...
- Android 利用 gson 将 json 转成 对象object 集合list
1.build.gradle 中引入gson compile 'com.google.code.gson:gson:2.8.5' 2.将后台返回的json数据转对象.List.时间格式与后台返回的时间 ...
- 二分算法的应用——最大化最小值 POJ2456 Aggressive cows
Aggressive cows Time Limit: 1000MS Memory Limit: 65536K Total Submissions: Accepted: Description Far ...
- (一)在Lingo中使用集合
1. 在Lingo中使用集合 4.1 集合的基本用法和lingo模型的基本要素 Lingo虽然使用方便,但是如果要解决几万个,几十万个变量的优化问题时,我们总不能一个一个地列出x1,x2,…,x ...
- Spring MVC处理响应的 header
我们经常需要在HttpResponse中设置一些headers,我们使用Spring MVC框架的时候我们如何给Response设置Header呢? So easy, 看下面的代码: @Request ...
- TV 开发相关
1.设置全屏,隐藏虚拟按键 1.activity oncreate中 @Override 2 protected void onCreate (Bundle savedInstanceState) { ...
- IT人应当知道的10个行业小内幕
如果你打算从事IT行业或刚进入这个行业,也许本文下面的小内幕会吓到你,因为这些事平常都不会公开讨论的.如果你是IT资深人士,或许你已经遇到其中的大部分了.如果你愿意,请一起来参与讨论吧. 这些内幕大多 ...
- BZOJ4819 新生舞会
4819: [Sdoi2017]新生舞会 Time Limit: 10 Sec Memory Limit: 128 MB Description 学校组织了一次新生舞会,Cathy作为经验丰富的老学 ...
- CodeForces - 1009B Minimum Ternary String
You are given a ternary string (it is a string which consists only of characters '0', '1' and '2'). ...