開發雲端應用程式的人都知道，編寫 HTML 碼是有點繁瑣的工作。尤其現在的網頁設計，因為編排上的需要，往往會疊套好幾層的<div>標籤。這些疊套的<div>標籤與內容沒有關係，但卻會讓 HTML 變得更加難以閱讀和理解。
讓我們以 Bootstrap 為例。Bootstrap 是前端非常好用的工具，我個人經常的使用。不過 Bootstrap 有個缺點（其實不單是 Bootstrap，多數的前端工具都有相同的問題），那就是製作一個元件是會產生大量與內容無關的標籤。以下的範例是用 Bootstrap 產生一個 modal dialog（彈跳視窗）的框架。它只是一個框架，幾乎沒有包含任何實際內容，但就需要這麼多行的 HTML 代碼：
<div class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Modal body text goes here.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>很冗長是吧？更糟糕的事，這樣的代碼非常難以閱讀和理解。如果編碼過程少打、或打錯字元，光是找出問題就要花很多時間。
重構與模組化 HTML
要怎麼處理這個問題呢？coServ 透過以 JS 來表示 HTML 的方式，讓 HTML 的生成可以重構化和模組化。coServ 的方法是允許你用一個陣列來表示一個 HTML 的標籤。所以上述的 Bootstrap modal 就可以在 coServ 上改寫成：
嗯？就這樣？看起來也沒什麼了不起，似乎只是少打了幾個字而已。其實玄機在後面，我們把上面的程式稍微重新組合一下：
整個程式的主體只剩第1 ~ 5行。重點是第三行：
['div', {class: "modal-content"}, [mHeader(), mBody(), mFooter()]]第三行說明了彈跳視窗是由 mHeader(), mBody() 和 mFooter() 三部分組成。這頭、身、尾三部分是在程式的第 7 ~ 32 行由三個函數個別產生。上面的範例顯示了重構和模組化的威力。因為是以 JS 陣列來表示 HTML 標籤，我們得以將網頁細節抽出，使得網頁的本體結構清晰的顯示出來（如程式 1 ~ 5 行）。頭、身、尾三部分的細節，就可以利用 node.js 的各種程式工具來建構。本文的範例是以三個函數來產生，實際的應用也可以用 node.js 模組來產生。而這些用來產生部分網頁細節的函數或模組，甚至可以很容易的重複使用。
語法整理
最後讓我們把 JS 陣列來代表 HTML 標籤的語法做一個完整的說明。要使用一個陣列來代表一個 HTML 標籤，那麼陣列內容必須是：
['tag_name', {/*tag attributes*/}, child_tags]陣列的第一個元素必須是字串，而且是一個標籤的名稱，如 ‘div’ 或 ‘ul’ 等。第二個元素代表標籤的屬性，以 Javascript 物件的形式表達。第三個元素是標籤的內容或是子標籤。若是子標籤，則第三個元素將是子標籤所組成的陣列。以下都是合法的 HTML 標籤表示法，提供做參考：
['div']['div', {class: 'text-center'}, 'Hello World!']['hr', {width: '90%'}]['ul',
[
['li', 'Item #1'],
['li', 'Item #2']
]
]
你可以發現，陣列中的第二與第三個元素不是必要的。此外，子標籤本身也是可以用陣列來表示，不斷的疊套下去。
以陣列來表示 HTML 標籤，其語法和原來 HTML 的語法幾乎是一致的，所以很快就可以學習上手。但另一方面，這個方法讓我們可以利用 node.js 去取代過往大家常用的 template 成 HTML 代碼的方法。過去以 template 生成 HTML 難以結構化、模組化、以及元件化的問題，現在都可以輕鬆解決了。如果你覺得這個方法 make sense，歡迎關注我後續的文章。我會再跟大家分享更多解決雲端應用開發問題的一些有趣且非常有效的方法。
