Mais conteúdo relacionado
Semelhante a 不一樣的 Web Server coServ Part II (20)
不一樣的 Web Server coServ Part II
- 2. 這是個續集
還沒看過 part I 的請先看
h<p://www.slideshare.net/BenLue/web-‐
server-‐co-‐serv
專案中⽂文說明
h<ps://github.com/coimoGon/coServ/
blob/master/README_zh.md
- 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 物件從何⽽而來?
- 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 更多細節在未來的簡報中說明
- 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