JavaScript 위젯의 이름 충돌을 피하는 방법

Question

다른 사이트에 내장 된 JavaScript 위젯 (임베디드 JS 및 HTML 코드)이 있습니다. 가변 이름이 호스팅 페이지 변수와 충돌하지 않도록하려면 어떻게해야합니까?

이 위젯이 호스팅 페이지와 같은 페이지에서 "인쇄 된"의미가되기를 바랍니다. ~ 아니다 iframe에서 호스팅 페이지와의 이름 충돌을 피하거나 다른 위젯과 충돌하는 가장 좋은 방법은 무엇입니까?

이름 충돌은 여러 가지 방법으로 발생할 수 있습니다.

• JavaScript 변수 이름
• 자바 스크립트 함수 이름
• DOM 요소 식별자
• CSS 클래스 이름
• 아마도 더...

나는 이름 충돌을 피하는 몇 가지 방법을 생각할 수 있지만 모범 사례 또는 기타 일반적인 권장 사항이 있는지 궁금합니다. 그래서 여기 내 2C가 있습니다.

1. 길고 시도하는 이름 만 사용하십시오. 그것은 추악하고 완전하지는 않지만 개념이 간단합니다.
2. iframe을 사용하십시오. 그러나 언급했듯이, 나는 몇 가지 이유로 iframe을 사용하고 싶지 않습니다. 위젯이 페이지에서 스타일 속성 (기본 글꼴 및 배경색)을 상속하기를 원하며 가장 중요한 것은 위젯이 얼마나 큰지 모르겠습니다. 실시간 데이터에 따라 다르며 모든 크기 일 수 있습니다.
3. 더 나은 범위를 위해 익명 함수를 사용하여 (함수 () {내 코드}) () (). 이 솔루션은 우아하지만 여전히 나에게 작동하지 않지만 먼저 B/C는 먼저 작동하지 않지만 JS 이름은 충돌하지만 Dom ID 또는 CSS 클래스 이름은 해결되지 않으며 두 번째는 콜백 기능을 제공 해야하는 JSONP를 사용합니다. 결국 글로벌 범위에 있어야하는 이름은 익명의 함수 범위에 중첩 될 수 없습니다.
4. JS 변수와 기능의 독창성을 제공하는 JavaScript에서 네임 스페이스 메커니즘을 만듭니다. 스타일 창의 무언가 [ 'my_app'] [variable_name] 또는 창 [ 'my_app'] function_name. 그것은 약간 추악하지만, 적어도 네임 스페이스를 제어 할 수 있으며 고유 한 네임 스페이스가 될 수 있습니다.

Answer 1

자바 스크립트 네임 스페이스 :

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

Yui와 같은 여러 JavaScript 프레임 워크/라이브러리에 크게 사용됩니다.http://developer.yahoo.com/yui/yahoo/

Answer 2

이전 프로젝트에는 다른 사이트에 포함 된 위젯이 있었고 이름 충돌을 방지하기 위해 임베딩 사이트에서 사용될 모든 이름을 두 개의 글자 접두사로 접두사했습니다 (모든 클래스가 시작되는 Objective C의 아이디어를 얻었습니다. NS와 같은 접두사로 ...).

물론 나는 또한 네임 스페이스 (예 : var foo = {bar : function () {...}}) 및 "클래스"(John Resig의 클래스 구현 사용)를 사용했습니다. 위젯이 있든 없든 관계없이 사용하기 때문입니다. 네임 스페이스, 클래스 및 글로벌 변수 또는 함수의 이름은 접두사 - 예를 들어 hmwidget, hmclass, hmdosomething () 등.

DOM ID 및 CSS 클래스와 관련하여 - 먼저 동일한 사이트에서 서비스에서 여러 위젯을 가질 가능성 때문에 대부분의 ID를 제거해야했습니다. 따라서 남은 유일한 ID는 위젯을 구별하기 위해 "Widget_12345"와 같은 것입니다. 나머지 요소는 CSS 클래스에 의해 식별되었으며 모든 CSS 선언은 기본 위젯 컨테이너 (예 : ".my_widget .left_column"이 대신 ".left_column")와 관련하여 수행되었습니다.