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

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

相关推荐
小五Five几秒前
TypeScript项目中Axios的封装
开发语言·前端·javascript
小曲程序几秒前
vue3 封装request请求
java·前端·typescript·vue
临枫541几秒前
Nuxt3封装网络请求 useFetch & $fetch
前端·javascript·vue.js·typescript
酷酷的威朗普2 分钟前
医院绩效考核系统
javascript·css·vue.js·typescript·node.js·echarts·html5
前端每日三省2 分钟前
面试题-TS(八):什么是装饰器(decorators)?如何在 TypeScript 中使用它们?
开发语言·前端·javascript
小刺猬_9852 分钟前
(超详细)数组方法 ——— splice( )
前端·javascript·typescript
契机再现3 分钟前
babel与AST
javascript·webpack·typescript
渊兮兮4 分钟前
Vue3 + TypeScript +动画,实现动态登陆页面
前端·javascript·css·typescript·动画
鑫宝Code4 分钟前
【TS】TypeScript中的接口(Interface):对象类型的强大工具
前端·javascript·typescript
和你一起去月球5 分钟前
TypeScript - 函数(下)
javascript·git·typescript