1. 旺铺前端设计分享

2. 目标 1. 了解旺铺总体结构 2. 如何扩展旺铺板块 3. galaxy框架简介 3. 主题皮肤和自定义样式

3. 了解旺铺 winport.cn.aliaba.com HTML结构—— 怎么样的页面结构才能承载旺铺的需求

4. 总体结构

5. mod(widget)组装方式

6. 旺铺——双飞翼布局

7. 双飞翼——侧栏在右

8. 双飞翼布局特点及SEO差异化 这种布局的特点是不管是1：3结构还是3：1结构 主区域(grid-main)的内容总是先被渲染出来， 即展示方式和HTML结构解耦。 基于上面的特点，旺铺的动态布局切换很容易实现 对于前端来说只需要改变一个class名称 对于后端来说只需要改变layout类型， 不需要去更改内部的widget顺序 SEO差异化 grid-sub先渲染（grid-sub结点在grid-main之前， 而展示效果却一样

9. 板块初始化 大部分的板块需要JS进行初始化(侧边栏P4P广告位， 相册板块等等) 每个板块如果需要应该会有独立的初始化逻辑 DIY需求 ： 添加一个新板块的时候需要初始化这个板块 修改板块的时候可能也需要重新渲染板块 可能在其他地方也需要重新渲染板块， 例： 修改导横条数据

10. 架构需求（相对于业务需求） 1. 可以在任何时候对指定板块进行初始化 2 扩展性：只需要提供板块的内容(HTML), 以及初始化该内容的JS逻辑就可以了

11. 开发一个新板块 <div class=”mod wp-albums” data-mod-config=’{“albumUrl”: “http://...”}’> <div class=” m-body”> <div class=”m-header”>公司相册</div> <div class=”m-content”>相册主题内容会渲染在这里</div> </div> </div>

12. var Albums = Util.mkclass({ init: function(div, config) { this.div = div; this.config = config; this.render(); }, render: function() { varurl = this.config.albumUrl; $.ajax(url, { success: function()… }) } }); ModContext.register(‘wp-album’, Albums);

13. 单实例板块 varSupplierInfo = { init: function(div, config) { … } }; ModContext.register(‘wp-supplier-info’, SupplierInfo );

14. 可以在任何时候对指定板块进行初始化 ModeContext#refresh(mod);

16. 板块css/js的按需加载

17. 折衷方案 externalCss和externalJs

18. galaxy简介 插件结构（文件夹结构） 渲染方式

19. 原有模板结构

20. galaxy模板结构

21. galaxy theme

23. mod-box

25. 开发感悟分享 一 、从业务需求抽象架构需求(直接了当地抽象, 具体的抽象) 1. mod : 可以在任何时刻对板块(一个,多个或某类)进行初始化 ModContext.refresh(mod) 仅添加板块的HTML和相应的js和css的方式进行板块扩展 ModContext.register(name, config) 2. datastore 对多次相同url和参数的取数请求，只请求一次 DataStore.get(url, options) 3. tracelog 可以以申明式的方式进行打点

27. 二、约定大于配置(prefer convention over configuration) mod, data-mod-config, data-box-config, data-edit-config, form-handler等等