旺铺前端设计分享

472 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
472
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

旺铺前端设计分享

  1. 1. 旺铺前端设计分享<br />
  2. 2. 目标<br />1. 了解旺铺总体结构<br />2. 如何扩展旺铺板块<br />3. galaxy框架简介<br />3. 主题皮肤和自定义样式<br />
  3. 3. 了解旺铺<br />winport.cn.aliaba.com<br />HTML结构—— 怎么样的页面结构才能承载旺铺的需求<br />
  4. 4. 总体结构<br />
  5. 5. mod(widget)组装方式<br />
  6. 6. 旺铺——双飞翼布局<br />
  7. 7. 双飞翼——侧栏在右<br />
  8. 8. 双飞翼布局特点及SEO差异化<br />这种布局的特点是不管是1:3结构还是3:1结构 主区域(grid-main)的内容总是先被渲染出来, 即展示方式和HTML结构解耦。<br />基于上面的特点,旺铺的动态布局切换很容易实现<br />对于前端来说只需要改变一个class名称<br />对于后端来说只需要改变layout类型, 不需要去更改内部的widget顺序<br />SEO差异化<br />grid-sub先渲染(grid-sub结点在grid-main之前, 而展示效果却一样<br />
  9. 9. 板块初始化<br />大部分的板块需要JS进行初始化(侧边栏P4P广告位, 相册板块等等)<br />每个板块如果需要应该会有独立的初始化逻辑<br />DIY需求 :<br />添加一个新板块的时候需要初始化这个板块<br />修改板块的时候可能也需要重新渲染板块<br />可能在其他地方也需要重新渲染板块, 例: 修改导横条数据<br />
  10. 10. 架构需求(相对于业务需求)<br />1. 可以在任何时候对指定板块进行初始化<br />2 扩展性:只需要提供板块的内容(HTML), 以及初始化该内容的JS逻辑就可以了<br />
  11. 11. 开发一个新板块<br /><div class=”mod wp-albums” data-mod-config=’{“albumUrl”: “http://...”}’><br /> <div class=” m-body”><br /> <div class=”m-header”>公司相册</div><br /> <div class=”m-content”>相册主题内容会渲染在这里</div><br /> </div><br /></div><br />
  12. 12. var Albums = Util.mkclass({<br /> init: function(div, config) {<br /> this.div = div;<br />this.config = config;<br /> <br />this.render();<br /> },<br /> <br /> render: function() {<br />varurl = this.config.albumUrl;<br /> $.ajax(url, {<br /> success: function()…<br /> })<br /> }<br />});<br />ModContext.register(‘wp-album’, Albums);<br />
  13. 13. 单实例板块<br />varSupplierInfo = {<br /> init: function(div, config) {<br /> …<br /> }<br />};<br /> <br />ModContext.register(‘wp-supplier-info’, SupplierInfo );<br />
  14. 14. 可以在任何时候对指定板块进行初始化 <br />ModeContext#refresh(mod);<br />
  15. 15.
  16. 16. 板块css/js的按需加载<br />
  17. 17. 折衷方案<br />externalCss和externalJs<br />
  18. 18. galaxy简介<br />插件结构(文件夹结构)<br />渲染方式<br />
  19. 19. 原有模板结构<br />
  20. 20. galaxy模板结构<br />
  21. 21. galaxy theme<br />
  22. 22.
  23. 23. mod-box<br />
  24. 24.
  25. 25. 开发感悟分享<br />一 、从业务需求抽象架构需求(直接了当地抽象, 具体的抽象)<br /> 1. mod : <br />可以在任何时刻对板块(一个,多个或某类)进行初始化 <br />ModContext.refresh(mod)<br />仅添加板块的HTML和相应的js和css的方式进行板块扩展<br />ModContext.register(name, config)<br /> 2. datastore<br />对多次相同url和参数的取数请求,只请求一次 <br />DataStore.get(url, options)<br /> 3. tracelog<br />可以以申明式的方式进行打点<br />
  26. 26.
  27. 27. 二、约定大于配置(prefer convention over configuration)<br />mod, data-mod-config, data-box-config, data-edit-config, form-handler等等<br />

×