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文件中，從而把代碼邏輯和配置數據完全分離，讓配置數據的修改變得更方便，同時客戶端也能夠緩存配置數據文件。