js文件和变量初始化
全局变量举例
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 或者服务器端数据库这样的持久化解决方案。