2016-03-24 4 views
0

私は、私が取り組んでいるアプリケーションで定義された多数のカスタム要素を持っています。今、私は要素のプロトタイプを作成し、名前をグローバル名前空間に置いています。各要素には、その要素を作成する必要があるときにインポートする独自のHTMLファイルがあります。基本的なHTMLファイルには、次のようになります。プロトタイプをグローバル名前空間に入力させずにWebコンポーネント間の依存関係を維持するにはどうすればよいですか?

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

これは、次のjsファイルを指す:私は他のカスタム要素を持っている

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

Polymer(helloWorldPrototype); 

私は、その後の使用にこののプロトタイプを持っていると思います私はPolymerが提供する 'behaviors'属性を使用して達成しています。私の第二の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に利用可能であることではありません。カスタム要素のプロトタイプをグローバル名前空間に配置することを避けることができますが、引き続き継承の目的で相互にアクセスできますか?

答えて

1

異なるJavaScriptファイル間でオブジェクトを共有する場合は、少なくとも1つのグローバル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) 
関連する問題