i18next 不進行跳脫處理

i18next 是一個 JavaScript 框架，可以進行多國語系的翻譯。最近工作上進行的專案就是使用它來完成。不過被人發現到一個 Bug ，輸出的文字，有些時候會冒出 HTML 的 <br/> 標籤。查找了一下，發現到是出在傳入作為翻譯參數的文字造成的。

作為翻譯的文字中，可以使用 {{變數名稱}} 來為翻譯的文字加上參數。如：

{
  "HELLO": "Hello, {{name}}!"
}

var output = i18next.t("HELLO", {name: 'Tim"});
// output = "Hello, Tim"

這種方式可以讓同一個翻譯設定變得更有彈性，不過相對的也可能帶來一些安全性的風險。因此 i18next 預設會將傳入的參數（上面的例子就是 name 參數）進行一些跳脫處理。像是將 < 變成 &lt; 來避免所謂的跨網域攻擊問題（XSS）。

而我的專案遇到的問題，就是在於我傳入的字串，中間包含了排版用的換行字元。
因此導致被 i18next 給處理掉了。

要避免這樣子的狀況，目前找到的作法，是在參數的名稱加一個減號，這樣 i18next 就不會對傳入的資料作處理了。

{
  "HELLO": "Hello, {{- name}}!"
}
// 一樣的呼叫方式， name 參數傳入的資料，就不會被處理。

當然這樣子的作法，有可能會引入一些安全性的問題。所以要注意使用。

對 ES6 的程式作單元測試

距離「號稱釋出確定的規格」的幾個月之後，既使是在技術前端的 NodeJS ，也依然沒有完全支援 ES6 的所有語法。就不用說那些依附在 NodeJS 之上開發出來的模組。看到大多數的實作方法，靠 Babel 來作轉譯回 ES5 語法，再進行後續的工作。

對於我這種等級的開發者， Babel 背後運作的原理、語法分析的實作方式都屬於玄之又玄的事物。大多數只要結果正確的狀況，根本不會想去看懂那轉回 ES5 語法的樣子。不過事情總有例外⋯ 就是作 Unit test 的時候。

在我使用的 jasmine 模組中，錯誤訊息會帶有例外產生在哪個檔案的哪一行，對於查找原因是很方便的。不過一但轉換成 ES5 語法之後，每個指令不會在和 ES6 原始檔相同的位置，造成許多困懮，需要有「好心人」作轉譯的工作。

後來找到了 「jasmine-es6」這個模組，只要把它裝在 global ，就可以直接使用原來的 「jasmine」指令進行如原先一般的單元測試，出錯的時候也會對應回 ES6 原始檔的行號，很方便。

npm i -g jasmine-es6

jasmine-es6 本身會改變 jasmine 模組的程式內容。所以若是移除重裝 jasmine 後，要記得再裝一次 jasmine-es6 將擴充的功能再設定回去。

PS.
後來發現一個叫作 「jasmine-babel」的模組，讓我後來再安裝的時候搞混。雖然在 npm 上可以查得到它，不過對應的 github 路徑已經不存在了。應該是一個不再維護的專案吧～

另外，如果使用 gulpfile.babel.js 以及搭配相關的模組來以 ES6 語法執行 gulp task。其中 gulp-jasmine 能夠在沒有 jasmine-es6 的狀態下執行。不過我還不會用它來顯示錯誤的行號，不確定有沒有支援顯示錯誤在原始檔行號的功能。

[Soma.js] 設定要注入的物件名稱

依賴注入似乎已經成為許多軟體框架的必要元素，它的概念仍然不易被人熟悉，但其方便性以及能夠帶給軟體開發的彈性是很大很大的。 Soma.js 是 javascript 的一個以 infuse.js 為基底開發的依賴注入程式框架(framework)，依循它所提供的規則，可以自動偵測到建構式所需要的參數，使用 this 定義的物件變數，Soma.js 將在所有註冊在它身上的變數中，尋找相同名字的變數置入。

換言之⋯ 只要取相同的名字， Soma.js 能夠自動完成變數對應的工作。很方便，但也是其限制。要是一旦名字不同了呢？要是不同時期開發出來的程式，用了同一個名稱表示不同的名字呢？ Soma.js 的對應機制是不是就無法順利運作了？

另一個會改變名字的地方在於程式的最小化，為了極致地減少程式碼所佔用的空間，會以較短的文字（像單一字母）取代變數名稱。如此處理的程式碼，很有可能會使得依賴注入失效。

同樣的情形也出現在同為 javascript 的 AngularJS 框架中，而 AngularJS 的處理方式，是在建立 controller, service 的地方，以陣列取代原先傳入建構函數的地方。陣列中列舉了每個注入引用的名稱，最後一個陣列元素才是建構式。由於程式最小化不會對字串進行處理，因此可以避免注入的對應出錯。

那麼回到 Soma.js 身上，它使用了 injector.createInstance 方法來建立物件，然而只接受一個參數，也只能是建構函數。它是支援在建構函數後頭增加其它的參數，依序作為建構函數的參數，不足的部分的由既有的注入對應機制處理、補齊。

不過，如果傳入的參數是要注入項目的名稱，會發現該名稱的字串，會直接作為參數傳入建構函數，而不是該名稱所對應的物件。因此，如果要傳入注入名稱的對應，不能使用 injector.createInstance 函數來達到。

最後的由其的基底 infuse.js 的文件中找到，它的作法是在建構函數上定義 inject 變數，其對應到建構時所注入物件名稱，經過實測的結果是能夠順利運作。至於物件內的變數要怎麼對應，這個部分就留待未來有需要再進行測試。

以下列個簡單的物件宣告⋯ (注意 inject 是定義給建構函數，而不是建構出來的物件上)

function MyClass(opt1, opt2) {
  // some code...
}
MyClass.inject = ['optName', 'otherOption'];
module.exports = MyClass;

Sinopia 試用

工作需要開發一些能夠重覆使用的 Javascript 模組，當然具有許多支援的 commonjs 與 nodejs 格式是首選，唯一的問題就是一方面希望能夠使用 npm 裡眾多的模組，但另一方>向自己所開發的一些內部使用的私有模組就不方便公開了。

花了一些時間尋找，看了 npm 那個要付費使用的私有模組庫，之後就遇到了這篇要提的 Sinopia。

Sinopia 並不是一個英文單字， Google 翻譯認為它是荷蘭文，是一種楬紅色顏料的名字。看不出和軟體本質的關連，就此打住不提。

它是一個依靠 Nodejs 建立網站的方式，建立一個能和 npm 套件溝通，提供自定模組的服務。當然，如果對它要求不存在於自身裡的模組，它會將要求轉向發到公開的 npm 主機。幫你把公開的套件抓回來。

除了抓下套件之外，也提供了在上面註冊帳號，讓自訂的模組也能使用 npm 既有的公開（publish）模組流程，將新的版本上傳。

試用了幾天之後，感覺還不錯，找個時間再試試看它能不能在 windows 上也順利運作。這樣平常工作的開發，應該會順利許多。

最近使用 jQuery Mobile 的一些感想

會使用 jQuery Mobile 這個 javascript 框架，是在花了不少時間去尋找能夠在手機、平板，甚至是在電腦瀏覽器裡執行的程式，最終所定下來的，目標是寫出一個類似 Web App 程式。記得在一開始發現它，就好像發現新大陸，本來不知如何下手的程式介面，在通過看過幾個範例後，利用兩週片斷的時間就完成介面樣式的設計，得到其它人的好評。不過直到開始撰寫程式的時候，才知道它並不如自己想像的那麼容易駕駕馭

簡單介紹這個框架，它可以利用 CSS 套版，將網頁既有的 HTML 變成像是手機程式裡的按鈕、清單，利用 data-xxx 屬性來描述 HTML 元素，可以組合成一個具有手機程式裡「標頭」、「內容」、「頁尾」三個區域，像是 iOS 裡在標頭的返回按鈕的樣式也作得出來，乍看之下還滿有模有樣。許多顯示效果，依照 HTML 元素的位置而有所改變。按照它的想法來撰寫 HTML，真很很省力。