JavaScript代碼中有大量寫死的配置資料？這些資料難以維護，你需要合理組織這些資料

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代碼了，後端可只關心配置資料的構建。中的程式碼片段展示新浪微博網站在後端產生的配置資料，該資料供前端邏輯使用。 Imgur stackoverflow 網站也使用了類似的方式，它把JSON格式的配置資料作為一個參數傳給了一個名為StackExchange.init的函數，通過這個函數的處理，可把資料保持在用戶端。其程式碼片段如所示。 Imgur 在JavaScript代碼中，分離的配置資料一般以JSON格式儲存，JSON格式是JavaScript原生支援的格式，所以更簡單一些。如果配置資料過多或者期望用戶端緩衝配置資料，則推薦把配置資料放置在單獨的JavaScript檔案中，從而把代碼邏輯和配置資料徹底分離，讓配置資料的修改變得更方便，同時用戶端也可以緩衝配置資料檔案。