JavaScript에서 네임스페이스를 지정하는 "간결한" 방법이 있나요?
-
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가지 유형에 대해 설명합니다.
- 접두사 네임스페이스
- 단일 객체 네임스페이스
- 중첩된 객체 네임스페이스
나는 그가 여기서 말한 내용을 표절하지는 않겠지만 그의 기사는 매우 유익하다고 생각합니다.
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, "	");
/* Check type */
if (foo.hasOwnProperty("name"))
{
document.body.innerHTML += String("<pre>" + ["foo", String(foo.exec(foo)), foo.name] + "</pre>").replace(/,/g, "	");
}
/* 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, "	");
}
else
{
/* Fallback to atomic value */
counter = 0;
}
DOM은 다음 규칙을 사용하여 HTML 및 SVG 요소 인터페이스 정의에 이름을 붙입니다.
- HTML제목요소
- SVG제목 요소
- SVG스크립트 요소
- HTML스크립트요소
JavaScript 코어는 프로토타입을 사용하여 toString
다형성의 간단한 형태로서의 방법.
참고자료