如何在用户控件外部JS文件中添加引用并控制加载顺序？

我正在开发依赖多个外部JavaScript文件的Genexus用户控件，多数文件包含函数定义，但无法确保函数在调用前已加载，出现了两种典型问题场景：

场景1：AfterShow脚本中调用未加载的函数 #

用户控件中的AfterShow脚本：

<script Name="initMonalisa" when="AfterShow">
  this.editor = new Monalisa.Editor();  // 定义在Monalisa_Editor.js中
</script>

Monalisa_Editor.js内容：

if (typeof Monalisa === 'undefined') {
  var Monalisa = {};
}

Monalisa.Editor = function() {
  this.allowdrop = [];
  this.dragging = null;
  // ... 其他初始化代码 ...
};

场景2：外部JS文件间的依赖调用 #

Monalisa_Node.js中直接调用依赖文件的函数：

let editor = new Monalisa.Editor();

附加细节 #

• 尝试过ES6 import/export，但Genexus生成的<script>标签类型为text/javascript而非module，导致浏览器报错：

<script type="text/javascript" src="MonalisaLibrary/Monalisa_Editor.js?20255291113792" async></script>

• 代码偶尔正常运行偶尔失败，失败时提示「函数未定义」
• 生成的HTML和.cs文件中脚本引入顺序不稳定，通常按字母排序，但偶尔会变化
• 怀疑Genexus更新gxlibrary时会重排文件，但不确定具体规则

需要解决的核心问题：

1. 如何确保Monalisa_Editor.js等依赖文件在调用代码前加载完成？
2. 在Genexus生成的代码中，强制脚本加载顺序的推荐方法是什么？
3. 结构化外部JS文件以避免竞态条件的最佳实践有哪些？

1. 确保依赖文件在调用前加载的直接方法 #

方法1：利用脚本加载事件触发初始化 #

给依赖脚本添加onload事件，在脚本加载完成后再执行初始化逻辑：

<script src="MonalisaLibrary/Monalisa_Editor.js" onload="initMonalisa()"></script>
<script>
function initMonalisa() {
  this.editor = new Monalisa.Editor();
}
</script>

在Genexus用户控件中，可以把初始化逻辑封装成函数，绑定到依赖脚本的加载完成事件上。

方法2：动态按序加载脚本 #

手动创建脚本元素，控制加载顺序，确保前一个脚本加载完成后再加载下一个：

function loadScript(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  script.onload = callback;
  document.head.appendChild(script);
}

// 按依赖顺序加载：先Editor，再Node，最后初始化
loadScript('MonalisaLibrary/Monalisa_Editor.js', function() {
  loadScript('MonalisaLibrary/Monalisa_Node.js', function() {
    this.editor = new Monalisa.Editor();
  });
});

方法3：延迟执行等待依赖 #

在依赖文件中，将逻辑包裹在等待依赖存在的循环中：

// Monalisa_Node.js修改后
function waitForEditor() {
  if (typeof Monalisa?.Editor !== 'undefined') {
    let editor = new Monalisa.Editor();
  } else {
    setTimeout(waitForEditor, 100);
  }
}
waitForEditor();

2. Genexus中强制脚本加载顺序的推荐方法 #

方法1：配置脚本依赖关系 #

在Genexus用户控件/对象的属性面板中，找到Script Dependencies（脚本依赖）配置项，明确指定依赖关系：比如设置Monalisa_Node.js依赖Monalisa_Editor.js，Genexus会自动确保先加载依赖项。

方法2：合并依赖脚本 #

把有依赖关系的JS文件按顺序合并成单个文件（比如把Monalisa_Editor.js的内容放在Monalisa_Node.js之前，合并为Monalisa_Bundle.js），Genexus只会生成一个脚本标签，从根源上避免顺序问题。

方法3：禁用脚本异步加载 #

Genexus默认生成的脚本带有async属性，会导致并行加载无序。可以通过项目属性或web.config配置禁用async，让脚本按引入顺序同步加载。

方法4：手动调整脚本列表顺序 #

在用户控件的「Scripts」标签页中，手动拖动调整脚本的排列顺序，Genexus会严格按照列表顺序生成脚本标签。

3. 结构化外部JS文件避免竞态条件的最佳实践 #

1. 命名空间+初始化函数模式 #

不在文件顶层直接执行依赖代码，而是封装成初始化函数暴露给外部调用：

// Monalisa_Editor.js
if (typeof Monalisa === 'undefined') {
  var Monalisa = {};
}

Monalisa.Editor = function() {
  this.allowdrop = [];
  this.dragging = null;
};

// 暴露初始化方法
Monalisa.initEditor = function() {
  return new Monalisa.Editor();
};

// Monalisa_Node.js
Monalisa.initNode = function() {
  if (typeof Monalisa.Editor === 'undefined') throw new Error('Editor未加载');
  return new Monalisa.Editor();
};

待所有依赖加载完成后，统一调用初始化函数。

2. IIFE模拟模块化 #

用立即执行函数表达式（IIFE）封装模块，明确依赖范围：

// Monalisa_Editor.js
const Monalisa = (function(global) {
  const Editor = function() {
    this.allowdrop = [];
    this.dragging = null;
  };

  return {
    Editor: Editor
  };
})(window);

// Monalisa_Node.js
(function(Monalisa) {
  if (!Monalisa?.Editor) {
    console.error('依赖Monalisa.Editor未加载');
    return;
  }
  let editor = new Monalisa.Editor();
})(window.Monalisa);

3. 统一入口初始化 #

创建单独的初始化文件（如Monalisa_Init.js）作为所有模块的入口，按顺序初始化：

// Monalisa_Init.js
function initMonalisa() {
  // 先初始化Editor
  window.Monalisa.editor = new Monalisa.Editor();
  // 再初始化Node相关逻辑
  window.Monalisa.node = new Monalisa.Node();
}

// 确保DOM和所有脚本加载完成后执行
if (document.readyState === 'complete') {
  initMonalisa();
} else {
  window.addEventListener('load', initMonalisa);
}

在Genexus中确保该文件在所有依赖文件之后加载。

4. 添加依赖检查 #

在每个模块开头添加依赖校验，避免未加载时执行代码：

// Monalisa_Node.js开头
if (typeof Monalisa === 'undefined' || typeof Monalisa.Editor === 'undefined') {
  throw new Error('Monalisa_Editor.js必须先加载');
}

内容的提问来源于stack exchange，提问作者Nicolas Rivoir