作者：vivo 互联网大数据团队 - Zhu Jianchen
本文是vivo互联网大数据团队《BI数据可视化平台建设》系列文章第1篇 - 交叉表组件。
交叉表在数据分析里应用广泛，通过本文，你将了解到：
交叉表的基本概念，以及BI可视化平台常见术语。
我们的表格类组件的演化过程，以及如何通过技术调研和优化实现大数据量下渲染性能，一步一步从原先的~10s降低到3~4s。
交叉表的一些特定场景，提供了一些技术实现简易描述，对这些场景有一些宏观认识。
Worker，虚拟滚动，微应用等关键技术的实现细节。
一、背景
表格和表单在前端里面是最复杂的两类需求，在BI工具平台上，这2类组件需求更多，并且需要实现一些特有的交互展示。目前在敏捷BI平台上进行报表配置，表格类组件的使用占比达到了1/3，在可视化组件库里使用范围很广。为了满足不同的数据分析场景，表格组件主要分为分组表、交叉表、明细表三种类型，其中又以交叉表功能最为丰富强大。随着敏捷BI的业务的发展，交叉表组件也经历了多次设计改版以支持高性能的数据渲染和个性化的展示配置。本文主要通过交叉表组件的升级实践给大家讲解一下如何设计开发高性能的表格组件。
术语注解
专为 vivo 生态用户量身打造的 自助式 BI 平台，提供从数据接入、数据准备、到数据分析、可视化应用、数据管理的一站式数据解决方案，同Quick BI，FineBI。
图表是数据视觉化表示的特殊方式。表示数据的方法有很多，如使用不同的符号、形状和排列，我们把这些称之为图表的类型。一些图表类型你比较熟悉，如条形图、饼图、折线图，但其他类型你可能就很少见了，如桑基图、树图、等值线图的地图。
交互式可视化允许您修改，操作和探索计算机显示的数据。绝大多数交互式可视化系统在计算机网络上，但越来越多出现在平板电脑和智能手机上。相比之下，静态可视化只显示单一的、非交互数据，它通常是为了打印和在屏幕上显示。
表示数值的规模和范围。度量通常以间隔表示(10、20、30等等)，代表度数字的单位，如价格、距离、年，或百分比。
同度量，表示具体某项值，单个值本身没有任何业务意义，一般需要对应的指标口径解释，才会具有业务价值。
二、交叉表介绍
交叉表（Cross Tabulations）是一种常用的由 行、列、汇总 字段 三个元素组成分类汇总表格。利用交叉表查询数据非常直观明了，在进行数据分析中也被广泛应用。这里牵涉到另外一个概念即分组报表，分组报表是所有报表当中最普通，最常见的报表类型，也是所有报表工具都支持的一种报表格式。从一般概念上来讲，分组报表就是只有纵向的分组，传统的分组报表制作方式是把报表划分为条带状，用户根据一个数据绑定向导指定分组，汇总字段，生成标准的分组报表。交叉表有多列查询能力、分类汇总、多角度排序、交互式分析等特性。
三、架构演变历程
为了提高交叉表的数据渲染性能和功能扩展能力，敏捷BI的表格组件经历了三次的设计升级。最开始用的jQuery拼接表格方式实现，随着组件化方案的推行，采用了组件化的方式实现升级，随着业务的发展，用多维度、多指标交叉分析场景越来越多了，尤其是通过交叉表进行分析时，大数据量出现了渲染崩溃等问题，所以我们最后通过微前端方式实现。 下面我们从开发难度，性能，功能扩展性，学习成本等方面的调研来讲解对底层表格的升级实践。
3.1 V1版表格
敏捷BI平台第一版表格，技术栈是基于jQuery+DIV的方式实现的。表格拼接属于jQuery时代的常见开发风格，这种方式，代码可维护性会非常差，很容易会出现标签不匹配的情况，不带缩进，调试起来也比较费劲。这个版本的表格组件支持的业务场景主要是数据的基本展现，无法满足用户对表格的数据分析的需求。
// 简单的拼接代码demo
function createTable() {
var data = new Array();
data.push('');
for (var i = 0; i < 2000; i++) {
data.push('');
for (var j = 0; j < 5; j++) {
data.push('' + i + ',' + j + ' ');
}
data.push(' ');
}
data.push(' ');
document.getElementById('table1').innerHTML = data.join('');
}
3.2 V2版表格
随着系统整体架构升级，前后端分离的推进，我们从原生的table组件迁移到Vue组件化上，开发了V2版表格组件。 平台的整体架构全面迁移到vue+ant-design-vue上面。
1. 功能拓展
鉴于ant-design-vue上正好有table组件，对此我们对比了antd的table组件和element的table组件。2 种表格对比来看，ant-design-vue参照ant.design的React版开发出来，配置相对element更丰富，考虑到本身复杂场景支持性，更适合深度定制，最终选择了ant.design的vue版本。
V2版的表格主要支持这几类场景配置（条件格式，合计行/列，单元格/行样式/内容定制等）：
业务场景&具体实现
（1）数据展示
整体就是根据不同情况设置不同的column的字段，另外为了达到点击交互下，能够获取业务的数据，需要在column上挂一些冗余数据，这样会让column的数据信息很庞大。
columns是一个tree结构，这里采用的是dfs遍历，depth标识层级，item， itemType就是冗余的数据信息，在处理业务的时候会用到。
（2）数据排序
（3）数据过滤
（4）单元格自定义渲染
（5）多级表头定制
这个实现难点主要在于把已有的列如何放到新增的表头里，保持树形children结构具体实现代码也比较复杂，总共80行。
（6）条件格式渲染(条形图，热力图）
根据设定的条件，定制表格内单元格内容的样式
（7）合计行/列配置
添加合计列和行，内置min，max，avg，sum表达式，支持自定义简易字段表达式运算这个功能难点在于合计列与行交叉的场景，也就是如何计算合计列的合计行。
2. 架构设计
3. 渲染优化
这个阶段的交叉表，在功能上已经能够满足绝大多数分析场景，但是一些数据量大的表格反馈渲染白屏时间过长，经常会出现浏览器崩溃，表格的性能面临新的挑战。另外表格在渲染时，CPU会占满，导致其他图表也会卡住等待，形成假死的现象。我们通过分析大数据表格渲染流程，发现有30%的时间会花销在数据适配，因此我们思考能不能把数据计算部分隔离出来，计算的时候，不阻塞渲染主进程，这样的话，浏览器渲染就可以处理其他的渲染任务。在做性能优化调研时，我们引入了service worker，worker在处理cpu密集型任务有独特的优势，所以我们把数据预处理的过程交给了Worker。之前没有使用worker时，我们前端逻辑会处理很多数据初始化和计算的操作，对于一个数据量很大的表格，会导致渲染卡顿2~3s，有些个别情况会导致浏览器崩溃的现象。
Worker原理和定义 ：
W3C 组织早在 2014 年 5 月就提出过 Service Worker 这样的一个 HTML5 API ，主要用来做持久的离线缓存。service worker是浏览器的一个高级特性，本质是一个web worker，是独立于网页运行的脚本。
web worker这个api被造出来时，就是为了解放主线程。因为，浏览器中的JavaScript都是运行在单一个线程上，随着web业务变得越来越复杂，js中耗时间、耗资源的运算过程则会导致各种程度的性能问题。
而web worker由于独立于主线程，则可以将一些复杂的逻辑交由它来去做，完成后再通过postMessage的方法告诉主线程。service worker则是web worker的升级版本，相较于后者，前者拥有了持久离线缓存的能力。
3.3 V3版表格
在开发V2表格时，我们意识到数据处理部分不应该交给前端，列拼接上掺杂了太多的业务场景处理，另外渲染性能和崩溃问题急需解决，对此我们进行了V3版本迭代，提前对表格版本进行了技术升级，为之后的新一批列汇总行汇总，分组小计等高级交叉分析需求做好技术储备。
1. 技术选型
我们对比了react，vue及canvas生态有代表性的表格组件。综合三者优劣势最终确定了基于react的table组件。
S2：https://github.com/antvis/S2
ali-react-table：https://github.com/alibaba/ali-react-table
vxe-table：https://github.com/x-extends/vxe-table/tree/v2
vxe-table设计初衷是解决单元格编辑的问题，主要用于大量增删改查的场景，性能不是它唯一的目标；S2是建立在电子表格需求上的，对筛选、排序、搜索、复制、框选、聚合分析都有诉求。
同时需要在大数据量下保持高性能，解决之前商业软件版本实现的性能问题和拓展性问题，所以它覆盖的场景更全更复杂，但是它的缺点就是定制型不强，不太适合我们自身的业务。
所以最终我们选择了ali-react-table，它本身体积小，在基础能力都满足的情况下，扩展新功能也很容易，而且在大数据量渲染下有高性能的优势。
2. 架构设计
后端接口返回数据和配置部分，基于渲染模型：左树 + 上树 => 表格，根据配置生成左树leftTree和上树topTree，构造数据源，参照了ant-design的Table组件数据源构造的流程，与自身的pipeline插件机制结合，实现了表格的交互操作（排序，筛选，分页）。
由于本项目里接入了微前端架构，采用了loadApp的方式实现了异构应用混合开发：
运作流程图如下：
3. 升级实践
（1）架构升级：
（2）底层渲染：
虚拟滚动：长列表渲染受制于浏览器本身限制，在大量DOM下，会达到浏览器本身的渲染瓶颈，在这种情况下，虚拟滚动可以解决这种渲染问题，它是一种按需渲染的理念的体现。所以虚拟列表是一种根据滚动容器元素的可视区域来渲染长列表数据中某一个部分数据的技术。
大致原理如下图：
我们发现长列表在展示时，用户只会关注可视区域，其他非可视区域部分，我们可以把已经渲染的DOM销毁，不需要立即渲染的DOM延后。所以优化策略就是只渲染可见区域的内容。
在滚动事件触发后，根据滚动 Offset 调整相应渲染的内容即可。在用户看来，还是一个完整的长列表。这种懒加载的方式，和早期页面图片资源懒加载和非必须资源异步加载属于同一种思路。
在新版版本里，ali-react-table自带了虚拟滚动的特性，在大列表下，框架会自动开启，可以明显提升表格渲染性能和滚动的性能。
四、同类产品对比
4.1 技术架构对比
1. Quick BI
① 架构设计
② 技术实现
使用原生div和flex布局，不使用原生table表格
列宽，固定列，固定表头等表格不好实现的问题，都易实现，渲染性能也较好
有2个版本的表格，旧版表格使用table，在这种情况下，性能，复杂交互，分组都存在瓶颈，这一点和我们类似，新老版本的表格同时在线上应用
虚拟滚动支持横向，纵向滚动
③ 优劣势
④ 备注
数据结构明确行维、列维、指标列数据；
数据汇总和小计是存放在后端
2. 敏捷BI
① 架构设计
② 技术实现
使用table布局
使用position:sticky实现固定列；固定表头使用独立的单表头表格模拟，这里需要强制table设置列宽，保证列对齐
支持横向，纵向虚拟滚动，在10w列下依然可以正常渲染
在ali-react-table基础上扩展了按维度合并，表头筛选等feature
③ 优劣势
④ 备注
4.2 应用场景对比
以实际测试为准
1. Quick BI
业务场景
（1）字段配置
（2）样式配置
标题与卡片：设置标题样式
备注和尾注：设置图表备注和尾注内容
组件容器：设置内边距和背景色，圆角
展示型配置：设置主题，表头样式，内容样式，冻结列，序号等配置
功能型配置：条件格式配置，针对字段满足特定条件下突出显示配置的样式
总计配置：支持列汇总和行汇总，行总计和行小计，列总计和列小计
（3）高级配置
联动：图表里的字段与其他图标关联
跳转：图表字段跳转传值
技术实现
实现使用原生，未使用第三方库
自定义主题使用主色编辑
拖拽方式交互
2. 网易有数
业务场景
技术实现
内部使用table表格实现
主题配置支持上传主题json文件
3. 敏捷BI
（1）字段配置
行维：数据集维度字段放置区
列维：数据集维度字段放置区
指标：数据集指标字段
（2）图表属性和图表样式配置
（3）字段过滤
技术实现
最开始使用smooth-dnd库，来实现从数据集字段拖拽到行列、指标区
因为smooth-dnd有性能问题，不再维护等问题，就废弃掉了，使用原生的拖拽实现
主题使用在线代码编辑主题，基于codemirror在线代码，接入css variables，实时应用，不需要刷新
4.3 部分核心代码实现
应用场景① ：表头筛选
代码实现：
应用场景②：按维度合并
代码实现：
4.4 渲染性能对比
1. Quick BI
（1）数据量级 <50列
接口耗时300ms 接口大小<5kb
渲染耗时 < 1s
注：数据量不是很大的情况下，数据加载忽略不计，合入到数据渲染时间，差别不大
（2）数据量级 ≥ 200列
接口耗时1.88s 接口大小<10kb
表格渲染 < 3s
注：数据量很大的情况下，数据加载需要单独计入时间
（3）数据量级 > 1W列
极端情况下，表格渲染崩溃
2. 敏捷BI
（1）数据量级 <50列
接口耗时250ms 接口大小~100kb
渲染耗时 < 1s
（2）数据量级 ≥ 200列
接口耗时300ms 接口大小~300kb
渲染耗时 <3s
（3）数据量级 > 1W列
4.5 总结
网易有数表格组件较为简单，只有简单的数据展示和排序筛选，适用于明细数据展示场景。
Quick BI表格和敏捷BI在交互，可视化能力，业务场景上都保持着同样的功能，底层实现 Quick BI采用原生DIV+Flex布局模拟表格实现，在渲染上比表格会有渲染的优势，这点是浏览器自身渲染机制决定，我们内部实现需要满足极端数据量下数据展示，所以特定做了横向的虚拟列表优化，这种场景看业务需求，否则表格会过于复杂，得不偿失。
表格渲染性能基本与Quick BI性能相当，极端情况下，敏捷BI依旧可以正常渲染，这点优于Quick BI。
五、规划
参考资料：
ali-react-table 站在巨人肩上，可惜不维护了
ant-design table组件源码实现
你可能感兴趣的:(BI可视化,表格组件,交叉表,架构演进)
JavaScript 树形菜单总结
Auscy
microsoft
树形菜单是前端开发中常见的交互组件，用于展示具有层级关系的数据（如文件目录、分类列表、组织架构等）。以下从核心概念、实现方式、常见功能及优化方向等方面进行总结。一、核心概念层级结构：数据以父子嵌套形式存在，如{id:1,children:[{id:2}]}。节点：树形结构的基本单元，包含自身信息及子节点（若有）。展开/折叠：子节点的显示与隐藏切换，是树形菜单的核心交互。递归渲染：因数据层级不固定，
前端项目架构设计要领
1.架构设计的核心目标在设计前端项目架构时，核心目标是模块化、可维护、可扩展、可测试，以及开发效率的最大化。这些目标可以通过以下几个方面来实现：组件化：将UI功能封装为可复用的组件。模块化：将业务逻辑分解为独立的模块或服务。自动化构建与部署：实现自动化构建、测试和部署流程，减少人为操作的错误。代码规范化与检查：确保团队协作时，代码风格和质量一致。2.项目目录结构设计一个清晰合理的目录结构对大型项目
Android 开源组件和第三方库汇总
gyyzzr
Android Android 开源框架
转载1、github排名https://github.com/trending,github搜索：https://github.com/search2、https://github.com/wasabeef/awesome-android-ui目录UIUI卫星菜单节选器下拉刷新模糊效果HUD与Toast进度条UI其它动画网络相关响应式编程地图数据库图像浏览及处理视频音频处理测试及调试动态更新热更新
Android ViewBinding 使用与封装教程
积跬步DEV
Android 开发实战大全 android
AndroidViewBinding使用与封装教程：一、ViewBinding是什么？核心功能：为每个XML布局文件自动生成一个绑定类（如ActivityMainBinding），直接暴露所有带ID的视图引用。优点：避免繁琐的findViewById()，类型安全且编译时检查。对比DataBinding：ViewBinding仅处理视图引用，无数据绑定功能。DataBinding支持双向数据绑定，
基于链家网的二手房数据采集清洗与可视化分析
Mint_Datazzh
项目 selenium 网络爬虫
个人学习内容笔记，仅供参考。项目链接：https://gitee.com/rongwu651/lianjia原文链接：基于链家网的二手房数据采集清洗与可视化分析–笔墨云烟研究内容该课题的主要目的是通过将二手房网站上的存量与已销售房源，构建一个二手房市场行情情况与房源特点的可视化平台。该平台通过HTML架构和Echarts完成可视化的搭建。因此，该课题的主要研究内容就是如何利用相关技术设计并实现这样
算法学习笔记：15.二分查找 ——从原理到实战，涵盖 LeetCode 与考研 408 例题
呆呆企鹅仔
算法学习 算法 学习 笔记 考研 二分查找
在计算机科学的查找算法中，二分查找以其高效性占据着重要地位。它利用数据的有序性，通过不断缩小查找范围，将原本需要线性时间的查找过程优化为对数时间，成为处理大规模有序数据查找问题的首选算法。二分查找的基本概念二分查找（BinarySearch），又称折半查找，是一种在有序数据集合中查找特定元素的高效算法。其核心原理是：通过不断将查找范围减半，快速定位目标元素。与线性查找逐个遍历元素不同，二分查找依赖
2025代码块种类以及作用
2501_92758067
intellij-idea phpstorm idea jupyter
https://www.bilibili.com/opus/1088624478422827030https://www.bilibili.com/opus/1088624529930977287https://t.bilibili.com/1088633635294150662https://www.bilibili.com/opus/1088633635294150662https://t.b
vue keep-alive标签的运用
keep-alive，想必大家都不会很陌生，在一些选项卡中会使用到。其实，它的作用大概就是把组件的数据给缓存起来。比如果我有一个选项卡，标签一，标签二，标签三。现在，我需要实现，当我在标签一的表单中输入内容后，点击标签二，再回到标签一，表单的内容依然存在。如果按以往的做法，不使用keep-alive，那是不能实现的。然而，我们只需要在选项卡的内容最外层包一个keep-alive标签即可。但这儿有一
php SPOF
贵哥的编程之路(热爱分享 为后来者)
PHP语言经典程序100题 php 开发语言
1.什么是单点故障（SPOF）？单点故障指的是系统中某个组件一旦失效，整个系统或服务就会不可用。常见的单点有：数据库、缓存、Web服务器、负载均衡、网络设备等。2.常见单点故障场景只有一台数据库服务器，宕机后所有业务不可用只有一台Redis缓存，挂掉后缓存全部失效只有一台Web服务器，挂掉后网站无法访问只有一个负载均衡节点，挂掉后流量无法分发只有一条网络链路，断开后所有服务失联3.消除单点故障的主
php 高并发下日志量巨大，如何高效采集、存储、分析
贵哥的编程之路(热爱分享 为后来者)
PHP语言经典程序100题 php 开发语言
1.问题背景高并发系统每秒产生大量日志（如访问日志、错误日志、业务日志等）。单机写入、存储、分析能力有限，容易成为瓶颈。需要支持实时采集、分布式存储、快速检索与分析。2.主流架构方案一、分布式日志采集架构[应用服务器(PHP等)]|v[日志采集Agent（如Filebeat、Fluentd、Logstash）]|v[消息队列/缓冲（如Kafka、Redis、RabbitMQ）]|v[日志存储（如E
docker安装node部分问题
自律的蜗牛
docker 容器 node.js
sudonlatestsudo:n:commandnotfound如果运行sudonlatest时出现：sudo:n:commandnotfound说明n版本管理工具未安装或未添加到PATH环境变量。解决方案1️⃣先检查n是否已安装运行：whichn或者：command-vn如果有输出/usr/local/bin/n，说明n已安装，但可能需要sudo访问。如果没有任何输出，说明n没有安装，跳到方法
本地包解决npm error code E404
雅痞yuppie
npm 前端 node.js
这个错误提示表明npm找不到名为create-vue-admin-cli的包。这是因为你开发的CLI工具还没有发布到npm官方注册表。要解决这个问题，有两种方法：方法一：使用本地开发模式测试1.确保你的CLI已正确链接到全局在你的vue-admin-cli项目根目录下执行：npmlink这会在全局环境中创建一个符号链接，指向你本地的CLI项目。2.使用本地链接的CLI创建项目直接使用命令：vue-
Java特性之设计模式【责任链模式】
Naijia_OvO
Java特性 java 设计模式 责任链模式
一、责任链模式概述顾名思义，责任链模式（ChainofResponsibilityPattern）为请求创建了一个接收者对象的链。这种模式给予请求的类型，对请求的发送者和接收者进行解耦。这种类型的设计模式属于行为型模式在这种模式中，通常每个接收者都包含对另一个接收者的引用。如果一个对象不能处理该请求，那么它会把相同的请求传给下一个接收者，依此类推主要解决：职责链上的处理者负责处理请求，客户只需要将
前端 NPM 包的依赖可视化分析工具推荐
前端视界
前端艺匠馆 前端 npm arcgis ai
前端NPM包的依赖可视化分析工具推荐关键词：NPM、依赖管理、可视化分析、前端工程、包管理、依赖冲突、性能优化摘要：本文将深入探讨前端开发中NPM包依赖可视化分析的重要性，介绍5款主流工具的使用方法和特点，并通过实际案例展示如何利用这些工具优化项目依赖结构、解决版本冲突问题以及提升构建性能。文章将帮助开发者更好地理解和掌控项目依赖关系，提高开发效率和项目可维护性。背景介绍目的和范围本文旨在为前端开
日历插件-FullCalendar的详细使用
老马聊技术
JavaScript 前端 javascript
一、介绍FullCalendar是一个功能强大、高度可定制的JavaScript日历组件，用于在网页中显示和管理日历事件。它支持多种视图（月、周、日等），可以轻松集成各种框架，并提供丰富的事件处理功能。二、实操案例具体代码如下：FullCalendar日期选择body{font-family:Arial,sans-serif;margin:20px;}#calendar{max-width:900
tcpdump交叉编译
weixin_45673259
tcpdump 测试工具 网络
1.下载路径官网：https://www.tcpdump.org/2.编译解压：tar-xflibpcap-1.10.4.tar.xztar-xftcpdump-4.99.4.tar.xz编译libpcap./configure--host=mips-v720s229-linux--target=mips-v720s229-linuxCC=/opt/A1/mips-gcc720-uclibc229
入门html这篇文章就够了
ξ流ぁ星ぷ132
html 前端
HTML笔记文章目录HTML笔记html介绍什么是htmlhtml的作用HTML标签介绍常用标签标签and标签and标签u标签del删除线br标签用于换行pre标签，预处理标签span标签div标签sub标签andsup标签hr标签h1,h2...h6标签：HTML5中的语义标签：特殊字符img标签a标签第一种用法：超链接第二种用法：锚点video标签表格标签：form标签input标签selec
NGS测序基础梳理01-文库构建（Library Preparation）
qq_21478261
# 生物信息 生物学
本文介绍Illumina测序平台文库构建（LibraryPreparation）步骤，文库结构。写作时间：2020.05。推荐阅读：10W字《Python可视化教程1.0》来了！一份由公众号「pythonic生物人」精心制作的PythonMatplotlib可视化系统教程，105页PDFhttps://mp.weixin.qq.com/s/QaSmucuVsS_DR-klfpE3-Q10W字《Rg
Excel控件Spire.XLS 更新至7.12.144 | 附下载
cocacola456
文档管理 更新 Excel控件 Spire.XLS更新 Spire.XLS Spire.XLS下载
Excel控件Spire.XLS更新至7.12.144，修复了转换PDF时字幕对齐的问题。Spire.XLS7.12.144更新修复修复了将Chart转换为Image时图表数据标签重复的问题。修复了CalculateAllValue方法抛出异常的问题。修复了将工作表转换为PDF时图表字幕对齐不正确的问题。
【Linux内核模块】Linux内核模块简介
byte轻骑兵
# 嵌入式Linux驱动开发实战 linux arm开发 运维
你是否好奇过，为什么Linux系统可以在不重启的情况下支持新硬件？为什么修改一个驱动程序不需要重新编译整个内核？这一切都离不开Linux的"模块化魔法"——内核模块（KernelModule）。作为Linux内核最灵活的特性之一，内核模块让开发者可以动态扩展内核功能，今天就来揭开这个神秘组件的面纱。目录一、什么是内核模块？1.1先打个比方：给内核装"插件"1.2技术定义：动态加载的内核代码段1.3
自动化运维工程师面试题解析【真题】
ZabbixAgent默认监听的端口是A.10050。以下是关键分析：选项排除：C.80是HTTP默认端口，与ZabbixAgent无关。D.5432是PostgreSQL数据库的默认端口，不涉及ZabbixAgent。B.10051是ZabbixServer的默认监听端口，用于接收Agent发送的数据，而非Agent自身的监听端口。ZabbixAgent的配置：根据官方文档，ZabbixAgen
【unity编辑器开发与拓展EditorGUILayoyt和GUILayoyt】
死也不注释
Unity编辑器开发与拓展笔记 unity 编辑器 游戏引擎
EditorGUILayout与GUILayout的核心区别及使用场景详解一、对比表特性GUILayoutEditorGUILayout命名空间UnityEngineUnityEditor使用场景运行时UI+编辑器扩展仅限编辑器扩展控件风格基础游戏风格（无编辑器优化）原生Unity编辑器风格布局复杂度基础流式布局高级自动布局（带标签对齐/间距优化）序列化支持❌不支持✅直接支持SerializedP
【DBC】DBC中CAN信号多路复用
徐饼干
DBC 程序人生 其他 经验分享
DBC文件信号多路复用详解1何时定义有些信号比较长，但是又不常用，就可以定义多路复用信号以节约空间。2具体定义2.1定义一个短信号来当做“控制开关”。【若定义1bit，则有2种可能0x00和0x01，复用两路】【若定义2bit，则有4种可能0x00和0x01和0x10和0x11，复用四路】…所以说，这个短信号的长度和你想复用多少路有关，多长？放在什么位置？由定义者决定2.2节约空间是如何体现的现在
【华为机试】HJ61 放苹果
不爱熬夜的Coder
算法 华为机试 golang 华为 golang 算法 面试
文章目录HJ61放苹果描述输入描述输出描述示例1示例2解题思路算法分析问题本质分析状态定义与转移递推关系详解动态规划表构建算法流程图示例推导过程代码实现思路时间复杂度分析关键优化点边界情况处理递归解法对比实际应用场景测试用例分析算法特点数学原理完整题解代码HJ61放苹果描述我们需要将m个相同的苹果放入n个相同的盘子中，允许有的盘子空着不放。求解有多少种不同的分法。输入描述输入两个整数m,n(0B[
树莓派 5 - Raspberry Pi OS 新版本 Bookworm（书虫）
kuan_li_lyg
树莓派 & Jetson 教程 机器人 stm32 嵌入式硬件 自动驾驶 ROS 树莓派 raspberry pi
文章目录在这里插入图片描述版本说明前言二、PipeWire三、Networking四、Firefox五、Documentation六、What’smissing? 新版本下载地址为：https://www.raspberrypi.com/software/operating-systems/版本说明 2023-10-10:基于Debianbookworm版本支持树莓派5在RaspberryPi4和
Flutter 应用本地存储与云存储的最佳选择
Flutter应用本地存储与云存储的最佳选择视频https://youtu.be/B-5W2ZpK_GMhttps://www.bilibili.com/video/BV1oQymYUE9b/前言原文Flutter本地存储与云存储本文深入探讨Flutter应用中本地存储和云存储的选择因素，帮助开发者根据需求选择最合适的存储方案。参考https://docs.flutter.devhttps://f
Flutter——数据库Drift开发详细教程(七)
怀君
flutter flutter 数据库
目录入门设置漂移文件入门变量数组定义表支持的列类型漂移特有的功能导入嵌套结果LIST子查询Dart互操作SQL中的Dart组件类型转换器现有的行类Dart文档注释结果类名称支持的语句自定义SQL类型定义类型使用自定义类型在Dart中在SQL中方言意识支持的SQLite扩展json1fts5地缘垄断自定义查询带有生成的api的语句自定义选择语句自定义更新语句入门Drift提供了一个dart_api来
JVM字节码加载与存储中的细节
问题引出：为什么Java定义int型变量为32767时使用的是bipush32767，而定义int型变量为32768时使用的是ldc#4？在Java中，如果这样定义int型变量：publicclassTest{publicstaticvoidmain(String[]args){inti=0;intj=5;intk=6;intm=32768;intn=32767;}}变量对应的字节码文件内容是这样
Vue3组件库实战: 打造高复用UI系统
武昌库里写JAVA
面试题汇总与解析 课程设计 spring boot vue.js layui 毕业设计
Vue3组件库实战:打造高复用UI系统介绍什么是Vue3组件库在前端开发中，UI组件库是非常重要的一部分。Vue3组件库是基于Vue.js3.x版本开发的一套可用于构建Web应用的UI组件集合，可以帮助开发者快速搭建页面并保证页面的一致性和美观性。目标关键词：Vue3组件库设计与构建设计原则组件库的设计需要遵循一定的原则，比如易用性、可维护性、扩展性等。在设计阶段需要考虑到不同场景的使用，并且保证
flutter redux状态管理
liao277218962
Flutter flutter state redux
Flutter状态管理系列文章目录Flutter状态管理(setState、InheritedWidget、Provider、Riverpod、BLoC/Cubit、GetX、MobX、Redux)setState()使用详解：原理及注意事项InheritedWidget组件使用及原理Flutter中Provider的使用、注意事项与原理解析（含代码实战）GetX用法详细解析以及注意事项Flutt
集合框架
天子之骄
java 数据结构 集合框架
集合框架
集合框架可以理解为一个容器，该容器主要指映射(map)、集合(set)、数组(array)和列表(list)等抽象数据结构。
从本质上来说，Java集合框架的主要组成是用来操作对象的接口。不同接口描述不同的数据类型。
简单介绍：
Collection接口是最基本的接口，它定义了List和Set，List又定义了LinkLi
Table Driven（表驱动）方法实例
bijian1013
java enum Table Driven 表驱动
实例一：
/**
* 驾驶人年龄段
* 保险行业，会对驾驶人的年龄做年龄段的区分判断
* 驾驶人年龄段：01-[18,25);02-[25,30);03-[30-35);04-[35,40);05-[40,45);06-[45,50);07-[50-55);08-[55,+∞)
*/
public class AgePeriodTest {
//if...el
Jquery 总结
cuishikuan
java jquery Ajax Web jquery方法
1.$.trim方法用于移除字符串头部和尾部多余的空格。如：$.trim(' Hello ') // Hello2.$.contains方法返回一个布尔值，表示某个DOM元素（第二个参数）是否为另一个DOM元素（第一个参数）的下级元素。如：$.contains(document.documentElement, document.body); 3.$
面向对象概念的提出
麦田的设计者
java 面向对象 面向过程
面向对象中，一切都是由对象展开的，组织代码，封装数据。
在台湾面向对象被翻译为了面向物件编程，这充分说明了，这种编程强调实体。
下面就结合编程语言的发展史，聊一聊面向过程和面向对象。
c语言由贝尔实
linux网口绑定
被触发
linux
刚在一台IBM Xserver服务器上装了RedHat Linux Enterprise AS 4，为了提高网络的可靠性配置双网卡绑定。
一、环境描述
我的RedHat Linux Enterprise AS 4安装双口的Intel千兆网卡，通过ifconfig -a命令看到eth0和eth1两张网卡。
二、双网卡绑定步骤：
2.1 修改/etc/sysconfig/network
XML基础语法
肆无忌惮_
xml
一、什么是XML？
XML全称是Extensible Markup Language，可扩展标记语言。很类似HTML。XML的目的是传输数据而非显示数据。XML的标签没有被预定义，你需要自行定义标签。XML被设计为具有自我描述性。是W3C的推荐标准。
二、为什么学习XML？
用来解决程序间数据传输的格式问题
做配置文件
充当小型数据库
三、XML与HTM
为网页添加自己喜欢的字体
知了ing
字体 秒表 css
@font-face {
font-family: miaobiao;//定义字体名字
font-style: normal;
font-weight: 400;
src: url('font/DS-DIGI-e.eot');//字体文件
}
使用：
<label style="font-size:18px;font-famil
redis范围查询应用-查找IP所在城市
矮蛋蛋
redis
原文地址：
http://www.tuicool.com/articles/BrURbqV
需求
根据IP找到对应的城市
原来的解决方案
oracle表（ip_country）：
查询IP对应的城市：
1.把a.b.c.d这样格式的IP转为一个数字，例如为把210.21.224.34转为3524648994
2. select city from ip_
输入两个整数， 计算百分比
alleni123
java
public static String getPercent(int x, int total){
double result=(x*1.0)/(total*1.0);
System.out.println(result);
DecimalFormat df1=new DecimalFormat("0.0000%");
百合——————>怎么学习计算机语言
百合不是茶
java 移动开发
对于一个从没有接触过计算机语言的人来说，一上来就学面向对象，就算是心里上面接受的了，灵魂我觉得也应该是跟不上的，学不好是很正常的现象，计算机语言老师讲的再多，你在课堂上面跟着老师听的再多，我觉得你应该还是学不会的，最主要的原因是你根本没有想过该怎么来学习计算机编程语言，记得大一的时候金山网络公司在湖大招聘我们学校一个才来大学几天的被金山网络录取，一个刚到大学的就能够去和
linux下tomcat开机自启动
bijian1013
tomcat
方法一：
修改Tomcat/bin/startup.sh 为:
export JAVA_HOME=/home/java1.6.0_27
export CLASSPATH=$CLASSPATH:$JAVA_HOME/lib/tools.jar:$JAVA_HOME/lib/dt.jar:.
export PATH=$JAVA_HOME/bin:$PATH
export CATALINA_H
spring aop实例
bijian1013
java spring AOP
1.AdviceMethods.java
package com.bijian.study.spring.aop.schema;
public class AdviceMethods {
public void preGreeting() {
System.out.println("--how are you!--");
}
}
2.beans.x
[Gson八]GsonBuilder序列化和反序列化选项enableComplexMapKeySerialization
bit1129
serialization
enableComplexMapKeySerialization配置项的含义
Gson在序列化Map时，默认情况下，是调用Key的toString方法得到它的JSON字符串的Key，对于简单类型和字符串类型，这没有问题，但是对于复杂数据对象，如果对象没有覆写toString方法，那么默认的toString方法将得到这个对象的Hash地址。
GsonBuilder用于
【Spark九十一】Spark Streaming整合Kafka一些值得关注的问题
bit1129
Stream
包括Spark Streaming在内的实时计算数据可靠性指的是三种级别：
1. At most once，数据最多只能接受一次，有可能接收不到
2. At least once, 数据至少接受一次，有可能重复接收
3. Exactly once 数据保证被处理并且只被处理一次，
具体的多读几遍http://spark.apache.org/docs/lates
shell脚本批量检测端口是否被占用脚本
ronin47
#!/bin/bash
cat ports |while read line
do#nc -z -w 10 $line
nc -z -w 2 $line 58422>/dev/null2>&1if[ $?-eq 0]then
echo $line:ok
else
echo $line:fail
fi
done
这里的ports 既可以是文件
java-2.设计包含min函数的栈
bylijinnan
java
具体思路参见：http://zhedahht.blog.163.com/blog/static/25411174200712895228171/
import java.util.ArrayList;
import java.util.List;
public class MinStack {
//maybe we can use origin array rathe
Netty源码学习-ChannelHandler
bylijinnan
java netty
一般来说，“有状态”的ChannelHandler不应该是“共享”的，“无状态”的ChannelHandler则可“共享”
例如ObjectEncoder是“共享”的, 但 ObjectDecoder 不是
因为每一次调用decode方法时，可能数据未接收完全（incomplete），
它与上一次decode时接收到的数据“累计”起来才有可能是完整的数据，是“有状态”的
p
java生成随机数
cngolon
java
方法一：
/**
* 生成随机数
* @author
[email protected]
* @return
*/
public synchronized static String getChargeSequenceNum(String pre){
StringBuffer sequenceNum = new StringBuffer();
Date dateTime = new D
POI读写海量数据
ctrain
海量数据
import java.io.FileOutputStream;
import java.io.OutputStream;
import org.apache.poi.xssf.streaming.SXSSFRow;
import org.apache.poi.xssf.streaming.SXSSFSheet;
import org.apache.poi.xssf.streaming
mysql 日期格式化date_format详细使用
daizj
mysql date_format 日期格式转换 日期格式化
日期转换函数的详细使用说明
DATE_FORMAT(date,format) Formats the date value according to the format string. The following specifiers may be used in the format string. The&n
一个程序员分享8年的开发经验
dcj3sjt126com
程序员
在中国有很多人都认为IT行为是吃青春饭的，如果过了30岁就很难有机会再发展下去!其实现实并不是这样子的，在下从事.NET及JAVA方面的开发的也有8年的时间了，在这里在下想凭借自己的亲身经历，与大家一起探讨一下。
明确入行的目的
很多人干IT这一行都冲着“收入高”这一点的，因为只要学会一点HTML, DIV+CSS，要做一个页面开发人员并不是一件难事，而且做一个页面开发人员更容
android欢迎界面淡入淡出效果
dcj3sjt126com
android
很多Android应用一开始都会有一个欢迎界面，淡入淡出效果也是用得非常多的，下面来实现一下。
主要代码如下：
package com.myaibang.activity;
import android.app.Activity;import android.content.Intent;import android.os.Bundle;import android.os.CountDown
linux 复习笔记之常见压缩命令
eksliang
tar解压 linux系统常见压缩命令 linux压缩命令 tar压缩
转载请出自出处:http://eksliang.iteye.com/blog/2109693
linux中常见压缩文件的拓展名
*.gz gzip程序压缩的文件
*.bz2 bzip程序压缩的文件
*.tar tar程序打包的数据，没有经过压缩
*.tar.gz tar程序打包后，并经过gzip程序压缩
*.tar.bz2 tar程序打包后，并经过bzip程序压缩
*.zi
Android 应用程序发送shell命令
gqdy365
android
项目中需要直接在APP中通过发送shell指令来控制lcd灯，其实按理说应该是方案公司在调好lcd灯驱动之后直接通过service送接口上来给APP，APP调用就可以控制了，这是正规流程，但我们项目的方案商用的mtk方案，方案公司又没人会改，只调好了驱动，让应用程序自己实现灯的控制，这不蛋疼嘛！！！！
发就发吧！
一、关于shell指令：
我们知道，shell指令是Linux里面带的
java 无损读取文本文件
hw1287789687
读取文件 无损读取 读取文本文件 charset
java 如何无损读取文本文件呢？
以下是有损的
@Deprecated
public static String getFullContent(File file, String charset) {
BufferedReader reader = null;
if (!file.exists()) {
System.out.println("getFull
Firebase 相关文章索引
justjavac
firebase
Awesome Firebase
最近谷歌收购Firebase的新闻又将Firebase拉入了人们的视野，于是我做了这个 github 项目。
Firebase 是一个数据同步的云服务，不同于 Dropbox 的「文件」，Firebase 同步的是「数据」，服务对象是网站开发者，帮助他们开发具有「实时」（Real-Time）特性的应用。
开发者只需引用一个 API 库文件就可以使用标准 RE
C++学习重点
lx.asymmetric
C++ 笔记
1.c++面向对象的三个特性：封装性，继承性以及多态性。
2.标识符的命名规则：由字母和下划线开头，同时由字母、数字或下划线组成；不能与系统关键字重名。
3.c++语言常量包括整型常量、浮点型常量、布尔常量、字符型常量和字符串性常量。
4.运算符按其功能开以分为六类：算术运算符、位运算符、关系运算符、逻辑运算符、赋值运算符和条件运算符。
&n
java bean和xml相互转换
q821424508
java bean xml xml和bean转换 java bean和xml转换
这几天在做微信公众号
做的过程中想找个java bean转xml的工具，找了几个用着不知道是配置不好还是怎么回事，都会有一些问题，
然后脑子一热谢了一个javabean和xml的转换的工具里，自己用着还行，虽然有一些约束吧 ，
还是贴出来记录一下
顺便你提一下下，这个转换工具支持属性为集合、数组和非基本属性的对象。
packag
C 语言初级 位运算
1140566087
位运算 c
第十章 位运算 1、位运算对象只能是整形或字符型数据，在VC6.0中int型数据占4个字节 2、位运算符： 运算符 作用 ~ 按位求反 << 左移 >> 右移 & 按位与 ^ 按位异或 | 按位或 他们的优先级从高到低； 3、位运算符的运算功能： a、按位取反： ~01001101 = 101
14点睛Spring4.1-脚本编程
wiselyman
spring4
14.1 Scripting脚本编程
脚本语言和java这类静态的语言的主要区别是:脚本语言无需编译,源码直接可运行;
如果我们经常需要修改的某些代码,每一次我们至少要进行编译,打包,重新部署的操作,步骤相当麻烦;
如果我们的应用不允许重启,这在现实的情况中也是很常见的;
在spring中使用脚本编程给上述的应用场景提供了解决方案,即动态加载bean;
spring支持脚本
