JavaScriptウィジェットで名前の衝突を回避する方法

Question

他のサイトに埋め込まれているJavaScriptウィジェット（組み込みのJSおよびHTMLコード）があります。変数名がホストページ変数と衝突しないようにするにはどうすればよいですか？

このウィジェットを「インライン」にしたいホスティングページと同じページで、iframeではない を意味します。ホスティングページとの名前の衝突や他のウィジェットとの衝突を避けるための最良の方法は何ですか？

名前の衝突はいくつかの方法で発生する可能性があります：

• JavaScript変数名
• JavaScript関数名
• DOM要素の識別子
• CSSクラス名
• 多分もっと...

名前の衝突を避ける方法はいくつか考えられますが、ベストプラクティスやその他の一般的な推奨事項があるかどうか疑問に思いました。 ここに私の2cがあります：

1. 長い一意の名前を使用してください。それは見苦しくて完全な証明ではありませんが、概念は単純です。
2. iframeを使用します。しかし、述べたように、私はいくつかの理由でiframeを使いたくありません。ウィジェットがページからスタイル属性（デフォルトのフォントや背景色など）を継承するようにしたいのですが、最も重要なのは、ウィジェットの大きさがわからないことです。リアルタイムデータに依存し、サイズは任意です。
3. スコープを改善するには、匿名関数を使用します。 （function（）{my code here}）（）。このソリューションはエレガントですが、最初はb / cでは機能しませんが、衝突したJS名のみを解決しますが、DOM IDのものやCSSクラス名は解決しません.2つ目は、コールバック関数を提供する必要があるjsonpも使用最終的にはグローバルスコープ内にある必要があるため、匿名関数スコープにネストすることはできません。
4. JavaScriptで名前空間メカニズムを作成し、JS変数と関数の一意性を提供します。スタイルwindow ['my_app'] [variable_name]またはwindow ['my_app'] function_nameのスタイル。それも少しいですが、少なくとも名前空間を制御でき、一意の名前空間であることが保証されます。

Answer 1

Javascript名前空間：

http://www.codeproject.com/KB/scripting/jsnamespaces.aspx

YUIなど、いくつかのjavascriptフレームワーク/ライブラリで頻繁に使用されます。 http://developer.yahoo.com/yui/yahoo/

Answer 2

以前のプロジェクトでは、他のサイトに埋め込まれたウィジェットがあり、名前の競合を防ぐために、埋め込みサイトで使用されるすべての名前の前に2文字のプレフィックスを付けました（Objective Cからアイデアを得ました。すべてのクラスはNS ...）のようなプレフィックスで始まります。

もちろん名前空間も使用しました（例：var Foo = {bar：function（）{...}}）および＆quot; classes＆quot; （John Resigのクラス実装を使用）、ウィジェットを持っているかどうかに関係なくそれらを使用しますが、名前空間、クラス、グローバル変数または関数の名前には接頭辞が付けられています-例えばHMWidget、HMClass、hmDoSomething（）など

DOM IDとCSSクラスについて-最初に、同じサイト上の私のサービスから複数のウィジェットを持つ可能性があるため、ほとんどのIDを削除する必要がありました。したがって、残ったIDは「widget_12345」のようなものだけでした。ウィジェットを区別するため。残りの要素はCSSクラスによって識別され、すべてのCSS宣言はメインウィジェットコンテナに関連して行われました（例：＆quot; .left_column＆quot;の代わりに＆quot; .my_widget .left_column＆quot;）。