js文件的执行和变量初始化缓存

全局变量举例

import * as turf from "@turf/turf";
import earcut from "earcut";
import * as THREE from "three";
import { TextGeometry } from "three/addons/geometries/TextGeometry.js";import { FontLoader } from "three/addons/loaders/FontLoader.js";
import { CSS2DObject } from "three/addons/renderers/CSS2DRenderer.js";
import buffer from "../../utils/buffer.js";
import { FastBackward } from "@blueprintjs/icons/lib/esm/generated-icons/16px/paths/index.js";
import {earthRadius,feature,featureCollection
} from "@turf/helpers";
import jsts from "@turf/jsts";
const { BufferOp, GeoJSONReader, GeoJSONWriter } = jsts;const NamePlanningTrajectory = "planning-trajectory";
const NameObjects = "environment_objects";
const parkingLotColors = {highlight: 0xffff00, // 黄色normal: 0x888888, // 更深的灰色用于参考线greenSpace: 0x00ff00, // 绿色区域，目标车位whiteLines: 0xffffff, // 白色，车位色// worldModelTarget: 0xffa500, // 橙色worldModelTarget: 0xffffff, 
};const textGeometryCache = new Map();class ObjectBoundary extends THREE.LineSegments {...
.....
....
if (label) {RubikPromise.then((font) => {if (!textGeometryCache.has(label)) {requestIdleCallback(() => {const geometry = new TextGeometry(label, {font: font,size: 0.5,height: 0,curveSegments: 1,});geometry.center();textGeometryCache.set(label, geometry);const fontMesh = new THREE.Mesh(geometry, fontMaterial);fontMesh.rotation.z = Math.PI;fontMesh.rotation.x = -Math.PI / 2;polygonMesh.add(fontMesh);});return;}const fontMesh = new THREE.Mesh(textGeometryCache.get(label),fontMaterial);fontMesh.rotation.z = Math.PI;fontMesh.rotation.x = -Math.PI / 2;polygonMesh.add(fontMesh);});}

在该 JS 文件中，textGeometryCache 是使用 new Map() 初始化的一个变量，是一个 Map 对象。这个缓存变量用于存储文本几何体（TextGeometry），以避免多次创建相同文本的几何体对象，并优化性能。

textGeometryCache 会在文件被加载执行时初始化，也就是说它在模块的作用域内一直存在。一旦定义，它将在整个应用程序的生命周期中持续存在，除非主动清除或者应用程序被销毁。
具体来说：
当 RubikPromise.then 或 createParkingSpace 函数首次为一个特定的标签 label 创建文本几何体时，此几何体会被存入 textGeometryCache 中。
若后续需要相同的标签文本几何体，会首先检查 textGeometryCache 是否已有对应的对象，如果有，则直接从缓存中获取，而不是重新创建，从而节省了资源和时间。
textGeometryCache 会一直保存这些文本几何体的引用，直到显式调用 textGeometryCache.clear() 或者 textGeometryCache.delete(key) 清除缓存中的元素，或者整个页面被重新加载，导致 JS 环境重置。
由于 textGeometryCache 是一个全局变量，并且在模块作用域内，所以只要该 JS 文件没有被重新加载，textGeometryCache 及其内容就会一直存在。如果希望释放缓存中的几何体资源，需要手动进行清理操作。

js文件加载

JavaScript 文件被加载执行通常发生在以下情况：

• 网页初次加载: 当浏览器首次加载一个包含 JavaScript 的网页时，页面中所有的 〈script〉 标签引用的外部 JS 文件将会被下载并执行。对于内联脚本（即直接写在 HTML 中的 〈script〉 内容），它们也会在此时执行。

• 动态DOM 添加 〈script〉 标签来加载额外的 JS 文件。这些文件在添加到 DOM 后会被立即加载并执行。

• 模块导入: 如果你在使用 ECMAScript 模块 (ESM)，当一个模块或脚本使用 import 语句导入另一个模块时，被导入的模块会被加载并执行一次。

• 用户交互: 用户与网页交互（例如点击按钮）可能会触发 JavaScript 代码的执行，但这不会导致整个文件重新加载，只是运行已加载文件中的特定功能或事件处理程序。

• 页面重载/导航: 当用户刷新页面、提交表单或进行新的页面导航时，当前页面上的所有 JavaScript 文件都会被重新加载和执行。

• 异步请求: 使用 AJAX 技术或 Fetch API 获取新的 JavaScript 代码，并执行返回的脚本。

每次文件被加载执行时，其中定义的全局变量和函数就会重新初始化。这意味着如果一个 JS 文件中有一个全局 Map 变量，像提到的 textGeometryCache，每当该 JS 文件被重新加载执行时，这个 Map 就会被重新创建，之前存储的数据将会丢失。
如果希望跨越多个页面保持某些状态，你需要使用像 Local Storage、Session Storage 或者服务器端数据库这样的持久化解决方案。