繼續說明 coServ 的設計理念和使用方式。這一集主要說明「區塊」如何簡化網路應用的開發，以及 coServ 如何支援區塊。這個簡報有助於開發者掌握 coServ 的開發訣竅。

1. 不⼀一樣的 Web
Server…
coServ
Part
II
Ben
Lue
2014©
Gocharm
Inc.

2. 這是個續集
還沒看過 part I 的請先看
h<p://www.slideshare.net/BenLue/web-­‐
server-­‐co-­‐serv
專案中⽂文說明
h<ps://github.com/coimoGon/coServ/
blob/master/README_zh.md

3. coServ
想傳達的設計觀點
專注處理⼩小區域（區塊）
è 專注在區塊或區域，⽽而不是整個網⾴頁
相同的內容可以有無數種顯⽰示⽅方式
è 如果把內容格式加以固定，UI/UX設計
可以簡化並快速累積

4. 重新檢視網⾴頁
• 同⼀一網站下，不同網⾴頁通常有相
同的⾴頁⾸首、邊欄和⾴頁尾(footer)
• 真正不同的是主內容區
• 把主內容區視為⼀一個區塊
• 網址其實是在指定⼀一個區塊

5. 如能了解網⾴頁是主內容區塊的虛胖版
開發時間也能從虛胖版進化到精簡版
區塊(block)
是 coServ 建置網站的核⼼心

6. 靜態區塊
HTML
CSS
Js
區塊產⽣生器
多國語系
⽚片語檔
<style>
…
</style>
<script>
…
</script>
<div>
…
</div>

7. 動態區塊
HTML
CSS
Js
區塊產⽣生器
多國語系
⽚片語檔
<style>
…
</style>
<script>
…
</script>
<div>
…
</div>
內容為
JSON 物件

8. 動態區塊內容
HTML
CSS
Js
區塊產⽣生器
多國語系
⽚片語檔
<style>
…
</style>
<script>
…
</script>
<div>
…
</div>
內容為
JSON 物件
本地 node 模組
BaaS 服務
OR

9. 區塊的合成
<h2>
<%=
valu.Gtle
%>
</h2>
<div>
<%=
value.summary
%>
</div>
<p>
<%=
value.body
%>
</p>
{
“Gtle”:
“Hello”,
“summary”:
“Abstract
of
this
page”,
“body”:
“Body
of
the
page”
}
<h2>
Hello
</h2>
<div>
Abstract
of
this
page
</div>
<hr
/>
<p>
Body
of
the
page
</p>

10. CSS也能合成
<%
if
(value.Gtle.length
<
20)
{
%>
.Gtle
{
font-­‐size:
28px;
}
<%
}
else
{
%>
.Gtle
{
font-­‐size:
24px;
}
<%
}
%>
{
“Gtle”:
“Hello”,
“summary”:
“Abstract
of
this
page”,
“body”:
“Body
of
the
page”
}
.Gtle
{
font-­‐size:
28px;
}
如果你喜歡，Javascript 也可以⽤用類似的⽅方式合成

11. 資料從何⽽而來
<h2>
<%=
valu.Gtle
%>
</h2>
<div>
<%=
value.summary
%>
</div>
<hr
/>
<p>
<%=
value.body
%>
</p>
{
“Gtle”:
“Hello”,
“summary”:
“Abstract
of
this
page”,
“body”:
“Body
of
the
page”
}
<h2>
Hello
</h2>
<div>
Abstract
of
this
page
</div>
<hr
/>
<p>
Body
of
the
page
</p>
這個 JSON 物件從何⽽而來？

12. 產⽣生資料
區塊所需的資料，可以從⼆二種⽅方式擇⼀一產⽣生：
ü 本地模組(local
module)
在 coServ 上撰寫 node.js 的模組，可⽤用來讀取DB
或其他網站的資料
ü BaaS 服務
利⽤用 BaaS 服務來處理資料的儲存、管理、運算等。
coServ ⺫⽬目前直接⽀支援 COIMOTION的 API 服務。要
使⽤用其他 BaaS 亦可⾃自⾏行撰寫。

13. 本地模組範例
其實就是⼀一個 node.js
module，模組中必須提供
run 這個 method 讓 coServ 呼叫
exports.run = function run(inData, callback) {
var page = {title: ‘Hello World’,
summary: ‘Abstract of this page.’,
body: ‘This is a web page.’};
callback( {errCode: 0,
message: ‘Ok’,
value: page} );
};
檔案應放在 www/themes/[樣板代碼]/blocks/
module 下

14. BaaS 資料源
coServ 能夠直接和 COIMOTION
服務串接：
o 可在 siteURI.json
中直接給
API
網址，作為區塊
的資料來源
o 在 javascript 中可以⽤用 __.api()
呼叫 API，類似
Ajax 的效果
o 更多細節在未來的簡報中說明

15. siteURI.json
這個檔⽤用來列出網站中所有的網⾴頁（區塊）
"/blog/bgHead": {
"id": "no“
},
"/blog/list": {
"id": "no",
"service": "/blogContent/blogRs/list“
}
其中：
o blog/bgHead:
內容將來⾃自 blocks/module/
bgHead.js 或是區塊本⾝身並沒有動態內容
o blog/list:
內容來⾃自 /blogContent/blogRs/list 這
個服務網址
};

16. MVC 架構
區塊本⾝身是以 MVC ⽅方式架構出來：
o Model:
由本地模組或 COIMOTION
API
服務提供
o View:
由 HTML,
CSS
樣板構成
o Controller:
由區塊的 Javascript
樣板構成，以下
做進⼀一步討論

17. The Block Controller
Block
Controller 具有以下的特性：
o 只提供程式功能給對應的區塊。
o Block
Controller
具有
OO
encapsulaGon
的特性，
也就是在
controller
內定義的函式名稱不會與
其他
controller
內的函式名稱衝突
o coServ
提供
controller
⼀一些內建功能，讓開發
者在控制區塊時更⽅方便

18. Block Controller 範例
o ctrl
代表
controller
本⾝身，類似 node.js
中module
的⽤用法
o 因為不同區塊可能⽤用了同樣的 css
id。所以13⾏行中⽤用 ctrl.sel()
⽽而不直接⽤用 $()
，以確保取得的是本區塊的DOM 物件。傳回
值已經包成 jQuery 物件了。
1 ctrl.startup = function() {
2 /*當區塊完成顯⽰示時，coServ 就會呼叫這個函式。適合做起始的⼯工作*/
3 };
4
5 ctrl.turnOnOff = function(chkBox) {
6 /*這個 method 在外部（js檔外）是可⾒見的 */
7 showVisual( $(chkBox).checked );
8 };
9
10 function showVisual(isChecked) {
11 /* 這個檔在外部是不可⾒見的（無法從外部呼叫）*/
12 if (isChecked)
13 ctrl.sel(‘#bulb’).html = ‘打開’;
14 };

19. 在 HTML 中呼叫 Controller
o coServ
會將區塊的 Javascript
檔轉成
ctrl
物件
o 如何在 HTML 中引⽤用這個 ctrl 物件呢？如上例第⼆二⾏行所⽰示，
coServ 提供了⼀一個特殊的樣板變數（⽤用 <%=ctrl%>來引⽤用）。
透過這個變數，便可使⽤用區塊的 controller。
1 <input type=“checkbox”
2 onclick=“<%=ctrl%>.turnOnOff(this);” > 開關
3
4 <div>電燈已經
5 <span id=“bulb”>關閉</span>
6 </div>

20. 關於 SASS
coServ
（從
0.8.8
版起）⽀支援 scss
語法的
SASS
檔
案。開發者可以⽤用
.sass
檔案來取代區塊中原來
的
.css
檔。
詳細內容可參考
https://github.com/coimotion/coServ/blob/
master/howToSASS_zh.md

21. CSS Encapsulation
標題取的⽂文鄒鄒，意思是指如何保護
CSS
中的
class
和
id，不致互相撞名。
coServ 對區塊提供了 css
encapsulaGon 的保護，
開發者不需要擔⼼心不同區塊的 class 或 id 會互相
干擾

22. ⼩小結論
coServ
中的區塊⾃自成⼀一個單位，其中的
CSS
和
Javascript
都受到保護。區塊間的
CSS
和 Javascript
不會互相干擾或衝突。
因為上述的特性，區塊可以被任意組合在⼀一個網
⾴頁中，也可以重複使⽤用。
善⽤用區塊，開發時間變成 1/10 是可能的

23. Thanks