Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,891 views

Published on

  • cool
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

×