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文件中，从而把代码逻辑和配置数据完全分离，让配置数据的修改变得更方便，同时客户端也能够缓存配置数据文件。