时间戳

首页 > 解决方案 > 如何解决来自两个独立 Javascript 库的类型名称冲突？

javascript - 如何解决来自两个独立 Javascript 库的类型名称冲突？

问题描述

首先我要说的是，我主要是一名 C# 程序员，很少涉足 JavaScript。

我可以给自己写一些 JS 代码，只要它最简单。我可以处理 jQuery 和奇怪的自给自足的 3rd-party 库，但是当 React、Angular、Bootstrap 和其他人进入现场时，我无法用湿纸袋编写自己的代码。我也不习惯使用 npm 或任何其他类似的包管理器。

这从来都不是我的工作，也不是我的兴趣，所以我从来没有去过那里。每当我编写一些 JS 代码时，我都会在我的<script>标签中引用所需的 JS 文件，然后尽可能直接地使用它们。

我目前正在创建一个非常简单的概念验证网络应用程序，它迟早会由有能力的人重建其客户端部分。但与此同时，我必须提供基本功能，作为下一个团队接管的粗略指导，无论何时。

我选择了两个库，每个库似乎都易于使用并完成工作，单独使用时。但是当我尝试在同一页面上同时使用它们时，我遇到了一个问题：它们的主要类型都使用相同的名称，我似乎无法消除它们之间的歧义。

这些是库：

它们都声明了一个名为 的类型JSONEditor，只要我不同时引用这两个库，我就可以使用它。

到目前为止，我已经尝试通过使用模块和import使用不同名称的类型来解决这个问题，但它没有用......我在控制台中遇到了一堆关于“找不到导入”和“e 不是”的错误定义”，这让我觉得我解决这个问题是错误的。

如果可能的话，我将如何使用纯 JS 解决这个问题？

更新：正如建议的那样，我提供了一个演示我使用的最小示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Test Page</title>
    <link href="/lib/jsoneditor/jsoneditor.min.css" rel="stylesheet" type="text/css">
</head>
<body>

<div id="container">
    <div id="editor" style="width: 300px; height: 200px;"></div>
    <div id="form"></div>
</div>

<!--library 1: https://github.com/josdejong/jsoneditor -->
<script src="/lib/jsoneditor/jsoneditor.min.js"></script>

<!--library 2: https://github.com/jdorn/json-editor -->
<script src="/lib/jsonform/jsonform.min.js"></script>

<script>
    // Library 1: The JSON code editor.
    var editor = new JSONEditor(document.getElementById("editor"), { mode: "code" });
   
    // Library 2: The form builder.
    var form = new JSONEditor(document.getElementById("form"), {
        ajax: true,
        schema: {
            $ref: "/api/describe/service/test"
        }
    });
</script>

</body>
</html>

如果我注释掉一个库的使用（无论哪个），另一个库按预期工作，并且内容显示在相应的 target <div>。但是如果我同时尝试两者，如上所示，没有任何显示，并且控制台输出以下错误：

未捕获的类型错误：t 未定义

这发生var editor = new JSONEditor在行上，这让我认为第二个库中的类型会覆盖第一个库并导致问题。

这对我来说是可以理解的，本身不是问题。问题是我不知道如何导入这两种JSONEditor类型以便可以单独引用它们。

标签： javascriptes6-modules

解决方案

代码编辑器（JSON 编辑器，而不是 JSON 模式表单生成器）的维护者在过去已经解决并关闭了一个关于此的问题：https ://github.com/josdejong/jsoneditor/issues/270

他推荐的解决方案如下所示：

<script src="assets/jsoneditor/dist/jsoneditor.min.js"></script>
<script>
  var JSONEditorA = JSONEditor;
</script>
<script src="assets/json-editor/dist/jsoneditor.min.js"></script>
<script>
  var JSONEditorB = JSONEditor;
</script>

如果您必须使用脚本标签，这可能是要走的路。

推荐阅读