如何在不让web组件的原型进入全局命名空间的情况下维护它们之间的依赖关系

How can I maintain dependencies between webcomponents without letting their prototypes enter the global namespace?

本文关键字：维护 情况下 命名空间 关系 依赖 之间 全局 web 原型 组件      更新时间：2023-09-26

我在一个正在开发的应用程序中定义了许多自定义元素。现在，我已经对我的元素进行了原型设计，并将其名称放在全局命名空间中。每个元素都有自己的HTML文件，当我需要创建元素时，我会导入该文件。一个基本的HTML文件如下所示：

<script type="text/javascript" src="hello-world.js"></script>

这指向以下js文件：

var helloWorldPrototype = {
    is : "hello-world",
};
Polymer(helloWorldPrototype);

我有其他自定义元素，然后我想使用这个web组件的原型作为基础，我正在使用Polymer提供的"行为"属性来实现。所有的依赖项都导入到HTML中，所以我的第二个HTML看起来是这样的：

<link rel="import" href="hello-world.html">
<script type="text/javascript" src="hello-earth.js"></script>

这在hello-earth.js:中包含相应的js

var helloEarthPrototype = {
    is : "hello-earth",
    behaviors : [helloWorldPrototype]
};
Polymer(helloEarthPrototype);

我的问题是，我现在想将所有这些原型对象从全局名称空间中取出。对于hello-world组件，我可以通过将原型封装在一个自执行功能块中来实现这一点，如下所示：

(function(){
    var helloWorldPrototype = {
        is : "hello-world",
    };
    Polymer(helloWorldPrototype);
})();

这样做的问题是helloWorldPrototype对helloEarthPrototype不再可用。如何避免将自定义元素的原型放在全局名称空间中，但仍允许它们为继承目的相互访问？

如果要在不同的JavaScript文件中共享对象，则至少需要一个全局object引用。在其中，您可以添加（作为attributes）想要共享的资源。

例如，您可以定义一个名为MyAppNS的对象，它将充当名称空间：

var MyAppNS = {}  // or window.MyAppNS = {}

然后你可以定义你的第一个原型和自定义元素：

MyAppNS.helloWorldPrototype = { 
  is: "hello-world"
}
Polymer( MyAppNS.helloWorldPrototype )

在另一个文件中，您可以定义另一个原型和自定义元素：

MyAppNS.helloEarthPrototype = {
    is : "hello-earth",
    behaviors : [MyAppNS.helloWorldPrototype]
}
Polymer( MyAppNS.helloEarthPrototype )
相关文章：