了解淘宝最基础知识,淘宝退货必须要写淘宝账号吗( 五 )


使用搭建平台搭建的页面 , 前端只需要考虑组成页面的原子模块的开发,整体的渲染由搭建平台提供的统一脚本全权负责 。而在淘宝首页上,考虑到页面模块数量巨多,加上还有少量跨部门、跨团队的沟通,渲染模型略微不同 。
二、淘宝首页的整体变迁
背景中提到,淘宝首页依托于内部搭建平台,它的变迁自然也是跟着搭建系统的变化而变化的 。
1、PHP 下的淘宝首页
接手淘宝首页不久 , 便遇到了一年一度的改版,那时它还运行在 PHP 环境中 。这里需要说明的是,淘宝首页的所有代码完全由前端掌控 , 前端不会直接跟数据库打交道,其数据来源分为两部分 。
数据来源
一是运营填写的数据 。采用前端挖坑的形式,预留坑位让运营获取填写数据,
运营填写这些坑位就会产生这份 PHP 模板对应的数据,最后渲染出来就是一个完整的 HTML 片段(实时性渲染) 。
旧版搭建系统中就是通过这种方式构造一个子模块 。我描述得十分简单 , 但作为一个平台它需要考虑的东西还有很多,比如数据顺序的控制、定时发布、回滚机制、过滤机制、筛选机制、数据的同步、数据的更新、版本控制、权限控制、其他系统的引用等等 。
二是后端或者个性化平台提供的数据 。不同的业务有不同的诉求 。一些业务有自己的后端,他们要求使用自己业务产出的数据;有的业务希望用户看到的内容不一样 , 千人千面,期望接入算法;一些业务跟卖家直接打交道,期望使用招商数据;而有些业务期望采用运营从数据池筛选出来的数据……总之,淘宝首页需要对接形形色色的系统,接口繁多 。后面会提到对动态数据源的整合 。
并且这些系统对应的域名是不一样的,JSONP 格式自然也就成了首选 。但一些特殊的系统 , 比如广告,它的渲染并不是一个简单的 JSONP 请求,可能它还要干预整个广告的渲染流程,比如加载他们的 JS , 把渲染的控制权交过去 。
页面的架构
上面介绍了数据的来源和子模块的结构,那么整个页面又是如何构成的呢?模块的搭建分为两种,一种是可视化搭建,运营或者前端可以将开发好的模块(或者模块库中选取的模块)拖拽到容器内 , 形成一个页面:
当然,上图也只是一个模型,作为一个系统需要考虑的问题还有很多很多,如页面的布局、多终端适配、模块的临时隐藏、位置调整、皮肤选择、模块的复制等等 。
通过模块 id 将模块引入 , 并且添加一些类似 lazyload 的标记 , 方便控制渲染节奏和数据入口 。源码搭建和模块搭建的区别在于,前者更易于控制模块的结构以及模块的渲染顺序 。
动态数据源
首页面对一大堆接口和平台,对接几十个业务方,接口是个很大的问题,由于后台系统的差异 , 基本没有办法统一数据源的格式,一旦运营哪天心血来潮要换一个他自己觉得用的更爽的或者数据更好的系统,前后端估计又得沟通和对接几次 。
平台具备数据源接入的能力,也就是说我们挖的坑不仅仅可以让运营填数据,还可以从各种数据源中直接导入数据,当然,这里需要进行一次数据字段的映射转换 。
绑定之后 , 数据既可以同步输出,也可以异步输出,这些都是平台提供的能力 。这个方案基本上解决了后端系统/接口变化的问题,并且减少了前后端之间的沟通成本 。
不过这里需要注意的是,虽然页面上的接口都通过平台统一梳理了一次,这也意味着,页面所有的请求会先流经平台,然后分发到各个后端,平台的抗压能力要求很高 。