介紹 Props2Js

我的可維護 JavaScript 原則之一 ¹ 是將您的配置數據與應用程序邏輯分開。配置數據是您的 JavaScript 用來正常工作的硬編碼信息。這可以是 URL 或 UI 字符串等任何內容。例如：

function validate(value) {
    if (!value) {
        alert("Invalid value");
        location.href = "/errors/invalid.php";
    }
}
    
function toggleSelected(element) {
    if (hasClass(element, "selected")) {
        removeClass(element, "selected");
    } else {
        addClass(element, "selected");
    }
}

這段代碼中有三段配置數據。第一個是向用戶顯示的字符串“Invalid value”。作為 UI 字符串，它很可能會頻繁更改。第二個是 URL “/errors/invalid.php”。由於架構決策，URL 往往會隨著開發的進展而變化。第三個是 CSS 類名“selected”。這個類名被使用了 3 次，意味著一個類名的改變需要在三個不同的地方改變，增加了漏掉一個的可能性。

配置數據最好從核心應用邏輯中提取，如：

//Configuration data externalized
var config = {
    MSG_INVALID_VALUE:  "Invalid value",
    URL_INVALID:        "/errors/invalid.php",
    CSS_SELECTED:       "selected"
};

function validate(value) {
    if (!value) {
        alert(config.MSG_INVALID_VALUE);
        location.href = config.URL_INVALID;
    }
}

function toggleSelected(element) {
    if (hasClass(element, config.CSS_SELECTED)) {
        removeClass(element, config.CSS_SELECTED);
    } else {
        addClass(element, config.CSS_SELECTED);
    }
}

此示例將所有配置數據存儲在 config 目的。 config 的每個屬性 保存單條數據，每個屬性名都有一個前綴表示數據的類型（MSG 對於 UI 消息，URL 用於 URL 和 CSS 為類名）。當然，命名約定是一個偏好問題。這段代碼的重要部分是所有配置數據都已從函數中刪除，替換為 config 中的佔位符 對象。

外部化配置數據意味著任何人都可以進入並進行更改，而不必擔心在應用程序邏輯中引入錯誤。這也意味著整個 config 對象可以移動到自己的文件中，因此編輯遠離使用數據的代碼。

讓外部對像管理您的配置數據是一個好的開始，但我不喜歡將配置數據直接存儲在 JavaScript 代碼中。由於此類數據經常更改，我更喜歡將其保存為更簡單的文件格式——無需擔心丟失分號或逗號。就在那時我轉向了 Java 屬性文件 ² .

Java 屬性文件非常簡單。每行一個名稱-值對，註釋以 # 開頭 .這種格式真的很難搞砸。以下是上一個示例的配置數據在 Java 屬性文件中的樣子：

# UI Strings
MSG_INVALID_VALUE = Invalid value

# URLs
URL_INVALID = /errors/invalid.php

# CSS Classes
CSS_SELECTED = selected

即使我在 Java 屬性文件中保存了我的配置數據，我也沒有簡單的方法將這些數據提供給 JavaScript。

這就是我創建 Props2Js ³ 的原因 ，一個只做一件事的簡單工具：讀取 Java 屬性文件並以 JavaScript 可以使用的格式輸出它。實際上，它能夠將數據輸出為 JavaScript 可以使用的三種格式：JSON、JSONP 和常規 JavaScript。

java -jar props2js-0.1.0.jar --to jsonp --name myfunc --output result.js source.properties

--to 選項指定輸出格式，“js”、“json”或“jsonp”。 --name 選項指定變量名（對於“js”）或函數名（對於“jsonp”）； “json”忽略此選項。 --output 選項指定要寫入數據的文件。所以這一行採用名為 source.properties 的 Java 屬性文件 並輸出帶有 myfunc 回調函數的 JSONP 到一個名為 result.js 的文件 .

Props2Js 將上述屬性文件輸出為 JSON 格式：

{"MSG_INVALID_VALUE":"Invalid value","URL_INVALID":"/errors/invalid.php",
"CSS_SELECTED":"selected"}

這是 JSONP 輸出：

myfunc({"MSG_INVALID_VALUE":"Invalid value","URL_INVALID":"/errors/invalid.php",
"CSS_SELECTED":"selected"});

這是帶有 --name config 的純 JavaScript 選項 ：

var config={"MSG_INVALID_VALUE":"Invalid value","URL_INVALID":"/errors/invalid.php",
"CSS_SELECTED":"selected"};

如果您在 --name 中包含一個點，Props2Js 也足夠聰明，可以知道您正在分配給一個對象屬性 選項。在這種情況下，它會省略 var .

Props2Js 在 MIT 許可下可用，並託管在 GitHub ³ .

參考

1. Nicholas C. Zakas 的可維護 JavaScript 2011
2. .properties by Wikipedia
3. Props2Js