创新实训项目分析（十七）

最新推荐文章于 2024-10-13 18:43:42 发布

m0_51066482

最新推荐文章于 2024-10-13 18:43:42 发布

阅读量228

点赞数

文章标签： ue4

本文链接：https://blog.csdn.net/m0_51066482/article/details/122163919

版权

该博客详细阐述了一种前端引擎的加载流程，包括EngineLoader类中的load方法，依次加载引擎、模块、核心组件、基本对象、管理类和工具。每个加载步骤中包含了等待、进度更新和错误处理。此外，还定义了加载不同组件的子方法，如loadScript用于动态注入脚本，以及进度条的加载和更新机制。

摘要由CSDN通过智能技术生成

2021SC@SDUSC
分析引擎加载模块EngineLoader
首先对引擎加载的路径进行定义
在这里插入图片描述
load：加载引擎的对外暴露函数

EngineLoader.load = async function (app_element, packages) {
  await this.loadEngine();
  Engine.setApp(app_element);
  Engine.setPackages(packages);
  this.setProgress(0);

  await this.loadModule();
  Language.initializeOnLoad();

  await this.wait(500);
  Engine.updateLoadingData();
  await this.loading(1000, 'loading-engine', '');
  Engine.setCurrentTodo('engine-loading');
  Engine.updateAppData();

  Engine.setCurrentLoadingProcess('loading-core', '...');
  await this.wait(100);
  await EngineLoader.loadCore();

  Engine.setCurrentLoadingProcess('loading-object', '...');
  await this.wait(100);
  await EngineLoader.loadObject();

  Engine.setCurrentLoadingProcess('loading-manager', '...');
  await this.wait(100);
  await EngineLoader.loadManager();

  Engine.setCurrentLoadingProcess('loading-tool', '...');
  await this.wait(100);
  await EngineLoader.loadTool();

  Engine.setCurrentLoadingProcess('loading-plugin', '...');
  await this.wait(100);
  await EngineLoader.loadPlugin();

  Engine.setCurrentLoadingProcess('loading-complete', '');
  Engine.initialize();

  Engine.setCurrentTodo('engine-ready');
  this.setProgress(100);
};

loadEngine：加载引擎

EngineLoader.loadEngine = async function () {
  await this.loadScript(this.PATH, this.ENGINE + '.js');
}

loadModule:加载模块

EngineLoader.loadModule = async function () {
  for (let i = 0; i < this.MODULE_LIST.length; i++) {
    await this.loadScript(this.MODULE, this.MODULE_LIST[i] + '.js');
  }
}

loadCore：加载核心组件

EngineLoader.loadCore = async function () {
  for (let i = 0; i < this.CORE_LIST.length; i++) {
    await this.loading(100, 'loading-core', '：' + this.CORE_LIST[i]);
    await this.loadScript(this.CORE, this.CORE_LIST[i] + '.js');
  }
};

loadObject：导入基本对象

EngineLoader.loadObject = async function () {
  for (let i = 0; i < this.OBJECT_LIST.length; i++) {
    await this.loading(100, 'loading-object', '：' + this.OBJECT_LIST[i]);
    await this.loadScript(this.OBJECT, this.OBJECT_LIST[i] + '.js');
  }
};

loadManger：对管理类进行导入

EngineLoader.loadManager = async function () {
  for (let i = 0; i < this.MANAGER_LIST.length; i++) {
    await this.loading(100, 'loading-manager', '：' + this.MANAGER_LIST[i]);
    await this.loadScript(this.MANAGER, this.MANAGER_LIST[i] + '.js');
  }
};

loadTool：对Tool进行导入

EngineLoader.loadTool = async function () {
  for (let i = 0; i < this.TOOL_LIST.length; i++) {
    await this.loading(100, 'loading-tool', '：' + this.TOOL_LIST[i]);
    await this.loadScript(this.TOOL, this.TOOL_LIST[i] + '.js');
  }
};

loadPlugin：对插件进行导入

EngineLoader.loadPlugin = async function () {
  for (let i = 0; i < this.PLUGIN_LIST.length; i++) {
    await this.loading(100, 'loading-plugin', '：' + this.PLUGIN_LIST[i]);
    await this.loadScript(this.PLUGIN, this.PLUGIN_LIST[i]);
  }
};

导入时进行的wait操作，以及加载进度条等操作，采用固定时间等方式进行加载，并对进度条进行特殊处理

EngineLoader.wait = function (time) {
  return new Promise((resolve) => {
    setTimeout(resolve, time);
  });
};
EngineLoader.loading = async function (loading_time, id, text) {
  this.loadingProgress();
  if (!this.ALLOW_LOADING) return;
  let time = 0;
  while (time < loading_time) {
    let add = Math.floor(Math.random() * 10);
    time = Math.min(loading_time, time + add);
    await this.wait(add);
    Engine.setCurrentLoadingProcess(id, text + '...' +
      Math.floor(time / loading_time * 100) + '%');
  }
};
EngineLoader.loadingProgress = function () {
  let length = this.MODULE_LIST.length + this.CORE_LIST.length + this.OBJECT_LIST.length +
    this.MANAGER_LIST.length + this.TOOL_LIST.length + this.PLUGIN_LIST.length;
  this.addProgress(100 / length);
};
EngineLoader.setProgress = function (value) {
  this._progress = value;
  Engine.progress(this._progress);
};
EngineLoader.addProgress = function (value) {
  this._progress += value;
  Engine.progress(this._progress);
};

核心的加载方法，loadScript，通过创建script的方式，动态的对前端进行注入操作

EngineLoader.loadScript = function (path, name) {
  return new Promise((resolve) => {
    let url = path + name;
    let script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;
    script.async = false;
    script.onerror = (err) => {
      console.log(err);
    };
    script._url = url;
    script.onload = () => {
      resolve();
    };
    document.body.appendChild(script);
  });
};