1. ホーム
  2. 質問と答え
  3. JavaScriptウィジェットで名前の衝突を避ける方法

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

2009-03-09 22 views
5

他のサイトに埋め込まれたJavaScriptウィジェット（埋め込まれたJSとHTMLコード）があります。変数名がホスティングページ変数と衝突しないようにするにはどうすればよいですか？JavaScriptウィジェットで名前の衝突を避ける方法

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

名前の衝突は、いくつかの方法で発生します

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

私はいくつかの方法を考えることができますoidの名前の衝突が、ベストプラクティスか他の一般的な推奨があるかどうか疑問に思っていました。 私の2cはここにあります：

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

出典

2009-03-09 Ran

答えて

3

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

私はウィジェットを持っているかどうかにかかわらず、私はそれらを使用するので、私はもちろん、var Foo = {bar：function（）{}}）と "classes"（John Resigのクラス実装を使用）そうではないが、名前空間、クラス、グローバル変数や関数の名前に接頭辞が付きます。 HMWidget、HMClass、hmDoSomething（）など

DOM IDとCSSクラスに関しては、まず、同じサイトのサービスから複数のウィジェットを持つ可能性があるため、ほとんどのIDを取り除かなければなりませんでした。だから残っていた唯一のIDは、ウィジェットを区別するために "widget_12345"のようなものでした。残りの要素はCSSクラスで識別され、すべてのCSS宣言はメインウィジェットコンテナ（「.left_column」ではなく「.my_widget .left_column」など）に対して行われました。

出典

2009-03-23 12:46:45

関連する問題

 関連する問題