|
|
|
# 活动模板开发实践（含JS-SDK特性开发）
|
|
|
|
## 为什么要做
|
|
|
|
|
|
|
|
一直以来，有货的专题活动页面是安排专人开发的。随着业务发展，要开发的活动页面越来越多，出现了以下问题：
|
|
|
|
|
|
|
|
- 工作量大，开发人力、时间成本增加，出问题概率增加。
|
|
|
|
- 编码风格不统一，维护困难。主题活动一般有多个页面，一旦有错误需要处理，需要将所有页面改一遍，逐个重发上线。
|
|
|
|
- 重复开发。有新的活动需求需要重新开发，原有的页面废弃。
|
|
|
|
|
|
|
|
通过对以往的活动页面分析发现，大多数页面需要的功能特性一样。因此，我们可以按照功能特性将页面拆分，模块化，然后针对某个活动选择不同的模块拼装页面。
|
|
|
|
|
|
|
|
我们希望，活动页面不再需要开发，业务运营人员根据视觉设计，可以自己完成活动页面的发布，使活动上线更加及时，运营更加高效。
|
|
|
|
|
|
|
|
如果有些活动页面当前活动模板不能很好支持，仍然需要单独开发。我们也希望一些基本功能，比如用户权限验证，可以通过引入 SDK 工具包迅速实现。
|
|
|
|
|
|
|
|
为了解决以上问题，我们开发了活动模板及 YOHO-JS-SDK 工具包。
|
|
|
|
|
|
|
|
## 实现
|
|
|
|
|
|
|
|
按照上述分析，我们将页面看做是不同类型的楼层的组合 + 常用基础功能。
|
|
|
|
|
|
|
|
基本楼层包括侧悬浮、底悬浮、普通楼层三大类型，普通楼层又包括顶悬浮、单张图片、优惠券、有货币、视频、轮播图、商品组、店铺组等类型，覆盖了活动页面常用的楼层类型。
|
|
|
|
|
|
|
|
这些楼层大部分可以后端渲染直出，商品组楼层比较特殊。商品组楼层包含多种配置类型，有些活动的商品固定，有些需要取具体类目下的商品或者取配置的活动商品池中的商品，截取一定数量展示。另外，一个活动可能配置多个商品楼层，每个商品楼层的商品数量多达 100 个。如果将商品组类型的楼层后端直接渲染输出，势必会影响页面加载速度。所以，这部分的渲染逻辑移到 YOHO-JS-SDK 工具包中，前端异步获取数据，浏览器端渲染输出页面。使用以上策略结合懒加载，实现了较高的页面加载速度和质量。
|
|
|
|
|
|
|
|
- 服务端具体实现：
|
|
|
|
|
|
|
|
服务端从接口取到结构化的数据后，根据数据选取不同的 handlebars 楼层模板进行渲染，输出页面。此部分沿用有货 H5 项目，使用 NodeJS(ExpressJS) + handlebars 模板实现。
|
|
|
|
|
|
|
|
服务端从接口取到的数据片段如下所示：
|
|
|
|
|
|
|
|
```
|
|
|
|
...
|
|
|
|
{
|
|
|
|
"floors":[
|
|
|
|
{
|
|
|
|
"component":[ // 楼层的基本样式
|
|
|
|
{
|
|
|
|
"top":"0.00",
|
|
|
|
"left":"0.00",
|
|
|
|
"width":"100.00",
|
|
|
|
"type":"placeholder",
|
|
|
|
"height":"99.90"
|
|
|
|
}
|
|
|
|
],
|
|
|
|
"param":{ // 楼层内元素的样式
|
|
|
|
"tabname":"",
|
|
|
|
"bgcolor":"",
|
|
|
|
"name":"",
|
|
|
|
"bgimg":"http://img11.static.yhbimg.com/yhb-img01/2017/12/15/16/0193573700dbd8a06e202e3a2f9721e860.jpg",
|
|
|
|
"anchorname":"",
|
|
|
|
"height":"168.984"
|
|
|
|
},
|
|
|
|
"id":709847, // 楼层 id
|
|
|
|
"type":"common_floor", // 楼层类型
|
|
|
|
"tableComp":"{"fid":"1","col":"1","cnName":"一行一列","width":"100","orderBy":1,"type":"common_floor"}", // 楼层内元素的排列方式
|
|
|
|
"order":1 // 楼层的顺序，即楼层的位置
|
|
|
|
},
|
|
|
|
...
|
|
|
|
]
|
|
|
|
}
|
|
|
|
...
|
|
|
|
```
|
|
|
|
|
|
|
|
通过服务端进一步处理后，以上数据片段中的楼层数据对应输出的 html 代码和渲染的页面楼层如下：
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- YOHO-JS-SDK 相关特性
|
|
|
|
|
|
|
|
常用基础功能封装成了 YOHO-JS-SDK 工具包，打包成一个可以在任何工程中方便引入的 js 文件。YOHO-JS-SDK 工具包提供了以下基础功能：
|
|
|
|
|
|
|
|
+ 个性化推荐。即上文说到的商品组楼层，通过 JSONP 方式异步获取数据，浏览器端渲染页面。结合有货大数据处理，可以为用户提供个性化的商品数据。
|
|
|
|
+ 促销。领取有货币和优惠券。上部分图中的优惠券，依然是服务端直接渲染输出。领取优惠券，需要用户操作的数据交互通过此 SDK 工具包实现。
|
|
|
|
+ 权限验证。提供用户身份校验及登录功能。
|
|
|
|
+ 分享。活动页面嵌入 APP 的情况下，提供分享到微信、QQ、微博等的功能。
|
|
|
|
|
|
|
|
任何一个活动，只要按照约定的 DOM 结构渲染页面，都可以通过引入 YOHO-JS-SDK 快速实现上述功能，无需针对功能编写代码。
|
|
|
|
|
|
|
|
## 实际使用情况及效果
|
|
|
|
|
|
|
|
- 提升了效率。配合后台开发的拖曳式排版工具，业务运营同事可以根据视觉稿自主配置活动页面。开发工作量大幅下降。即使后来页面设计上有创新，只开发新的楼层即可，无需从头开发整个页面。节省了大量人力、时间、沟通成本。上线半年，支持了近 2000 活动页面。
|
|
|
|
- 可以对所有活动页面质量整体控制。借助七牛云的图片处理能力，可以对图片质量做调整。双十一活动期间，我们可以通过一次代码发布，对所有相关活动页面的图片质量整体控制，以更好地平衡页面加载速度、页面质量和 CDN 流量。
|
|
|
|
|
|
|
|
## 总结与展望
|
|
|
|
|
|
|
|
此次针对特定业务功能进行了专项开发。有货的活动页面大部分都是内嵌 APP 使用的，H5 页面与接口、与 APP 数据交互较为复杂。逐个页面专项开发或者 APP 原生实现，费时费力。此次将页面拆分，开发活动模板，结合 H5 开发速度快的特点，很好地支持了有货线上活动专题业务。有些常用楼层多次实践沉淀之后，可考虑 APP 原生实现，以提供更好的性能。
|
|
|
|
|
...
|
...
|
|
