5

他のサイトに埋め込まれた JavaScript ウィジェット (埋め込まれた JS および HTML コードの一部) があります。変数名がホスティング ページの変数と競合しないようにするにはどうすればよいですか?

このウィジェットを iframe ではなく、ホスティング ページと同じページに「インライン化」したいのですが、ホスティング ページとの名前の競合や他のウィジェットとの競合を回避する最善の方法は何ですか?

名前の競合は、いくつかの方法で発生する可能性があります。

  • JavaScript 変数名
  • JavaScript 関数名
  • DOM 要素の識別子
  • CSS クラス名
  • おそらくもっとある...

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

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

2 に答える 2

4

Javascript 名前空間:

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

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

于 2009-03-09T22:43:45.753 に答える
3

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

もちろん、名前空間（var Foo = {bar：function（）{...}}など）と「クラス」（John Resigのクラス実装を使用）も使用しました。ウィジェットがあるかどうかに関係なく使用するためですが、名前空間、クラス、グローバル変数または関数の名前には接頭辞が付いています（例：HMWidget、HMClass、hmDoSomething（）など）。

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

于 2009-03-23T12:46:45.740 に答える