当前位置: 首页 > news >正文

通用详情页的打造

背景介绍

图片

大家都知道,详情页承载了站内的核心流量。它的量级到底有多大呢?

我们来看一下,日均播放次数数亿次,这么大的流量,其重要程度可想而知。

在这样一个页面,每一个功能都是大量业务的汇总点。

作为用户核心消费场景,详情页不仅需要承接各种业务的转化,还要负责展示各业务在播放页的功能。

可以说,播放页的代码复杂度属于客户端最高的代码之一,这不仅因为播放页本身的功能复杂,还因为它需要融合大量外部业务功能。

复杂的功能自然会带来较高的代码复杂度,而高代码复杂度往往意味着高代码维护成本。

明确需求

图片

我们来看一下没有做这个项目之前的状态。如图所示,他们分别为三个业务团队各自维护。页面间相互独立。能力无法复用。

图片

通过这个项目,我们要将他们融合成了一个页面。产品的诉求就是将他们融合为一个,来达到多业务形态统一的目标。

图片

但是,这三个详情页并不像产品想象的那么简单。

每个业务都有自己的特殊形态,如大型活动态、主客态、播单态、PUGV/OGV态等一系列业务形态。

每种形态都有自己的特殊逻辑,而且这些业务形态间还可以互相切换。

需求分析

为了更好地达成目标,我们需要进行如下思考:

  • 从业务角度:

要解决多业务形态不统一的问题。例如,产品既想要UGC大型活动的能力,又想要OGV的多视角功能。

但这两个能力在之前分别是两个业务团队各自开发的,无法复用,产品在业务选择上无法兼得。

  • 从效率角度:

要解决迭代方式不统一的问题。例如,进度条体验优化需求,产品在给UGC团队提需求的同时,还要复制一份给OGV团队。

两个业务方的开发和测试都需要进入这个项目,并且双方的开发进度和排期可能不一致。如果产品强烈要求同一版本上线,还需要协调各方资源。

  • 从质量角度:

要解决如何保障稳定性的问题。例如,多团队协作,之前都是组内同事协作开发,现在融入了两个新的业务团队,我们该如何保障稳定性。

  • 从团队角度:

要解决如何让新人快速上手的问题。正常情况下,新人想要进入开发必须对这个系统足够了解后才行。

更何况现在变成了三个业务融合的页面。有没有一种手段,让新人无需关心复杂的业务形态和业务逻辑,只需要关注自己的需求?

具体方案

针对以上问题,我们可以总结出通用详情页框架必须满足以上三点,分别为:复用性,灵活性,稳定性

图片

接下来我们继续对多业务形态进行分析。

首先我们从横向上进行拆解,通过对比,我们可以发现

多业务形态间其实有很多的相同模块。如互动,弹幕发送框,相关推荐等。

从纵向上进行拆解,我们也可以发现很多相同模块,如弹窗管理器,主题组件,转场组件等。

那么从横向和纵向上我们发现,多种业务形态间其实有很多可以复用的能力。

图片

基于前面的思考,我们设计了一套通用详情页的框架。将其分为三层:

  1. 业务层:将业务模块分为两类,能够在多业务间复用的模块抽象到通用业务,业务独有模块则由各业务自行负责。

  2. 组件层:抽象出各种通用组件,业务方可自由选取和组装。

  3. 框架层:抽象生命周期管理、数据管理等核心逻辑,以此来保证整个详情页的稳定性。

这样我们就初步解决了复用性的问题,但是随之而来的就是灵活性问题。

图片

我们以实际场景为例,相关推荐模块在课堂态不展示,但是在ugc和ogv下需要展示,另外他的点击事件在ugc和ogv下还会出现差异。

同时相关推荐模块还强依赖简介模块。因为简介模块也是一个通用组件,业务方可以自由替换。

如果哪天业务方替换了了简介模块,那相关推荐模块将无法正常运行。

从相关推荐这个例子我们可以得出如果想让业务模块复用,必须满足两个条件。

  1. 支持业务异化,即允许业务能插入自定义逻辑,否则现在抽象的通用模块在迭代的过程一定会变成非通用,或者里面掺杂各种if else逻辑来支持异化。

  2. 必须保证模块间相互独立,因为所有业务逻辑在此框架下都变成了模块,模块是可以由业务方自由选择的。

图片

引入依赖注入

因此,我们需要在流程和模块中加入依赖注入的能力,用于业务方实现差异化逻辑。

业务方可自行插入自己的业务逻辑,并选择或替换业务模块。来解决模块间的耦合。

定义依赖注入容器

public class BlocStore {typealias StoreLock = RecursiveLocktypealias StoreTable = [String: BlocTable]private let lock: StoreLock = StoreLock()private lazy var storeTable: StoreTable = [:]
}extension BlocStore {public func register<Service>(service: Service.Type = Service.self, to: Bloc.Type) {let key = "\(service)"lock.lock()defer { lock.unlock() }serviceTable[key] = to}@discardableResultpublic func optional<Service>(service: Service.Type = Service.self) -> Service? {let key = "\(service)"lock.lock()defer { lock.unlock() }let service = resolve(bloc)return s}
}// Bind and unbind
extension BlocStore {public func bindBloc(bloc: Bloc) {}public func unbindBloc<T: Bloc>(_ blocType: T.Type) {}
}// BlocLifeCycle
extension BlocStore {func onStart(bloc: Bloc?) {bloc?.onStart()}func onPause(bloc: Bloc?) {bloc?.onPause()}func onResume(bloc: Bloc?) {bloc?.onResume()}func onStop(bloc: Bloc?) {bloc?.onStop()}
}

组件注册

// 业务方根据业务逻辑可以注入不同的实现
register(service: XXXProtocol.self, to: ABloc.self) // A业务形态
register(service: XXXProtocol.self, to: BBloc.self) // B业务形态

组件解析

let s: XXXProtocol = store.optional()

引入scope

scope分为页面级和业务级两种scope:

class VDScope {public static let core = "store.core.scope"public static let biz = "store.biz.scope"
}

定义 Scope 管理来管理模块的生命周期:

  • Page scope的生命周期与页面保持一致,Biz scope与业务形态的生命周期保持一致。

  • 即在页面形态发生变化时,框架层会自动将bizscope下的所有模块进行销毁。

public class BlocStore {typealias ScopeTable = [String: String]...func bizTypeDidChanged() {// 销毁上一个bizscope下所有模块xxxx// 初始化新bizscope下模块xxx}
}

这样,新人进入开发时无需关注当前业务形态或业务形态切换的问题,达到快速上手的目的。

如何保障吞吐速度和质量稳定?

在开发资源和测试资源不变的情况下,业务范围扩大了,我们该如何保障吞吐速度和质量的稳定呢?

图片

我们可以将策略分为三个阶段:

1.开发阶段:

对于核心流程添加全链路日志,如果发现不符合预期的数据则直接抛出异常。

同时进行技术埋点上报。如果是对于核心流程的修改,强制添加AB降级方案。

2.测试阶段:

有些bug非常隐蔽,在用户体验上可能没有任何差异,但内部流程或数据可能已经发生异常。

对于类似问题,测试根本无法发现。导致此类问题流入线上的风险。我们可以通过添加监控和告警,让我们及时发现问题。

3.灰度/线上阶段:

我们可以通过添加监控和告警,让我们及时发现问题。

具体实施方案:

首先,我们对通用详情页里核心流程添加了全链路日志,并为日志服务添加了两项额外能力:

如果发现日志类型为Error,内部自动触发DEBUG弹窗提醒,并上报技术埋点,达到对线上稳定性的监控。

图片

同时,搭建离在线数据报表和异常告警,进一步保障稳定性。

至此,搭建了通用详情页从发现问题到定向拉取再到快速定位的闭环。

-End-

作者丨凉茶

相关文章:

通用详情页的打造

背景介绍 大家都知道&#xff0c;详情页承载了站内的核心流量。它的量级到底有多大呢&#xff1f; 我们来看一下&#xff0c;日均播放次数数亿次&#xff0c;这么大的流量&#xff0c;其重要程度可想而知。 在这样一个页面&#xff0c;每一个功能都是大量业务的汇总点。 作为…...

java内部类的本质

定义在类内部&#xff0c;可以实现对外部完全隐藏&#xff0c;可以有更好的封装性&#xff0c;代码实现上也往往更为简洁。 内部类可以方便地访问外部类的私有变量&#xff0c;可以声明为private从而实现对外完全隐藏。 在Java中&#xff0c;根据定义的位置和方式不同&#xf…...

vue3 学习笔记08 -- computed 和 watch

vue3 学习笔记08 – computed 和 watch computed computed 是 Vue 3 中用于创建计算属性的重要 API&#xff0c;它能够根据其它响应式数据动态计算出一个新的值&#xff0c;并确保在依赖数据变化时自动更新。 基本用法 squaredCount 是一个计算属性&#xff0c;它依赖于 count…...

Python-PLAXIS自动化建模技术与典型岩土工程案例

有限单元法在岩土工程问题中应用非常广泛&#xff0c;很多软件都采用有限单元解法。在使用各大软件进行数值模拟建模的过程中&#xff0c;岩土工程中的各种问题&#xff08;塑性、渗流、固结、动力、稳定安全、热力TM&#xff09;&#xff0c;一步一步地搭建自己的Plaxis模型&a…...

license系统模型设计使用django models

User (用户)License (许可证)Product (产品)LicenseAssignment (许可证分配) 简单的模型定义&#xff1a; from django.db import models from django.contrib.auth.models import Userclass Product(models.Model):name models.CharField(max_length255)description model…...

【通信协议-RTCM】MSM语句(1) - 多信号GNSS观测数据消息格式

注释&#xff1a; RTCM响应消息1020为GLONASS星历信息&#xff0c;暂不介绍&#xff0c;前公司暂未研发RTCM消息类型版本的DR/RTK模块&#xff0c;DR/RTK模块仅NMEA消息类型使用 注释&#xff1a; 公司使用的多信号语句类型为MSM4&MSM7&#xff0c;也应该是运用最广泛的语句…...

vue3-vite-pinia模板

模板说明 下载 git clone https://github.com/AIxiaoHanBao/vue-template.gitmodule参数 node版本 16 UI组件库 element-plus 持久化 pinia 网络请求 axios 路由 vue-router 使用说明 权限管理目录access资源目录assets组件目录components页面目录pages网络请求目录re…...

华为HCIP Datacom H12-821 卷38

1.多选题 下面关于 BGP中的公认属性的描述&#xff0c;正确的是 A、公认必遵属性是所有BGP路由器都识别&#xff0c;且必须存在于Updata消息中心 B、BGP必须识别所有公认属性 C、公认属性分为公认必遵和可选过渡两种 D、公认任意属性是所有BGP造由器都可以识别&#xff0c…...

C语言求10进制转2进制(除2取余法)

1.思路&#xff1a;除2取余法&#xff0c;也就是说用除以2取余来将10进制数转换为二进制 2.两种代码实现&#xff0c;这里用了两&#xff0c;一个递归一个非递归。 递归是一种编程技术&#xff0c;其中一个函数直接或间接地调用自己。递归通常用于解决那些可以被分解为更小的、…...

PHP 调用淘宝详情 API 接口的方法与实践

以下是关于“PHP 调用淘宝详情 API 接口的方法与实践”的一篇文章示例&#xff1a; PHP 调用淘宝详情 API 接口的方法与实践 在当今的电商时代&#xff0c;获取淘宝商品的详情信息对于许多开发者来说是一项重要的任务。使用 PHP 语言来调用淘宝详情 API 接口&#xff0c;可以…...

风景区服务热线系统:智能化时代的旅游新选择

一、引言 1 、风景区服务热线系统的概念 风景区服务热线系统是指为游客提供实时旅游信息咨询、投诉处理、紧急救援等一系列服务的电话和网络平台。它不仅是景区与游客之间的重要沟通桥梁&#xff0c;也是提升游客满意度、优化景区管理的重要手段。 2 、智能化时代对旅游服务…...

Linux修改配置文件后无法使用命令或无法进入桌面

如果你是修改了配置文件&#xff0c;如 sudo vim /etc/profile重启无数次发现无法进入桌面&#xff0c;不要着急重装系统&#xff01;&#xff01;&#xff0c;怎么造成的怎么改就行了 以下方案需要root密码&#xff0c;忘记密码详见&#xff1a;Linux忘记root密码怎么办 一…...

安卓14中Zygote初始化流程及源码分析

文章目录 日志抓取结合日志与源码分析systemServer zygote创建时序图一般应用 zygote 创建时序图向 zygote socket 发送数据时序图 本文首发地址 https://h89.cn/archives/298.html 最新更新地址 https://gitee.com/chenjim/chenjimblog 本文主要结合日志和代码看安卓 14 中 Zy…...

等保一体机 | 什么是等保一体机?一台机器就能过等保吗?

什么是等保一体机&#xff1f; 对于中小型企业来说&#xff0c;他们在接触到等保的条件下&#xff0c;可能会觉得成本太高了&#xff0c;毕竟整改的时候&#xff0c;几台安全设备下来报价就几十w。 也许有些人会听说过等保一体机 那么什么是等保一体机呢&#xff1f; 等保一…...

【活动预告】Apache IoTDB TsFile 智慧能源应用“上会”啦!

2024 年&#xff0c;站在中国数字经济产业升级和数据要素市场化建设的时代交汇点上&#xff0c;为进一步推动全球数据库产业进步&#xff0c;由中国通信标准化协会、大数据技术标准推进委员会主办的“2024 可信数据库发展大会”将于 2024 年 7 月 16-17 日&#xff0c;在北京朝…...

【公益案例展】中国电信安全大模型——锻造安全行业能量转化的高性能引擎...

‍ 电信安全公益案例 本项目案例由电信安全投递并参与数据猿与上海大数据联盟联合推出的 #榜样的力量# 《2024中国数智产业最具社会责任感企业》榜单/奖项评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 以GPT系列为代表的大模型技术&#xff0c;展现了人工智能技术与应…...

CV07_深度学习模块之间的缝合教学(2)--维度转换

教学&#xff08;1&#xff09;&#xff1a;链接 1.1 预备知识 问题&#xff1a;假如说我们使用的模型张量是三维的&#xff0c;但是我们要缝合的模块是四维的&#xff0c;应该怎么办&#xff1f; 方法&#xff1a;pytorch中常用的函数&#xff1a;(1)view函数&#xff08;2…...

Oracle字符集修改

提示 Oracle数据库默认的字符集编码为US7ASCII&#xff0c;这个编码是不支持中文的&#xff0c;如果想要在数据库存储中文&#xff0c;就需要修改编码为ZHS16GBK或UTF-8 编码和字符集是一个意思&#xff0c;只是叫法不一样而已 前置条件 修改字符集的前提是知道我们现在用的是什…...

k8s核心操作_k8s中的存储抽象_基本概念与NFS搭建_Deployment使用NFS进行挂载---分布式云原生部署架构搭建028

然后我们继续开始看 如果我们使用容器部署,比如我们有三个节点,一个是master,一个node1 一个是node2 那么pod 中我们可以看到,容器中的 /data 等各个目录都映射了出来了,但是 如果比如上面红色的部分,有个pod,原来在node2上,最右边那个,但是这个pod宕机了 那么,k8s会在node…...

数学建模·熵权法

熵权法 一种计算评价指标之间权重的方法。熵权法是一种客观的方法&#xff0c;没有主观性&#xff0c;比较可靠。 具体定义 熵权法的核心在于计算信息熵&#xff0c;信息熵反映了一个信息的紊乱程度&#xff0c;体现了信息的可靠性 具体步骤 Step1正向化处理 将所以评价指标转…...

Linux应用开发之网络套接字编程(实例篇)

服务端与客户端单连接 服务端代码 #include <sys/socket.h> #include <sys/types.h> #include <netinet/in.h> #include <stdio.h> #include <stdlib.h> #include <string.h> #include <arpa/inet.h> #include <pthread.h> …...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

unix/linux,sudo,其发展历程详细时间线、由来、历史背景

sudo 的诞生和演化,本身就是一部 Unix/Linux 系统管理哲学变迁的微缩史。来,让我们拨开时间的迷雾,一同探寻 sudo 那波澜壮阔(也颇为实用主义)的发展历程。 历史背景:su的时代与困境 ( 20 世纪 70 年代 - 80 年代初) 在 sudo 出现之前,Unix 系统管理员和需要特权操作的…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

Android15默认授权浮窗权限

我们经常有那种需求&#xff0c;客户需要定制的apk集成在ROM中&#xff0c;并且默认授予其【显示在其他应用的上层】权限&#xff0c;也就是我们常说的浮窗权限&#xff0c;那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...

根据万维钢·精英日课6的内容,使用AI(2025)可以参考以下方法:

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用

文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么&#xff1f;1.1.2 感知机的工作原理 1.2 感知机的简单应用&#xff1a;基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...