初探 total.js

在眾多 node.js 開發框架,你可能看過 total.js 名稱,如果你尚未實際嘗試它,這篇文章可以讓你大概了解 total.js 特色,因為官方文件實在太完整了,我不想弄的像官方文件翻譯文似的,所以盡可能依據使用的經驗,提及一些較為特別的地方。

麻雀雖小五臟俱全 (Small but complete)

total.js 沒有依賴任何其它套件,但卻有包含常用的基本函式庫,像是 Email 發送圖片處理視圖引擎、甚至 Websocket 需求都已經在整個框架中,如果沒有其它特別的需求,應該已經足夠應付大多的情況。就算有其它特別需要,也能直接透過 NPM 載入相關模組來使用。

豐富的文件與範例 (Rich docs and examples)

相較於其它的 node.js 框架,total.js 的文件相當完整,特別是在範例的部分,幾乎在過程中遇到問題,都能找到解決範例。也有整理好的問題集,我甚至開始懷疑作者有 70% 以上的時間都拿去寫文件和範例了(笑)。

獨特的路由旗標 (Route Flag)

total.js 在控制器與路由中實作一種旗標的機制,像是限定請求類型(get, put, post, delete)、指定中介處理(#middleware-nam)、角色限定(@role)、或限定以 Ajax 方式請求(xhr)等,都可以透過給予的一個或多個不同旗標完成。例如:

exports.install = function() {
    // 使用者為訪客(未登入)時,會看見 view_homepage 所呈現的內容
    F.route('/', view_homepage);

    // 使用者為管理員(已登入)時,會看見 view_admin 所呈現的內容
    F.route('/', view_admin, ['authorize', '@admin']);

    // 使用者為主持人(已登入)時,會看見 view_moderator 所呈現的內容
    F.route('/', view_moderator, ['authorize', '@moderator']);
};

這種特別的作法可以很容易加入或移除旗標來異動額外需求,這邊有 total.js 作者已精心整理一些控制器與旗標的常用範例清單

視圖引擎與本地化 (Views and localization)

total.js 使用自己專用視圖引擎,透過標籤 @{} 來呼叫實務上常用到的功能,可以從這邊看見所有可用的標籤。其中較特別在視圖本地化(多語系)的處理, total.js 採用一個相當聰明的作法。因為我特別喜愛這個功能,所以這小段會用比較長一些來說明。

例如: /views/index.html 內容如下:

<h1>@(哈囉,@{model.username} 你好!)</h1>
<p>@(先不要管 @{model.thing} 了,你聽過 @{model.company} 嗎?)<p>
<p>
    @(那些人,靠著賺你的錢,他們出國旅遊、買車買房、 吃好料參加聚會,然後告訴你:你要努力堅持夢想,就可以像我這樣成就自我)
<p/>

開發者可以透過指令 total --translate 讓 total.js 協助你找出所有視圖中被 @() 包含的字串片段,並產一個語系對照表 translate.resource

// Total.js translation file
// Created: 2016-06-23 17:01

// views\index.html
T1487589120      : 哈囉,@{model.username} 你好!
T-1643442394     : 先不要管 @{model.thing} 了,你聽過 @{model.company} 嗎?
T-1943851619     : 那些人,靠著賺你的錢,他們出國旅遊、買車買房、吃好料參加聚會,然後告訴你:你要努力堅持夢想,就可以像我這樣成就自我

內容左邊的 key 值由 total.js 自動產生,右邊對應視圖中所有需要被翻譯的字串。然後將此檔案依照語系需求另存至 resources/en.resource 再進行翻譯,例如:

// Total.js translation file
// Created: 2016-06-23 17:01

// views\index.html
T1487589120      : Hello, @{model.username} greeting !
T-1643442394     : Don's care about @{model.thing}, do you know @{model.company} ?
T-1943851619     : Such people who rely on you to earn money, they travel abroad, buy a car, eat feed to the party, and then tell you: you should strive to adhere to the dream, like me, you can self-achievemen

接著參考一下本地化範例的作法,就可以透過網址 ?language=en 切換成語系。這種方式好處可以讓你在視圖中使用你習慣的語系去編寫,而且全文部分,也可以把他當成是翻譯內容的一部分。

NoSQL 與 SchemaBuilder

total.js 預設使用自製的 NoSQL 資料庫,它是一個以純文字方式儲存 JSON 格式的檔案型資料庫,對於快速建立簡易網站或開發初型功能網站來講相當方便,可以讓整個專案帶著走。而 SchemaBuilder 是協助你開發時建立資料模型的好幫手,你可在這邊定義好資料欄位、驗證規則、過濾規則、特珠查詢等,某方面來它有點像是 ORM 的味道。

極佳彈性化機制

total.js 所有的模組都不是強制性的。例如你可以將視圖引擎換成 swig,或是將資料庫換 mongodb 來使用,如果想使用 Socket.io,也可以透過這樣的方式來建立

var io = require('socket.io')(F.server);

然後改用 Socket.io 方式進行的操作。

Controllers, Definitions, Modules, Packages, Models 甚至可以透過 URL 位置來進行載入。這意味可以將一些共用的部分,使用統一的位置給不同專案來使用。另外作者也預先寫了一些常被使用的額外模組,像是透過第三方登入的 oauth2 的模組

佈景主題機制

total.js 設計了一個佈景主題的機制,可以透過程式去切換不同的佈景主題。這樣的好處可以將常用的功能開發成模組,網頁設計師只要注專在視圖上,設計不同佈景主題,不怕影響整個網站的功能流程。

結論

total.js 框架對新人相當友善而且容易學習的,它輕便與易用性非適合來做快速開發專案原型。對 SOHO 族來講,用它接案開發中小網站也是一個相當不錯的選項。與其在眾多的框架猶豫不定,不如先用 total.js 快速開發原型網站,來驗證你的主意可不可行,再來考慮系統重構問題。

後記

原本想要列出一些 total.js 缺點或弱勢的部分,但想到我好友說的

缺點不是在所有情況是缺點,只有在某種特定情況才是
Vincent Chang

加上遇到需求案例還不足做比較,這邊就暫時不提了(謎之聲:這不叫護航,什麼叫護航)。不過如果硬要挑一點來講的話,那就是 total.js 的作者在較新版本中,為一些函式追加更貼近意思的別名,但文件上這些舊函式與別名同時並列,反而造成了混亂,應該直接建議開發者使用新別名就好,舊名稱直接淡化表示

目錄

  1. 1. 麻雀雖小五臟俱全 (Small but complete)
  2. 2. 豐富的文件與範例 (Rich docs and examples)
  3. 3. 獨特的路由旗標 (Route Flag)
  4. 4. 視圖引擎與本地化 (Views and localization)
  5. 5. NoSQL 與 SchemaBuilder
  6. 6. 極佳彈性化機制
  7. 7. 佈景主題機制
  8. 8. 結論
  9. 9. 後記