More Related Content
Similar to Postoffer前端架构设计
Similar to Postoffer前端架构设计 (20)
Postoffer前端架构设计
- 3. 产品线特点
什么是Offer?
• Offer是指会员在网站上发布的信息。
• Offer线是中文站最基础也是最核心的产品线之一,任何在线交易都依赖
于offer。
Offer
发布Offer 管理Offer
Offer detail展示
- 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中。
以交易信息为例:
- 21. 前端架构设计
模块间交互
• 基于数据模型的交互
每个板块在初始化前会被ModContext注入一个接口,通过这个接口可以“通知”,“监听”
和“查询”offer数据。
该接口的一个实现会在初始化时注入到Mod对象中所以在Mod中可以通过this.
formDataProvider取得。
- 23. 前端架构设计
模块间交互
• 基于页面元素的交互
板块的有些事件不是基于offer数据的,比如类目选择板块(当前类目发生变化,而其他
板块可能也需要同步做变化),此类交互使用 jQuery事件机制
事件统一挂接在模块点上:
感兴趣的地方可以这样获得通知:
如果是全局事件,则事件统一挂接在window上。