企业官网建设流程全解析

最近手头有个 Vue 项目，需要在页面上嵌入高德地图，并且要支持标准图层、实时路况、卫星图、卫星加路网、楼块图层的自由切换。做完之后梳理了一下，发现这套“初始化 + 图层管理”的思路在好几个项目里都能复用，所以整理成一篇完整的实操记录。内容涵盖高德 JS API 2.0 的接入方式、五种常见图层的初始化参数、图层互斥与叠加的实现思路，以及我实际开发中踩过的坑和排查方法。准备在 Vue 里接高德地图、又不太清楚图层怎么管理的同学，这篇可以直接照着抄。

1. 项目拆解与方案选型：为什么用高德官方 JS API

1.1 需求本质：一张地图三层体系

先把这个需求的本质拆一下。地图初始化是所有后续功能的地基，而图层切换这件事，表面上是几个按钮换来换去，实际上背后是“底图”和“叠加层”两类完全不同的图层管理逻辑。

本项目的核心需求有五类图层：

• 标准图层：默认的矢量底图，展示道路、行政边界、POI 文字标注
• 实时路况图层：在底图之上叠加红黄绿三色的道路拥堵状态
• 卫星图：纯卫星影像底图，没有道路标注
• 卫星加路网：卫星影像底图，叠加道路线和地名标注
• 楼块图层：建筑轮廓和 3D 楼块效果

这五类图层可以分成两组：标准图层和卫星图属于互斥底图，同一时间只能显示一个；路况、路网、楼块属于叠加层，可以在底图之上同时存在。做切换功能时如果不分清这两类，很容易写出“切到卫星图之后路网还残留在地图上”之类的 bug。

1.2 接入方式选型：script 标签还是 npm loader

高德地图在 Vue 项目里接入，行业内主要有两种方案。

第一种是直接在 index.html 里用 script 标签引入高德 JS API，然后在组件里用 window.AMap 调用。这种方式简单粗暴，但有几个问题：全局污染（window 上挂了一个大对象）、没有模块化管理、打包工具无法感知依赖、每个页面都要先确保 script 加载完成才能初始化。现在不推荐这种方式。

第二种是通过官方提供的 @amap/amap-jsapi-loader 在运行时动态加载。这个 loader 本质上是一个 Promise 封装，把高德 JS 脚本的加载过程模块化了，支持 AMD、CommonJS、ES Module。在 Vue 组件里 import AMapLoader，然后调用 load() 方法，返回的 promise resolve 之后拿到 AMap 构造函数。这样代码写的很优雅，依赖关系清晰，而且可以配合安全密钥一起配置。

我用的是第二种方式。具体版本组合是：vue 3.2.x + @amap/amap-jsapi-loader 1.0.1 + 高德 JS API 2.0。这里特别注意，JS API 2.0 和 1.4 在图层 API 上有差异，比如 TileLayer.Traffic 的构造参数、安全密钥机制都是 2.0 新增或调整的，下面讲图层的时候会一个个说。

1.3 组件化设计：地图实例如何和 Vue 生命周期对齐

地图不是普通的 DOM 元素，它是一个“一次初始化、长期存活、大量事件绑定”的重量级对象。在 Vue 组件里管理地图，核心原则是：地图实例的生命周期必须和组件生命周期严格对齐。

所以我在项目里单独封装了一个 AmapContainer.vue 组件，专门负责地图的创建、销毁和图层管理。地图创建的时机放在 onMounted 里，因为此时组件的 DOM 已经被挂载到文档流中，容器有真实的宽高值；销毁时机放在 onBeforeUnmount 里，调用 map.destroy() 释放资源。如果你在 Vue 2 里做，对应的是 mounted 和 beforeDestroy 钩子。

外部业务组件需要操作地图时，通过 ref 拿到 AmapContainer 组件实例，再调用组件暴露的方法。这样地图的逻辑被收敛到单一组件内部，不会散落在业务代码的各个角落，后续加标记点、加路线规划、加自定义控件都方便扩展。

2. 环境准备：申请 Key 与完成地图初始化

2.1 高德开放平台 Key 申请与安全密钥配置

这一步是新手最容易卡住的地方。先去高德开放平台控制台，创建一个应用，然后添加“Web端(JS API)”类型的 Key。注意：这里一定要选 JS API 类型，而不是 Web 服务类型，两种 Key 的权限完全不一样，如果选错了，地图脚本能加载但请求会报“INVALID_USER_SCODE”。

JS API 2.0 推出之后，除了 Key 之外还要求配置安全密钥 jscode。官方提供了两种配置方式：

第一种是代理转发：前端把 key 和 jscode 传给自己的后端，由后端去拼接请求高德脚本的 URL。第二种是推荐的前端方式：在高德脚本加载地址后面拼接jscode参数。loader 里可以直接配 SecurityConfig。

我实际用下来，直接在 loader 里配置 securityJsCode 是最省事的：

AMapLoader.load({ key: '你的Key', version: '2.0', plugins: [], securityJsCode: '你的安全密钥' })

但这里有个坑：如果你的项目走的是本地代理（比如 Vite 的 proxy 配置），那高德脚本的域名会被代理转发，导致请求 URL 里带不上 securityJsCode 参数，这时就会出现反复加载脚本但地图死活不出来，控制台报错又很模糊的情况。解决方式是在 proxy 配置里把https://webapi.amap.com和https://restapi.amap.com两个域名直接放行，不走代理，特殊情况用完整 URL 处理。

注意：安全密钥是绑定在 Key 上的，如果换了 Key，jscode 也要跟着换。不要硬编码在公共仓库里，建议放到 .env 环境变量里管理。

2.2 安装依赖与 Vue 组件内初始化

安装依赖没什么复杂操作：

npm install @amap/amap-jsapi-loader

接下来写 AmapContainer 组件的基础结构。Vue 3 的代码长这样：

<template> <div id="map-container" class="map-box"></div> </template> <script setup> import { onMounted, onBeforeUnmount } from 'vue' import AMapLoader from '@amap/amap-jsapi-loader' let map = null onMounted(() => { initMap() }) async function initMap() { const AMap = await AMapLoader.load({ key: import.meta.env.VITE_AMAP_KEY, version: '2.0', securityJsCode: import.meta.env.VITE_AMAP_SECURITY_CODE, plugins: ['AMap.Scale', 'AMap.ToolBar', 'AMap.MapType'] }) map = new AMap.Map('map-container', { zoom: 12, center: [116.397428, 39.90923], viewMode: '2D', webglParams: { antialias: true } }) } onBeforeUnmount(() => { if (map) { map.destroy() map = null } }) </script> <style scoped> .map-box { width: 100%; height: 100%; min-height: 400px; } </style>

有几个初始化的参数值得细说。

zoom和center是地图的初始视图，center 用经纬度数组，顺序是经度在前、纬度在后，别搞反了，搞反了地图会定位到完全错误的位置。

viewMode建议设成 '2D'。虽然 3D 模式下视觉效果更好，但本项目要展示楼块图层，楼块在 2D 模式下是建筑轮廓填充色块，在 3D 模式下是立起来的建筑模型，这两者叠加业务数据时的呈现效果差别很大。如果业务中不需要倾斜视角，建议用 2D，性能和稳定性都会更好。

容器高度是另一个高频坑。地图容器必须有明确的宽度和高度，如果父级 div 没有高度或者只有 min-height，地图初始化时拿不到正确的容器尺寸，虽然不报错，但地图就是一片灰或者只有一个角可见。我用的是height: 100%; min-height: 400px双保险，既能撑开容器，又保证最小可交互区域。

2.3 地图销毁与组件卸载

地图销毁这件事，很多人会忽略。Vue 组件被 v-if 移除，或者路由切换导致组件卸载时，如果只移除 DOM 而没有调用 map.destroy()，地图实例仍然驻留在内存里，它会继续持有大量的事件监听、DOM 引用、瓦片请求，长时间下来就是内存泄漏，页面越切越卡。

更隐蔽的一个问题：如果同一页面里反复创建同一个 id 的容器，比如弹窗里嵌地图，下次打开弹窗时，高德内部如果检测到之前有同 id 的容器残留，会出现地图事件重复触发、中心点无法移动这些诡异问题。所以 onBeforeUnmount 里map.destroy()这一步必须做，而且 destroy 之后要把变量置空，避免闭包还引用着旧实例。

3. 图层体系深度拆解：标准图、路况、卫星、路网、楼块

3.1 瓦片图层：标准图与实时路况

先理解一个基础概念：高德地图的底图和大部分叠加层，本质上都是瓦片图层。所谓瓦片，就是把地图按 zoom 级别切成一张张 256x256 的图片，地图在平移缩放时按需加载当前视野内的瓦片，拼成一张完整的地图。

标准图层对应 AMap.TileLayer。当 new AMap.Map() 创建地图时，高德会默认内置一个标准图层，你不需要手动添加也能看到地图。但如果你想做图层切换控制，最好显式声明所有图层，并且把默认图层管理权拿过来。

const standardLayer = new AMap.TileLayer() map.add(standardLayer)

显式添加的好处是：你可以统一管理所有图层的 zIndex、显隐、以及销毁时机。默认内置图层在 JS API 2.0 里可以通过map.getLayers()查看，有时候自定义图层和默认图层叠在一起，会出现切成卫星图后底下还透出标准图阴影的问题，所以建议初始化时把所有图层都纳管起来。

实时路况图层的正式类名是 AMap.TileLayer.Traffic。它在代码里和普通瓦片图层用法基本一致：

const trafficLayer = new AMap.TileLayer.Traffic({ autoRefresh: true, interval: 30, reTimeout: 30 }) map.add(trafficLayer)

参数说明：

• autoRefresh：是否自动刷新路况数据。路况数据是周期性变化的，堵车解除、新拥堵路段出现，都要靠刷新拿到新数据。
• interval：自动刷新时间间隔，单位是分钟。我设的 30，即每 30 分钟拉一次新数据。
• reTimeout：数据请求超时时间，单位也是分钟，超过这个时间没有响应就丢弃本次更新。

路况图层有个视觉上的坑：它默认只在城市主干道、快速路上显示红黄绿颜色，支路和小巷子很多是没有路况数据的，所以图层加上去之后如果看到大部分道路是灰色的，不要慌，这不是 bug，是高德本身数据就这样。灰度路段表示“无路况数据”或“畅通”，红色是严重拥堵，橙色是缓行，绿色是畅通。

还有一个细节：实时路况属于实时数据图层，底图是静态瓦片，二者混叠时最好把路况层 zIndex 设置得比底图高一层，默认它会在底图之上，但如果业务里还加了自定义覆盖物，要注意覆盖物的 zIndex 要高于路况层，否则会出现 POI 被路况颜色遮挡的情况。

3.2 卫星图与路网叠加的正确打开方式

卫星图层的类名是 AMap.TileLayer.Satellite：

const satelliteLayer = new AMap.TileLayer.Satellite() map.add(satelliteLayer)

卫星图的特点是只有影像，没有任何文字标注。道路叫啥名字、某个建筑是啥地方，全看不出来。所以实际项目中做“卫星图”模式时，一般不是单独切到卫星图，而是切成“卫星 + 路网”组合，让道路线和地名标注叠加在卫星影像上。

路网图层的类名是 AMap.TileLayer.RoadNet：

const roadNetLayer = new AMap.TileLayer.RoadNet() // 卫星 + 路网 map.add([satelliteLayer, roadNetLayer])

这里的关键点是：路网图层必须和卫星图层同时存在才能显示出来。如果你只 add 一个 RoadNet，却把标准图层移除了，页面会变成一块空白，不要以为是自己代码写错了。道理很简单，RoadNet 本身不包含底图瓦片，它只有道路、地名这些标注信息，这些信息必须叠在某个影像底图之上才能被看到。

切“卫星 + 路网”的正确姿势是：先确保卫星图层在地图上，再把 RoadNet 添加进去，zIndex 上 RoadNet 要高于 Satellite。如果反过来，会出现卫星影像把路网盖住的情况。

这里补充一个 zIndex 层面的理解。高德把图层分了几层：底图瓦片层（自然是最底层）、路网层（叠加在底图之上）、路况层（在路网之上）、建筑楼块层、以及业务用的自定义覆盖物层。map.add 添加图层时如果没有显式指定 zIndex，高德内部会按类型分配默认层级，但你如果同时 add 了自定义图层和内置路网，最好给每个图层一个明确的 zIndex 值，避免不同图层之间的顺序不符合预期。

3.3 楼块图层：让建筑“站起来”的关键

楼块图层的类名是 AMap.Buildings。这个东西和前面的瓦片图层完全不一样，它是矢量图层，绘制的是建筑轮廓数据。

const buildingsLayer = new AMap.Buildings({ zooms: [16, 20], zIndex: 120 }) map.add(buildingsLayer)

构建参数说明：

• zooms：楼块图层显示的最小和最大缩放级别。我设的 [16, 20]，意思是缩放级别小于 16 时楼块不显示。原因很简单，缩放级别低的时候地图上几百栋建筑挤在一个像素里，全画出来没有任何意义，还拖慢渲染。
• zIndex：楼块图层的层级，一般要高于卫星图和路网，但低于路况层，这样既能看见建筑轮廓，又不会被路况颜色完全盖住。

楼块图层的表现和 viewMode 有直接关系。2D 模式下显示的是建筑轮廓的填充色块；3D 模式下这些楼块会“站起来”，变成立体的建筑模型，配合高德的旋转、倾斜视角，能做出很炫的 3D 城市效果。但 3D 楼块对浏览器性能和机器显卡有要求，低端设备上旋转地图时可能掉帧明显，这就是为什么我把初始化参数设计成 2D 优先，楼块只是作为一个可选项让用户切换。

楼块数据覆盖范围也要心里有数：高德的楼块数据主要集中在城市区域，尤其是一二线城市的城区，偏远地区或者县城可能没有楼块数据，图层加上去后页面上没有任何反应，这是正常的。

另外，AMap.Buildings 在 JS API 2.0 里还支持自定义楼块颜色，例如：

const buildingsLayer = new AMap.Buildings({ areas: [{ visible: true, color: '#ff0000' }], zooms: [16, 20] })

用 areas 数组可以指定某些区域内的建筑显示特定颜色，这在数据可视化项目里很好用，比如红色显示目标片区内的建筑。但注意 areas 的优先级高于全局样式，匹配到区域内的建筑会覆盖全局颜色。

4. 图层切换功能完整落地

4.1 图层分组：底图互斥，叠加层共存

前面把图层分成了两个阵营，这一步要把这个分组落地成代码。底图组包含标准图层和卫星图层，这两个是互斥的，切换时只能保留一个；叠加层组包含路况、路网、楼块，它们都附着在底图之上，可以多个同时存在。

这个分组逻辑是图层切换功能的骨架。如果不做分组，切换时只是“先把所有图层 remove 再 add 新的”，会出现一种情况：当前是“卫星 + 路网”，用户只关了路网，结果因为代码把所有图层都清了，卫星底图也没了，页面变空白。我这个项目从一开始就按分组管理，后面加其他图层（比如自定义热力图、标记点）也方便。

具体数据结构我用的一个对象来存所有图层实例：

const layers = { standard: null, satellite: null, roadNet: null, traffic: null, buildings: null }

初始化时一次性把所有图层都创建好，但不全部添加到地图上，只把默认的标准图层 add 上去。这样做的好处是图层实例可以复用，切换只是 add/remove 或 visible 的切换，不用每次点击按钮都 new 一个新实例，省掉实例化开销。

4.2 封装 addLayer / removeLayer 管理工具

图层管理的核心我封装了三个函数：addLayer、removeLayer、switchBaseLayer。

先说 addLayer 和 removeLayer：

function addLayer(name) { const layer = layers[name] if (!layer) return map.add(layer) } function removeLayer(name) { const layer = layers[name] if (!layer) return map.remove(layer) }

封装的意义在于调用方不用关心 map.add 和 map.remove 的细节，只要传图层名称即可。而且后续如果要从高德 API 换成其他地图引擎，只要改这一层封装就行，业务代码不用动。

这里有一个注意点：map.remove 传入一个数组可以批量移除多个图层：

map.remove([layers.roadNet, layers.buildings])

批量移除比逐个 remove 性能好，因为它只触发一次视图重绘。在图层切换频繁的场景下，批量操作的性能差异体感还是挺明显的。

switchBaseLayer 是底图切换的核心方法：

function switchBaseLayer(type) { // 先移除当前底图组里的所有底图 map.remove([layers.standard, layers.satellite]) if (type === 'standard') { map.add(layers.standard) } else if (type === 'satellite') { map.add(layers.satellite) } else if (type === 'satelliteRoad') { // 卫星 + 路网联动 map.add([layers.satellite, layers.roadNet]) } }

这里“移除所有底图，再添加目标底图”的策略，看起来有点笨，但实际是最稳妥的做法。因为你不知道当前地图上是哪种底图组合，如果只做“当前底图 remove”，容易漏掉上一层组合里残留的卫星图，导致底图叠加混乱。一次性清理再添加，保证每一轮的底图状态都是可预期的。

路网层比较特殊，它既可以叠加在卫星图上，也可以叠加在标准图层上（实际上就是你见得最多的默认地图效果）。所以在我的设计里，路网是一个独立开关，用户可以在任何底图基础上有选择地打开它。只有一种情况是特例：用户选择“卫星图”时，我默认只切卫星底图不加路网；用户选择“卫星 + 路网”时，我同时加卫星和路网。这点在 UI 上要做明确区分，否则用户会困惑“卫星图”和“卫星 + 路网”到底有什么区别。

4.3 图层面板 UI 与切换逻辑

图层面板我用自定义按钮组实现，没有引入现成的 UI 库，因为就五六个按钮，用原生组件更快、更可控。模板结构大致这样：

<template> <div class="layer-panel"> <div class="layer-group"> <span class="group-title">底图</span> <button v-for="item in baseLayerOptions" :key="item.type" :class="{ active: currentBaseType === item.type }" @click="handleBaseLayerChange(item.type)" > {{ item.label }} </button> </div> <div class="layer-group"> <span class="group-title">叠加层</span> <label v-for="item in overlayOptions" :key="item.type"> <input type="checkbox" :checked="item.checked" @change="handleOverlayChange(item.type, $event)" /> {{ item.label }} </label> </div> </div> </template>

底图层按钮是单选逻辑，一次只能激活一个，但“卫星 + 路网”这个选项比较特殊，它内部需要同时控制 satellite 和 roadNet 两个图层，所以在面板上它和三选一的其他选项并列：

const baseLayerOptions = [ { type: 'standard', label: '标准图层' }, { type: 'satellite', label: '卫星图' }, { type: 'satelliteRoad', label: '卫星路网' } ]

叠加层的 checkbox 是独立的，其中路况和楼块好说，就是 add/remove 对应图层。

比较麻烦的是“路网”这个叠加层。因为底图里的“卫星路网”选项已经包含了路网层，如果用户在“卫星 + 路网”模式下又去勾选叠加层里的“路网”，就会出现重复添加同一个图层。所以我在 handleOverlayChange 里加了一层保护：

function handleOverlayChange(type, event) { if (type === 'roadNet' && currentBaseType === 'satelliteRoad') { // 底图已经是卫星路网组合，不允许单独操作路网 event.target.checked = true return } const action = event.target.checked ? addLayer : removeLayer action(type) }

这个细节我是在测试时发现的：底图组合和叠加层状态不一致，会导致用户把路网关了又开，底图状态变得很乱。加了这个判断之后，整个图层面板的状态机就清晰多了。

还有一个小细节：点击切换底图时，如果叠加层里的楼块或路况还开着，它们不会受影响，继续保留在当前底图之上。这是符合预期的——用户只是换底图，不需要把叠加层也关掉。这个逻辑在 switchBaseLayer 里天然支持，因为函数只操作底图组。

到这一步，图层面板已经能完成所有需求：默认标准图、点“卫星图”切到纯卫星、点“卫星路网”切到卫星加路网、勾选路况叠加路况信息、勾选楼块叠加建筑轮廓。核心代码不多，但分组的思路需要有，否则后期维护会越来越乱。

5. 常见问题与排查技巧实录

5.1 白屏问题

白屏是地图接入最经典的问题，可能的原因不止一个，我按出现频率排列一下。

第一是 Key 类型选错或者 key 与安全密钥不匹配。控制台报错一般是INVALID_USER_SCODE或者USERKEY_PLAT_NOMATCH。你去高德控制台把应用删掉重新创建一个，选“Web端(JS API)”，拿到新 Key 和新 jscode，重新配置，基本能解决。这里注意：Key 是跟着应用走的，一个应用可以添加多个不同类型的 Key，不要混用。

第二是安全密钥没正确传。配置了 loader 的 securityJsCode 后，地图加载后可以打开 Network 面板，搜索jscode关键字，看看高德脚本请求的 URL 里有没有带这个参数。如果带了但还是报错，很可能是代理把请求转发了，请求头变了。把高德域名的代理放行，或者在后端做个专门的高德代理接口。

第三是容器高度为 0。如果父级用了 flex 布局但没给子元素设置 flex: 1 或 min-height: 0，地图容器高度会被压缩成 0，地图就渲染不出来。排查方法很简单：浏览器选中地图容器元素，看 Computed 样式里的 width 和 height，只要有任一为 0，就是布局问题。

5.2 图层切换后变黑/空白

图层切换后出现黑底或者空白页，这个坑我在做卫星图层时遇到过。典型场景是：标准图层 remove 了，然后 add 卫星图层，但卫星图层因为瓦片还没下载完成，短暂地露出一个空白的底。如果网络慢，你还会看到地图变成一片黑。

这个问题的根源在于瓦片图层的加载是异步的，remove 和 add 之间的间隙没有兜底策略。解决办法有两层：

第一层是切换底图时不要先 remove 再 add，而是先 add 新的再 remove 旧的。因为两个图层同时存在的一瞬间，新的瓦片已经在加载了，旧的还在显示，视觉上不会出现空白。

第二层是如果先加后删还是会闪，可以给要 add 的图层设置visible: false，等图层的 complete 事件触发后再设为 true 并 remove 旧图层：

function switchBaseLayer(type) { const newLayer = getLayerByType(type) newLayer.on('complete', () => { map.remove([layers.standard, layers.satellite]) }) map.add(newLayer) }

注意 complete 事件只在图层第一次加载完成时触发，如果图层已经加载过了，再 add 不会再次触发。我自己用下来感觉第一种“先加后删”大部分场景够用，只有网络很差时才考虑 complete 事件方案。

5.3 楼块不显示与路况不刷新

楼块图层不显示，最常见的原因是缩放级别不够。zooms 设置的是 [16, 20]，但地图当前缩放级别是 14，楼块当然不显示。把地图放大到 17、18 级别再试，如果还是不行再看数据覆盖范围。

另外一个容易忽略的点是：楼块图层的显示依赖于地图的 viewMode。如果你初始化时用了 '3D'，楼块是以 3D 模型形式出现的，在 2D 平面视角下可能渲染不完全。所以遇到楼块“看起来没生效”，先把 viewMode 临时改成 '2D' 试一下，2D 下一定会显示平面轮廓块。

路况不刷新也是高频问题。如果路况层 add 上去是有的，但过了很久道路颜色都不变，检查 autoRefresh 和 interval。还有一个隐蔽问题：如果你的地图容器被遮挡/休眠（比如页面切到后台），浏览器的 requestAnimationFrame 和定时器会被节流，路况刷新也会暂停，等页面重新可见后一般会自动恢复。如果想主动触发一次刷新，可以手动调用：

trafficLayer.reload()

5.4 其他细节点：重复初始化与动态组件

在一个组件里重复初始化高德地图，会出现“上一次地图实例的事件处理器还挂在 window 上，新实例又被创建”的情况，典型症状是缩放一次地图，视野跳两下。排查方式是在控制台执行map = null之前先用map.destroy()清干净。

还有一种常见写法是把地图的创建封装成了一个方法，在弹窗打开时调用，弹窗关闭时销毁。如果销毁时忘记移除事件监听和 clearTimeout/clearInterval，也会造成内存泄漏。我在组件销毁逻辑里都会写上清理代码：

onBeforeUnmount(() => { if (trafficLayer) { trafficLayer.setMap(null) } if (buildingsLayer) { buildingsLayer.setMap(null) } if (map) { map.destroy() map = null } })

把所有图层都 setMap(null) 再 destroy，可以确保没有图层实例残留在地图外部引用中，彻底断掉引用链。

实际开发中地图项目很少有“一次初始化就完事”的，图层管理、标记点管理、事件绑定、响应式数据联动，每一项都需要提前规划好结构。我在这套方案里踩过的坑，基本上都总结在“常见问题”这一节了，尤其是图层分组的设计——如果从一开始就把底图和叠加层分开管理，后面加新图层、加自定义组件都会从容很多，不会出现改一个功能崩一片的尴尬。建议你把标准图、卫星图、路网、路况、楼块这五类图层的实例化和管理函数单独抽成一个 composable，AmapContainer 组件只负责调用和 UI 联动，这样代码结构会更清爽，也方便单元测试。