Winport design
Upcoming SlideShare
Loading in...5
×
 

Winport design

on

  • 582 views

 

Statistics

Views

Total Views
582
Views on SlideShare
534
Embed Views
48

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 48

http://wd.alibaba-inc.com 43
http://fd.aliued.cn 5

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Winport design Winport design Presentation Transcript

    • 旺铺前端设计分享
    • 目标
      1. 了解旺铺总体结构
      2. 如何扩展旺铺板块
      3. galaxy框架简介
      3. 主题皮肤和自定义样式
    • 了解旺铺
      winport.cn.aliaba.com
      HTML结构—— 怎么样的页面结构才能承载旺铺的需求
    • 总体结构
    • mod(widget)组装方式
    • 旺铺——双飞翼布局
    • 双飞翼——侧栏在右
    • 双飞翼布局特点及SEO差异化
      这种布局的特点是不管是1:3结构还是3:1结构 主区域(grid-main)的内容总是先被渲染出来, 即展示方式和HTML结构解耦。
      基于上面的特点,旺铺的动态布局切换很容易实现
      对于前端来说只需要改变一个class名称
      对于后端来说只需要改变layout类型, 不需要去更改内部的widget顺序
      SEO差异化
      grid-sub先渲染(grid-sub结点在grid-main之前, 而展示效果却一样
    • 板块初始化
      大部分的板块需要JS进行初始化(侧边栏P4P广告位, 相册板块等等)
      每个板块如果需要应该会有独立的初始化逻辑
      DIY需求 :
      添加一个新板块的时候需要初始化这个板块
      修改板块的时候可能也需要重新渲染板块
      可能在其他地方也需要重新渲染板块, 例: 修改导横条数据
    • 架构需求(相对于业务需求)
      1. 可以在任何时候对指定板块进行初始化
      2 扩展性:只需要提供板块的内容(HTML), 以及初始化该内容的JS逻辑就可以了
    • 开发一个新板块
      <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>
    • 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);
    • 单实例板块
      varSupplierInfo = {
      init: function(div, config) {

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