如何在不让其原型进入全局命名空间的情况下维护 Web 组件之间的依赖关系？答案

【问题标题】：How can I maintain dependencies between webcomponents without letting their prototypes enter the global namespace?如何在不让其原型进入全局命名空间的情况下维护 Web 组件之间的依赖关系？
【发布时间】：2016-03-24 21:13:13
【问题描述】：

我在正在开发的应用程序中定义了许多自定义元素。现在，我一直在对元素进行原型设计，并将名称放在全局命名空间中。每个元素都有自己的 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>

这个有对应的js包含在hello-earth.js:

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

Polymer(helloEarthPrototype);

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

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

    Polymer(helloWorldPrototype);
})();

问题在于helloWorldPrototype 不再可用于helloEarthPrototype。如何避免将自定义元素的原型放置在全局命名空间中，但仍允许它们相互访问以进行继承？

【问题讨论】：

标签： javascript html polymer web-component custom-element

【解决方案1】：

如果您想在不同的 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 )

【讨论】：