陈永鹏的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
作者:陈永鹏
邮箱:chen.yong.peng@foxmail.com
转载请注明作者陈永鹏CSDN博客地址:http://blog.csdn.net/chenyoper