1. Postoffer前端架构设计
市场开发部-前端组 徐琳

2. 目录 CONTENTS
1 产品线特点
2 前端架构设计
3 规划和展望

3. 产品线特点
什么是Offer？
• Offer是指会员在网站上发布的信息。
• Offer线是中文站最基础也是最核心的产品线之一，任何在线交易都依赖
于offer。
Offer
发布Offer 管理Offer
Offer detail展示

4. 产品线特点
Offer发布线结构
A
发布一体化入口页面
B
选择类目页面
C
填写信息详细页
D
发布成功页

5. 产品线特点
你对Offer发布线有什么样的印象?

6. 产品线特点
Offer发布线重构前
• 产品线迭代频繁
• 业务逻辑复杂(牵一发而动全身)
• 代码耦合度太高
• 不满足服务化需求

7. 产品线特点
重构组件分割

8. 产品线特点
重构组件分割

9. 产品线特点
重构组件分割

10. 前端架构设计
目录设计
• css 文件目录：
 app
 platform
 postoffer
• js 文件目录：
 app
 platform
 postoffer

11. 前端架构设计
css目录结构说明
• global
base.css 页面公用样式，如layout。
postoffer-merge.css 公用css merge文件，3个页面公用。
• module
widget 业务无关公用样式。
mod 模块相关样式。
unit 业务相关的公用样式。
• page
页面级样式以及merge文件。

12. 前端架构设计
css目录结构说明
• global
base.css 页面公用样式，如layout。
postoffer-merge.css 公用css merge文件，3个页面公用。
• module
widget 业务无关公用样式。
mod 模块相关样式。
unit 业务相关的公用样式。
• page
页面级样式以及merge文件。

13. 前端架构设计
js目录结构说明
• global
base.js 名字空间声明，申明名字空间
postoffer-merge.js 公用js merge文件，被两个页面都引用
• module
widget无关公用js，如 Dialog, Tips等。
mod板块相关js文件，每个板块(mod)对应于一个或多个js文件，如果对应于多个js文
件，这些js文件需要位于板块名称相同的文件夹下。
unit 业务相关的公用js文件。
• page
页面级js以及merge文件。如：表单提交publish

14. 前端架构设计
模块初始化管理
• Html
 所有模块需要包含两个class，mod和模块名称。
 板块相关的数据（如：初始化数据，异步验证接口地址等） 以
json格式配置在 data-mod-config中。
以交易信息为例：

15. 前端架构设计
模块初始化管理
• Css
以上模块对应的css结构为：
 mod
 trade-info
 trade-info.css

16. 前端架构设计
css编码规则
• css名称需要和它描述的节点名称一致。
• widget，mod，unit都对应于页面中的区块，每一区块都将分配一个class
名称，且有固定前缀。
• 各部分可允许依赖的关系为：
base < widget < unit < mod < page，后者可根据需要覆盖前者规则

17. 前端架构设计
模块初始化管理
• Js
如果一个mod比较复杂，那么需要有几个类来完成它的功能， 需要为这个mod申明一个名
字空间。

18. 前端架构设计
模块初始化管理
一个mod对应于一个主类，由它来完成mod的初始化，定义后需要注册
到ModContext中。

19. 前端架构设计
模块初始化管理
部分代码：

20. 前端架构设计
模块间交互
模块间交互
基于数据模 基于页面元
型的交互 素的交互

21. 前端架构设计
模块间交互
• 基于数据模型的交互
 每个板块在初始化前会被ModContext注入一个接口，通过这个接口可以“通知”，“监听”
和“查询”offer数据。
 该接口的一个实现会在初始化时注入到Mod对象中所以在Mod中可以通过this.
formDataProvider取得。

22. 前端架构设计
模块间交互
• 基于数据模型的交互

23. 前端架构设计
模块间交互
• 基于页面元素的交互
板块的有些事件不是基于offer数据的，比如类目选择板块（当前类目发生变化，而其他
板块可能也需要同步做变化），此类交互使用 jQuery事件机制
事件统一挂接在模块点上:
感兴趣的地方可以这样获得通知:
如果是全局事件，则事件统一挂接在window上。

24. 前端架构设计
事件bind在trigger之后怎么办?

25. 前端架构设计
事件bind在trigger之后怎么办?
• 框架给出nodeallready事件，将在所有mod的init执行完毕以后抛出。
所以有特殊要求的trigger可以这样用：
//触发规格属性事件
PO.ModContext.bind('nodeallready', function() {
self.handleSpecaProDiv();
});

26. 前端架构设计
表单提交

27. 前端架构设计
改进情况对比
• Yslow评分

28. 前端架构设计
改进情况对比
• Keepfast
类目为“电子元器件 > 开关 > 流量开关”的发布页页面加载时间：
组件化前：
组件化后：

29. 规划和展望
• 独角兽部署
实现真正意义上的组件化，style可以按需加载。
• 业务逻辑上的清理优化
• 满足行业化需求

30. Q&A

31. The end