Как я могу поддерживать зависимости между веб-компонентами, не позволяя их прототипам вводить глобальное пространство имен?

Question

У меня есть ряд пользовательских элементов, определенных в приложении, над которым я работаю. Прямо сейчас, я прототипировал свои элементы и имел имена, сидящие в глобальном пространстве имен. Каждый элемент имеет свой собственный HTML-файл, который я импортирую, когда мне нужно создать элемент. Основной HTML-файл будет выглядеть следующим образом:

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

Это указывает на следующий файл JS:

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

Polymer(helloWorldPrototype); 

Я получил другие пользовательские элементы, которые я тогда хотел, чтобы использовать прототип этого веб-компонент в качестве базы, которую я выполняю с использованием атрибута «поведения», который предоставляет 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. Как я могу избежать размещения прототипов для моих пользовательских элементов в глобальном пространстве имен, но все же предоставить им доступ друг к другу для целей наследования?

Answer 1

Если вы хотите обмениваться объектами в разных файлах JavaScript, вам понадобится хотя бы одна глобальная ссылка object. Внутри вы можете добавить (как attributes) ресурсы, которые вы хотите разделить.

Для Exemple, вы можете определить объект с именем 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)