JavaScript에서 네임스페이스를 지정하는 "간결한" 방법이 있나요?

StackOverflow https://stackoverflow.com/questions/13021

  •  08-06-2019
  •  | 
  •  

문제

나는 모든 JavaScript를 namespace 다음과 같은 구조를 따릅니다.

namespaces = { com : { example: { example.com's data} }

그러나 다른 네임스페이스 프레임워크와 관련하여 이를 안전하게 설정하려면 상대적으로 많은 양의 코드(2줄 이상으로 정의됨)가 필요한 것 같습니다.이 작업을 수행하는 간결한 방법을 아는 사람이 있는지 궁금합니다.또한 이를 구성하는 상대적으로 표준적이고 일관된 방법이 있습니까?예를 들어, com 전역 개체에 직접 연결된 네임스페이스입니까, 아니면 네임스페이스 개체를 통해 첨부됩니까?

[편집하다:으윽, 분명 {com = { ... } } 제가 의도한 것과 가까운 결과를 얻지는 못할 것입니다. 이를 지적한 Shog9에게 감사드립니다.]

도움이 되었습니까?

해결책

Javascript에는 독립 실행형 네임스페이스가 없습니다.여기에는 이름 확인을 위한 범위를 제공할 수 있는 기능과 지정된 범위에서 액세스할 수 있는 명명된 데이터에 기여할 수 있는 개체가 있습니다.

수정된 예는 다음과 같습니다.

var namespaces = { com: { example: { /* example.com's data */ } } }

이는 변수입니다. namespaces 객체 리터럴이 할당됩니다.객체에는 하나의 속성이 포함되어 있습니다. com, 하나의 속성을 가진 객체: example, 아마도 흥미로운 내용을 담고 있을 것으로 추정되는 개체입니다.

따라서 다음과 같이 입력할 수 있습니다. 네임스페이스.com.example.somePropertyOrFunctionOnExample 그러면 다 작동할 거예요.물론 말도 안되는 일이기도 합니다.계층적 네임스페이스가 없고 실제로 관심 있는 항목이 포함된 개체를 포함하는 개체가 있습니다.

var com_example_data = { /* example.com's data */ };

무의미한 계층 구조 없이도 잘 작동합니다.

지금, 만약 당신이 실제로 원하다 계층 구조를 구축하려면 다음과 같이 시도해 보세요.

com_example = com_example || {};
com_example.flags = com_example.flags || { active: false, restricted: true};

com_example.ops = com_example.ops || (function()
    {
       var launchCodes = "38925491753824"; // hidden / private
       return {
         activate: function() { /* ... */ },
         destroyTheWorld: function() { /* ... */ }
       };
    })();

...IMHO, 합리적으로 간결합니다.

다른 팁

여기에 Peter Michaux의 흥미로운 기사가 ​​있습니다. 자바스크립트 네임스페이스.그는 Javascript 네임스페이스의 3가지 유형에 대해 설명합니다.

  1. 접두사 네임스페이스
  2. 단일 객체 네임스페이스
  3. 중첩된 객체 네임스페이스

나는 그가 여기서 말한 내용을 표절하지는 않겠지만 그의 기사는 매우 유익하다고 생각합니다.

Peter는 심지어 그들 중 일부에는 성능 고려 사항이 있음을 지적하기까지 했습니다.새로운 ECMAScript Harmony 계획이 네임스페이스 및 패키징에 대한 4.0 계획을 삭제했다는 점을 고려하면 이 주제에 대해 이야기하는 것이 흥미로울 것이라고 생각합니다.

나는 모든 것을 포함하기 위해 전역 범위에 단일 상위 개체를 만드는 Yahoo 규칙을 따르려고 노력합니다.

var FP = {};
FP.module = {};
FP.module.property = 'foo';

기존 객체를 덮어쓰지 않으려면 다음과 같이 해야 합니다.

if(!window.NameSpace) {
    NameSpace = {};
}

또는

var NameSpace = window.NameSpace || {};

이렇게 하면 네임스페이스 개체를 덮어쓰는 것에 대한 걱정 없이 애플리케이션/웹 사이트의 모든 파일 상단에 이를 넣을 수 있습니다.또한 이를 통해 각 파일에 대한 단위 테스트를 개별적으로 작성할 수 있습니다.

그만큼 유이도서관 라이브러리에는 선호할 수 있는 함수를 사용하여 네임스페이스를 처리하는 코드가 있습니다.다른 라이브러리도 이 작업을 수행할 수 있습니다.

점이나 밑줄 대신 달러 기호 문자를 사용할 수 있습니다.

var namespaces$com$example = "data";

나도 이거 좋아해(원천):

(function() {
    var a = 'Invisible outside of anonymous function';
    function invisibleOutside() {
    }

    function visibleOutside() {
    }
    window.visibleOutside = visibleOutside;

    var html = '--INSIDE Anonymous--';
    html += '<br/> typeof invisibleOutside: ' + typeof invisibleOutside;
    html += '<br/> typeof visibleOutside: ' + typeof visibleOutside;
    contentDiv.innerHTML = html + '<br/><br/>';
})();

var html = '--OUTSIDE Anonymous--';
html += '<br/> typeof invisibleOutside: ' + typeof invisibleOutside;
html += '<br/> typeof visibleOutside: ' + typeof visibleOutside;
contentDiv.innerHTML += html + '<br/>';​

객체 리터럴을 사용하고 다음 중 하나를 사용합니다. this 함수를 포함하는 지역 변수의 형제 속성을 기반으로 네임스페이스를 지정하기 위한 객체 또는 명시적인 이름입니다.예를 들어:

var foo = { bar: function(){return this.name; }, name: "rodimus" }
var baz = { bar: function(){return this.name; }, name: "optimus" }

console.log(foo.bar());
console.log(baz.bar());

아니면 명시적인 설명 없이 name 재산:

var foo = { bar: function rodimus(){return this; } }
var baz = { bar: function optimus(){return this; } }

console.log(foo.bar.name);
console.log(baz.bar.name);

아니면 사용하지 않고 this:

var foo = { bar: function rodimus(){return rodimus; } }
var baz = { bar: function optimus(){return optimus; } }

console.log(foo.bar.name);
console.log(baz.bar.name);

사용 RegExp 또는 Object 카운터 변수 및 기타 일반 이름에 이름 속성을 추가하는 생성자 함수 hasOwnProperty 확인을 위한 테스트:

 var foo = RegExp(/bar/);
 
/* Add property */
foo.name = "alpha";

document.body.innerHTML = String("<pre>" + ["name", "value", "namespace"] + "</pre>").replace(/,/g, "&#09;");

/* Check type */
if (foo.hasOwnProperty("name")) 
  {
  document.body.innerHTML += String("<pre>" + ["foo", String(foo.exec(foo)), foo.name] + "</pre>").replace(/,/g, "&#09;");
  }

/* Fallback to atomic value */
else 
  {
  foo = "baz";
  }

var counter = Object(1);

/* Add property */
counter.name = "beta";

if (counter.hasOwnProperty("name")) 
  {
  document.body.innerHTML += String("<pre>" + ["counter", Number(counter), counter.name] + "</pre>").replace(/,/g, "&#09;");
  } 
else 
  {
  /* Fallback to atomic value */
  counter = 0;
  }

DOM은 다음 규칙을 사용하여 HTML 및 SVG 요소 인터페이스 정의에 이름을 붙입니다.

  • HTML제목요소
  • SVG제목 요소
  • SVG스크립트 요소
  • HTML스크립트요소

JavaScript 코어는 프로토타입을 사용하여 toString 다형성의 간단한 형태로서의 방법.

참고자료

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top