旺铺前端设计分享

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

了解旺铺

1. winport.cn.aliaba.com2. 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() {var url = this.config.albumUrl;$.ajax(url, {

success: function()…})

}});

ModContext.register(‘wp-album’, Albums);

单实例板块var SupplierInfo = {

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 等等