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);
    });
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

在该 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 或者服务器端数据库这样的持久化解决方案。