小部件

陈永鹏的微博

陈永鹏的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

作者：陈永鹏

邮箱：[e-mail]

转载请注明作者陈永鹏CSDN博客地址:http://blog.csdn.net/chenyoper

零零糖