陳永鵬的csdn博客地址：http://blog.csdn.net/chenyoper
陳永鵬的博客園地址：http://www.cnblogs.com/Yoperchen/
小部件：
完成特定的展示或者功能，有大量的重複性。
比如，列表、詳情、表單、網站頂部、網站底部、導航條..等等
爲什麼需要小部件
以列表爲例，前臺展示需要文章列表，用戶中心管理文章需要文章列表，後臺管理需要文章列表、如果有商家，商家後臺需要文章列表。
前臺的展示可能還有更細緻的要求，比如最熱門的文章、推介的文章。
可能我們不止一個項目，還有多個項目
比如
項目一是一個商城
|---|前臺
|-----文章列表(公告、幫助)
|-----最熱門文章(用戶購物達人分享)
|-----...等
|---後臺
|-----文章管理列表
|---用戶中心
|-----我的文章
|-----...等
項目二是一個門戶
|---|前臺
|-----文章列表(新聞)
|-----最熱門文章(新聞)
|-----...等
|---後臺
|-----文章(新聞)管理列表
|-----...等
|---用戶中心
|-----我的關注(新聞)
|-----...等
項目三是一個博客
|---|前臺
|-----文章列表(博客)
|---後臺
|-----博客文章管理列表
|---個人中心
|-----我的博客文章
項目四是一個個性化的新聞聚合站點
|-----...等
項目五....
以上，我們重複的寫了很多後端和前端(html+css+js)代碼
如果我們把功能抽離出來，形成小部件，原本我們有N個項目寫了不止N份後端前端代碼，現在變成了只有一份代碼供給調用。還保持了風格的統一。
模塊的佈局
每個模塊至少要有以下幾個小部件
列表(選擇)、詳情、修改(添加)
模塊的頭部(內有標題、描述)、模塊的底部(內有描述)、模塊內容(內有列表、內容、表單等)、點擊關閉/開啓(在頭部裏)
頭部底部都可以隱藏，只保留內容
如下圖。
模塊的控制
異步控制，異步調用之後，顯示模塊。
同步控制，渲染的時候直接調用，顯示模塊。
小部件的模版
一個功能，視場景的不同有不一樣的樣式
但實現的卻是相同的功能，這個時候，需要多個模版匹配一個小部件
文章列表部件有以下模版
template1.html
style1.css
script1.js
template2.html
style2.css
script2.js
template3.html
style3.css
script3.js
作者：陳永鵬
轉載請註明作者陳永鵬CSDN博客地址:http://blog.csdn.net/chenyoper