Question

我正在创建一个webcomponent，它使用一个codemirror库脚本来创建codemirror实例。

此webcomponent可以正常工作，直到在另一个也使用codemirror的项目中使用它为止。在这种情况下，页面将永远保持加载状态。我认为可能是因为全局变量冲突，因为如果我注释掉codemirror代码，它会很好地加载。

与上述情况无关，我的问题是我如何在webcomponents范围内/封装外部脚本。

Similar question已被询问，但未提及任何有关外部JavaScript作用域的信息。

我知道shadow dom规范只讲封装css，而不是外部JS，但这是每个webcomponent都会有的问题，因为它们打算在其他人的项目中使用。

Answer 1

DevTools“控制台”显示什么错误？

关于名称冲突。有几种方法。最简单的方法是不在代码中使用全局变量。例如，可以在结构中关闭代码：

(function() {
    // your code here
})();

以及您使用var，let或const声明的代码中的所有变量。每次声明全局变量都应视为设计错误。

附加的组件也可以另存为模块，并将变量导入局部变量。如果出于某些实际原因必须使用全局变量，则可以在定义了具有该名称的变量时调用异常。

编辑：

var editor1 = CodeMirror.fromTextArea(myTextarea1, {
    lineNumbers: true
});
var editor2 = CodeMirror.fromTextArea(myTextarea2, {
    lineNumbers: true
});

您在哪里看到名称冲突？

如何封装WebComponent中使用的外部脚本

1 个答案: