Postoffer前端架构设计
31
Postoffer 前前前前前前 徐徐 徐徐徐徐徐 - 徐徐徐
Transcript of Postoffer前端架构设计
Postoffer 前端架构设计徐琳市场开发部 - 前端组
目录
产品线特点1
前端架构设计2
规划和展望3
CONTENTS
产品线特点
• Offer 是指会员在网站上发布的信息。• Offer 线是中文站最基础也是最核心的产品线之一，任何在线交易都依
赖于 offer 。
什么是 Offer ？
Offer
发布 Offer
Offer detail 展示
管理 Offer
产品线特点
Offer 发布线结构
发布成功页D
选择类目页面B
填写信息详细页C
发布一体化入口页面A
产品线特点
你对 Offer 发布线有什么样的印象 ?
产品线特点
Offer 发布线重构前
• 产品线迭代频繁• 业务逻辑复杂 ( 牵一发而动全身 )
• 代码耦合度太高• 不满足服务化需求
产品线特点
重构组件分割
产品线特点
重构组件分割
产品线特点
重构组件分割
前端架构设计
目录设计
• css 文件目录： app
platform
postoffer
• js 文件目录： app
platform
postoffer
前端架构设计
css 目录结构说明
• global
base.css 页面公用样式，如 layout 。 postoffer-merge.css 公用 css merge 文件， 3 个页面公
用。 • module
widget 业务无关公用样式。mod 模块相关样式。unit 业务相关的公用样式。
• page
页面级样式以及 merge 文件。
前端架构设计
css 目录结构说明
• global
base.css 页面公用样式，如 layout 。 postoffer-merge.css 公用 css merge 文件， 3 个页面公
用。 • module
widget 业务无关公用样式。mod 模块相关样式。unit 业务相关的公用样式。
• page
页面级样式以及 merge 文件。
前端架构设计
js 目录结构说明
• globalbase.js 名字空间声明，申明名字空间
postoffer-merge.js 公用 js merge 文件，被两个页面都引用
• module
widget 无关公用 js ，如 Dialog, Tips 等。
mod 板块相关 js 文件，每个板块 (mod) 对应于一个或多个 js 文件，如果对应于多个 js 文件，这些 js 文件需要位于板块名称相同的文件夹下。
unit 业务相关的公用 js 文件。
• page
页面级 js 以及 merge 文件。如：表单提交 publish
前端架构设计
模块初始化管理
• Html
所有模块需要包含两个 class ， mod 和模块名称。 板块相关的数据（如：初始化数据，异步验证接口地址等） 以
json 格式配置在 data-mod-config 中。以交易信息为例：
前端架构设计
模块初始化管理
• Css
以上模块对应的 css 结构为： mod
trade-info
trade-info.css
前端架构设计
css 编码规则
• css 名称需要和它描述的节点名称一致。
• widget ， mod ， unit 都对应于页面中的区块，每一区块都将分配一个class 名称，且有固定前缀。
• 各部分可允许依赖的关系为：base < widget < unit < mod < page ，后者可根据需要覆盖前者规则
前端架构设计
模块初始化管理
• Js
如果一个 mod 比较复杂，那么需要有几个类来完成它的功能， 需要为这个 mod 申明一个
名字空间。
前端架构设计
模块初始化管理
一个 mod 对应于一个主类，由它来完成 mod 的初始化，定义后需要注册到 ModContext 中。
前端架构设计
模块初始化管理
部分代码：
前端架构设计
模块间交互
基于数据模型的交互
基于页面元素的交互
模块间交互
前端架构设计
模块间交互
• 基于数据模型的交互 每个板块在初始化前会被 ModContext 注入一个接口，通过这个接口可以“通知”，
“监听”和“查询” offer 数据。 该接口的一个实现会在初始化时注入到 Mod 对象中所以在 Mod 中可以通过 this.
formDataProvider 取得。
前端架构设计
模块间交互
• 基于数据模型的交互
前端架构设计
模块间交互
• 基于页面元素的交互 板块的有些事件不是基于 offer 数据的，比如类目选择板块（当前类目发生变化，而其
他板块可能也需要同步做变化），此类交互使用 jQuery 事件机制事件统一挂接在模块点上 :
感兴趣的地方可以这样获得通知 :
如果是全局事件，则事件统一挂接在 window 上。
前端架构设计
事件 bind 在 trigger 之后怎么办 ?
前端架构设计
事件 bind 在 trigger 之后怎么办 ?
• 框架给出 nodeallready 事件，将在所有 mod 的 init 执行完毕以后抛出。所以有特殊要求的 trigger 可以这样用：
// 触发规格属性事件PO.ModContext.bind('nodeallready', function() {
self.handleSpecaProDiv();});
前端架构设计
表单提交
前端架构设计
改进情况对比
• Yslow 评分
前端架构设计
改进情况对比
• Keepfast
类目为“电子元器件 > 开关 > 流量开关”的发布页页面加载时间：
组件化前：
组件化后：
规划和展望
• 独角兽部署实现真正意义上的组件化， style 可以按需加载。
• 业务逻辑上的清理优化• 满足行业化需求
Q&A
The end
