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

Postoffer前端架构设计

1,870 views

Published on

1 Comment
4 Likes
Statistics
Notes
  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
1,870
On SlideShare
0
From Embeds
0
Number of Embeds
295
Actions
Shares
0
Downloads
17
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Postoffer前端架构设计

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

×