Your SlideShare is downloading. ×

旺铺前端设计分享

370

Published on

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

No Downloads
Views
Total Views
370
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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);
  • 15.
  • 16. 板块css/js的按需加载
  • 17. 折衷方案
    externalCss和externalJs
  • 18. galaxy简介
    插件结构(文件夹结构)
    渲染方式
  • 19. 原有模板结构
  • 20. galaxy模板结构
  • 21. galaxy theme
  • 22.
  • 23. mod-box
  • 24.
  • 25. 开发感悟分享
    一 、从业务需求抽象架构需求(直接了当地抽象, 具体的抽象)
    1. mod :
    可以在任何时刻对板块(一个,多个或某类)进行初始化
    ModContext.refresh(mod)
    仅添加板块的HTML和相应的js和css的方式进行板块扩展
    ModContext.register(name, config)
    2. datastore
    对多次相同url和参数的取数请求,只请求一次
    DataStore.get(url, options)
    3. tracelog
    可以以申明式的方式进行打点
  • 26.
  • 27. 二、约定大于配置(prefer convention over configuration)
    mod, data-mod-config, data-box-config, data-edit-config, form-handler等等

×