Submit Search
Upload
不一樣的 Web Server coServ Part II
•
8 likes
•
2,073 views
Ben Lue
Follow
繼續說明 coServ 的設計理念和使用方式。這一集主要說明「區塊」如何簡化網路應用的開發,以及 coServ 如何支援區塊。這個簡報有助於開發者掌握 coServ 的開發訣竅。
Read less
Read more
Software
Report
Share
Report
Share
1 of 23
Download now
Download to read offline
Recommended
Kind editor设计思路
Kind editor设计思路
taobao.com
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
使用BigPipe提升浏览速度
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
kumawu
Css性能优化
Css性能优化
linxz
Koubei banquet 34
Koubei banquet 34
Koubei UED
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
For beginners , Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
Recommended
Kind editor设计思路
Kind editor设计思路
taobao.com
编辑器设计Kissy editor
编辑器设计Kissy editor
taobao.com
使用BigPipe提升浏览速度
使用Bigpipe提升浏览速度
使用Bigpipe提升浏览速度
kumawu
Css性能优化
Css性能优化
linxz
Koubei banquet 34
Koubei banquet 34
Koubei UED
使用kslite支持第三方内容开发
使用kslite支持第三方内容开发
leneli
百度前端性能监控与优化实践
百度前端性能监控与优化实践
Welefen Lee
For beginners , Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Exam 98-375 HTML5 Application Development Fundamentals
Chieh Lin
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
ddd
Js dom
Js dom
lidashuang
编辑器设计U editor
编辑器设计U editor
taobao.com
Html&css培训 舒克
Html&css培训 舒克
jay li
新版,在W3Ctech 2011北京站会议上演示的版本
使用Big pipe提升浏览速度v2
使用Big pipe提升浏览速度v2
kumawu
DOM,BOM,Ajax,Event,JSON
Browser Object Model
Browser Object Model
jay li
我在W3CTech北京站第30期的分享,主要是解决了工作中遇到的一些问题,并没有对问题做深入的讨论。有不足之处请大家指正。
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Mingel Zhang
邓楠乔
Node js feat pegasus
Node js feat pegasus
cnfi
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
ziggear
J Query简介及入门指南
J Query简介及入门指南
AppZ
前端调试工具使用指南
前端调试工具使用指南
gm163com
淘宝前端技术
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
jay li
D2-ETao-show
D2-ETao-show
leneli
Mitosis seif elbadawy
Mitosis seif elbadawy
Seif El Badawy
21. yüzyıldayı, bilgi çağındayız. Biyoteknoloji devrimi, nanoteknoloji devrimi, akıllı cihazlar, insansız araçlar, ve daha niceleri. Herkes ve her şey veri üretmektedir.
21 Yüzyılda Bilginin Gücü - Kısa bir özet...
21 Yüzyılda Bilginin Gücü - Kısa bir özet...
Gelecek Hane
Create appealing Dashboards using Excel 2016 and SharePoint Online. SharePoint Saturday Ottawa
Luc labelle sps ottawa
Luc labelle sps ottawa
Luc Labelle
the ppt describes a slight idea about the concept and working area of mulitple dispatch
multiple dispatch(OOPs concepts)
multiple dispatch(OOPs concepts)
sumitra22
Dijitalleşme ve süreçleri ile ilgili Top 10 trendleri inceledik.
Top10 Trends 2015 - GelecekHane
Top10 Trends 2015 - GelecekHane
Gelecek Hane
Create Dashboards with Power BI
SharePoint Saturday New Hampsire
SharePoint Saturday New Hampsire
Luc Labelle
India (English)
India (English)
Pablogil04
Gimacon ppt
Gimacon ppt
Ansley Dias
More Related Content
What's hot
第三方内容开发最佳实践
第三方内容开发最佳实践
taobao.com
ddd
Js dom
Js dom
lidashuang
编辑器设计U editor
编辑器设计U editor
taobao.com
Html&css培训 舒克
Html&css培训 舒克
jay li
新版,在W3Ctech 2011北京站会议上演示的版本
使用Big pipe提升浏览速度v2
使用Big pipe提升浏览速度v2
kumawu
DOM,BOM,Ajax,Event,JSON
Browser Object Model
Browser Object Model
jay li
我在W3CTech北京站第30期的分享,主要是解决了工作中遇到的一些问题,并没有对问题做深入的讨论。有不足之处请大家指正。
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Mingel Zhang
邓楠乔
Node js feat pegasus
Node js feat pegasus
cnfi
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
ziggear
J Query简介及入门指南
J Query简介及入门指南
AppZ
前端调试工具使用指南
前端调试工具使用指南
gm163com
淘宝前端技术
淘宝前端技术巡礼
淘宝前端技术巡礼
jay li
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
jay li
D2-ETao-show
D2-ETao-show
leneli
What's hot
(14)
第三方内容开发最佳实践
第三方内容开发最佳实践
Js dom
Js dom
编辑器设计U editor
编辑器设计U editor
Html&css培训 舒克
Html&css培训 舒克
使用Big pipe提升浏览速度v2
使用Big pipe提升浏览速度v2
Browser Object Model
Browser Object Model
移动端Web开发性能优化实践
移动端Web开发性能优化实践
Node js feat pegasus
Node js feat pegasus
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
Web设计 5 “动感新势力”(css3 html5 以及 web_gl)
J Query简介及入门指南
J Query简介及入门指南
前端调试工具使用指南
前端调试工具使用指南
淘宝前端技术巡礼
淘宝前端技术巡礼
前端调试工具,编码相关,性能相关
前端调试工具,编码相关,性能相关
D2-ETao-show
D2-ETao-show
Viewers also liked
Mitosis seif elbadawy
Mitosis seif elbadawy
Seif El Badawy
21. yüzyıldayı, bilgi çağındayız. Biyoteknoloji devrimi, nanoteknoloji devrimi, akıllı cihazlar, insansız araçlar, ve daha niceleri. Herkes ve her şey veri üretmektedir.
21 Yüzyılda Bilginin Gücü - Kısa bir özet...
21 Yüzyılda Bilginin Gücü - Kısa bir özet...
Gelecek Hane
Create appealing Dashboards using Excel 2016 and SharePoint Online. SharePoint Saturday Ottawa
Luc labelle sps ottawa
Luc labelle sps ottawa
Luc Labelle
the ppt describes a slight idea about the concept and working area of mulitple dispatch
multiple dispatch(OOPs concepts)
multiple dispatch(OOPs concepts)
sumitra22
Dijitalleşme ve süreçleri ile ilgili Top 10 trendleri inceledik.
Top10 Trends 2015 - GelecekHane
Top10 Trends 2015 - GelecekHane
Gelecek Hane
Create Dashboards with Power BI
SharePoint Saturday New Hampsire
SharePoint Saturday New Hampsire
Luc Labelle
India (English)
India (English)
Pablogil04
Gimacon ppt
Gimacon ppt
Ansley Dias
Trabajo extraclase Administración I Bimestre. Mgtr. Loaiza Aguirre Maria Isabel. Autora: Andreina Guadalupe Tandazo Landivar.
Capitulo 7
Capitulo 7
andreinatandazo
AMA Wednesday Market Auction 2014-01-08
AMA Wednesday Market Auction 2014-01-08
mrsbubba33
Бровченко Топало Детская площадка
Бровченко Топало Детская площадка
sprojectdp
The Best Art Gallery in Jaipur is Art and Frame Gallery. Paintings in this gallery is on different themes and by many talented Artists.
Art gallery in jaipur
Art gallery in jaipur
Priyanka Aggarwal
microwaves
microwaves by peer aakif
microwaves by peer aakif
peeraakif
Türkiye Maker hareketini organize ediyoruz. 7 Mayıs günü StudioX'te görüştük. Görüşme esnasında sunulan dosyadır.
Türkiye Maker Hareketi - 07.05.2014 - Workshop
Türkiye Maker Hareketi - 07.05.2014 - Workshop
Gelecek Hane
Go green curb global warming
Go green curb global warming
Mohammed Suhail
Evaluation one final
Evaluation one final
AliciaRhodes11
Goji Berry fruits develop on a scarlet good fresh fruit that is created by small green-leafed vines utilizing a type of raisin. Goji Berry also offers anti inflammatory properties which allow it to as good for your heart.It also helps enhance your Digestion.Drinking Goji juice usually helps in every kind of digestive dilemmas. Goji Berries have anti-bacterial and anti-fungal properties.
Gojiberryreviews net
Gojiberryreviews net
CompleteLumber318
Türkiye'de Yaşam Bilimlerini popüler hale getirmek için bir bilinçlendirme ve seferberlik hareketi.
Türkiye GEN Hareketi
Türkiye GEN Hareketi
Gelecek Hane
Mr beans christmas
Mr beans christmas
nicodex
Presentation made by year 6 students from a Spanish school
Basque mountain
Basque mountain
mjuanalcaide
Viewers also liked
(20)
Mitosis seif elbadawy
Mitosis seif elbadawy
21 Yüzyılda Bilginin Gücü - Kısa bir özet...
21 Yüzyılda Bilginin Gücü - Kısa bir özet...
Luc labelle sps ottawa
Luc labelle sps ottawa
multiple dispatch(OOPs concepts)
multiple dispatch(OOPs concepts)
Top10 Trends 2015 - GelecekHane
Top10 Trends 2015 - GelecekHane
SharePoint Saturday New Hampsire
SharePoint Saturday New Hampsire
India (English)
India (English)
Gimacon ppt
Gimacon ppt
Capitulo 7
Capitulo 7
AMA Wednesday Market Auction 2014-01-08
AMA Wednesday Market Auction 2014-01-08
Бровченко Топало Детская площадка
Бровченко Топало Детская площадка
Art gallery in jaipur
Art gallery in jaipur
microwaves by peer aakif
microwaves by peer aakif
Türkiye Maker Hareketi - 07.05.2014 - Workshop
Türkiye Maker Hareketi - 07.05.2014 - Workshop
Go green curb global warming
Go green curb global warming
Evaluation one final
Evaluation one final
Gojiberryreviews net
Gojiberryreviews net
Türkiye GEN Hareketi
Türkiye GEN Hareketi
Mr beans christmas
Mr beans christmas
Basque mountain
Basque mountain
Similar to 不一樣的 Web Server coServ Part II
解釋 coServ 的設計觀點,協助網站或是網路應用的開發者能更有效的使用 coServ 的各項功能,並期望 coServ 的開發者能有效縮短原有的開發時程。
不一樣的Web server... coServ
不一樣的Web server... coServ
Ben Lue
Web dev road map part one
Web dev road map part one
Web dev road map part one
安 闫
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
luolonghao
Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异
cleverpig
在北京 2012/9/9 所举办的 SDCC 分享「模块加载策略」
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
Joseph Chiang
淘宝UED前端培训课程
深入剖析浏览器
深入剖析浏览器
jay li
it's my own ppt
Html5
Html5
cazhfe
* 弄懂.NET Core & ASP.NET Core總體故事背景 * .NET Core開發從哪開始? * 從專案樣板檢視ASP.NET Core * 用CLI tools管理你的專案 * Fundamentals基礎服務 * Web Host建立與執行 * Configuration組態系統 * Dependency Injection相依性注入 * Middleware中介軟體 * ASP.NET Core 2.1新鮮事 * .NET Core 3.0 Roadmap ASP.NET Core作為MVC 5之後的接班人,無論在跨平台能力、執行效能與宏觀架構管控性上,皆有長足進步與增長。同時其整個框架也是重新精煉打造,將ASP.NET Core MVC、Razor Pages及Web API三者融合成一體,成為整合度及協同性更高的平台。而在社群及技術網站之聲量日漸高漲的今天,一如旭日東昇般發出耀眼的光芒,面對這股來勢洶洶的技術新浪潮,本講座將解析其技術之來龍去脈,讓您了解該如何學習及導入公司專案中,徹底掌握現在及未來趨勢。 碼魔法網站:https://www.codemagic.com.tw/ 碼魔法FB : https://www.facebook.com/CodeMagicTw/
ASP.NET Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
江華 奚
...
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
agen
Css 大家可以借鉴一二
高效率的、可维护的Css
高效率的、可维护的Css
simaopig
关于如何书写高效、可维护、组件化的CSS,翻译自Russ Weakley的《Efficient, maintainable CSS》 http://www.slideshare.net/maxdesign/efficient-maintainable-css-presentation
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
newker
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
介绍Uliweb近况及一些设计思路
Uliweb设计分享
Uliweb设计分享
modou li
後端工程師當了這麼多年,練就了一身功力,卻敵不過大環境的劇烈變遷。前端工程近幾年的的發展相當迅速,成為 Web 開發的主要角色。不過,這個情勢可能在不久的將來即將翻盤,因為 WebAssembly 的出現,讓後端開發者也能用熟悉的程式語言與框架,開發出即時互動的 SPA 網站應用程式。本次演說,將帶來 .NET 最新最夯的 Blazor 框架,讓你迅速了解如何利用 C#/Razor 與 HTML5 開發出優異的網站應用程式。 Modern Web 2018 👉 http://modernweb.tw/
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
Will Huang
針對前端開發所要瞭解的技術作一個簡介
前端開發學習簡介
前端開發學習簡介
peterju
在 2015 年 5 月,我們與臺中科大資工系合作,舉辦 Laravel 工作坊,讓參與的學員在 20 個小時內學會使用 Laravel 建置一個簡易的 Blog 系統。
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Shengyou Fan
Kissy模块化实践
Kissy模块化实践
yiming he
introduction to kissy design
Kissy design
Kissy design
yiming he
2013/2/16 與 OSSF 合作的課程內容,簡報原始檔及講義請見 http://go.bobchao.net/ga4floss-ss
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
Bob Chao
Similar to 不一樣的 Web Server coServ Part II
(20)
不一樣的Web server... coServ
不一樣的Web server... coServ
Web dev road map part one
Web dev road map part one
富文本编辑器在互联网上的应用
富文本编辑器在互联网上的应用
Web前端标准在各浏览器中的实现差异
Web前端标准在各浏览器中的实现差异
模块加载策略 - 2012 SDCC, 北京
模块加载策略 - 2012 SDCC, 北京
深入剖析浏览器
深入剖析浏览器
Html5
Html5
ASP.NET Core 2.1設計新思維與新發展
ASP.NET Core 2.1設計新思維與新發展
基于Greasemonkey的Firefox浏览器扩展
基于Greasemonkey的Firefox浏览器扩展
高效率的、可维护的Css
高效率的、可维护的Css
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Uliweb设计分享
Uliweb设计分享
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
使用 C#/Razor 開發互動式 WebAssembly 網站 (Modern Web 2018)
前端開發學習簡介
前端開發學習簡介
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Kissy模块化实践
Kissy模块化实践
Kissy design
Kissy design
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
給 FLOSS 社群網站管理志工的網站分析入門 - 以 Google Analytics 為例
More from Ben Lue
coServ will officially turn to release 1.0 soon. This presentation previews what are the new and important features of coServ 1.0. Its clean, simple concepts make web development extremely easy and "enjoyable".
Introducing coServ
Introducing coServ
Ben Lue
The simplicity of JSON-FP expressions allows programmers to focus on functional blocks instead of splitting hairs on syntax of programming structure. That simplicity also makes metaprogramming feasible.
Programming can be like circuits drawing -- a JSON-FP perspective
Programming can be like circuits drawing -- a JSON-FP perspective
Ben Lue
Hadoop, Spark or even Clojure? Those may be out-dated. JSON-FP brings in a new programming paradigm that is fun and inspiring. If you need to query objects in distributed / heterogeneous data repositories, you might want to try out JSON-FP.
What is JSON-FP
What is JSON-FP
Ben Lue
目前已知的 API 服務都還只在摸索的階段。這個簡報解釋了 API 服務為何會徹底改變網路應用開發的模式,並說明了一個好的 API 應有的特色。簡報中也說明了 COIMOTION 對開發者提供了非常有用的功能,並介紹使用 COIMOTION 的成功範例。
Hack & Go! Redefining API @ MOPCON 2014
Hack & Go! Redefining API @ MOPCON 2014
Ben Lue
8/30 在 KSDG 分享的內容。除了說明何謂模組之外,也介紹 node.js 從初學開始要進階時所要了解的幾個重點。
學好 node.js 不可不知的事
學好 node.js 不可不知的事
Ben Lue
7/12 Workshop 的內容。介紹如何以 COIMOTION 自訂內容集,並以PhoneGap 實作行動應用程式。簡報中除了說明 PhoneGap 的使用步驟與 COIMOTION 開發者後台的使用說明外,還介紹了「Wireframe」、「頁面清單」、「API 清單」的開發管理模式,協助開發者有效進行專案開發。
HTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 app
Ben Lue
介紹如何以 HTML5 和 COIMOTION 快速打造跨平台的 app,並說明了如何在 COIMOTION 中自製內容集以儲存 app 所產生的資料。 原為 KSDG 6/21/2014 meetup 的講稿。已編修加重 COIMOTION 的說明。
以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App
Ben Lue
針對第一次使用COIMOTION的教學範例。借助一個簡單的例子,說明COIMOTION的觀念和使用方法。看完後就可立即上手,開始用COIMOTION玩出有趣的新應用。 註:這個簡報在 2014.3 上線後,COIMOTION 平台本身已有不少演進。這次根據新的資料加以補正。
第一次使用COIMOTION就上手
第一次使用COIMOTION就上手
Ben Lue
COIMOTION提供了App開發更簡便有效的模式。這個文件說明COIMOTION所引入的新概念,以方便開發者充分利用COIMOTION的功能。
COIMOTION概念介紹
COIMOTION概念介紹
Ben Lue
More from Ben Lue
(9)
Introducing coServ
Introducing coServ
Programming can be like circuits drawing -- a JSON-FP perspective
Programming can be like circuits drawing -- a JSON-FP perspective
What is JSON-FP
What is JSON-FP
Hack & Go! Redefining API @ MOPCON 2014
Hack & Go! Redefining API @ MOPCON 2014
學好 node.js 不可不知的事
學好 node.js 不可不知的事
HTML+COIMOTION 開發跨平台 app
HTML+COIMOTION 開發跨平台 app
以HTML5和COIMOTION打造跨平台App
以HTML5和COIMOTION打造跨平台App
第一次使用COIMOTION就上手
第一次使用COIMOTION就上手
COIMOTION概念介紹
COIMOTION概念介紹
不一樣的 Web Server coServ Part II
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
Download now