JavaScript에서 네임스페이스를 선언하려면 어떻게 해야 합니까?
내 개체와 함수가 이름이 같은 다른 개체와 함수에 의해 덮어쓰이지 않도록 JavaScript에서 네임스페이스를 만들려면 어떻게 해야 합니까?다음을 사용했습니다.
if (Foo == null || typeof(Foo) != "object") { var Foo = new Object();}
좀 더 우아하거나 간결한 방법이 있을까요?
Enterprise jQuery 사이트에서 찾을 수 있는 접근 방식을 사용합니다.
다음은 개인 및 공공 재산과 기능을 선언하는 예를 제시하겠습니다.모든 것은 스스로 실행하는 익명 기능으로 수행됩니다.
(function( skillet, $, undefined ) {
//Private Property
var isHot = true;
//Public Property
skillet.ingredient = "Bacon Strips";
//Public Method
skillet.fry = function() {
var oliveOil;
addItem( "\t\n Butter \n\t" );
addItem( oliveOil );
console.log( "Frying " + skillet.ingredient );
};
//Private Method
function addItem( item ) {
if ( item !== undefined ) {
console.log( "Adding " + $.trim(item) );
}
}
}( window.skillet = window.skillet || {}, jQuery ));
중 는, 「 」로 액세스 해 주세요.skillet.fry() ★★★★★★★★★★★★★★★★★」skillet.ingredients.
정말 멋진 점은 동일한 구문을 사용하여 네임스페이스를 확장할 수 있다는 것입니다.
//Adding new Functionality to the skillet
(function( skillet, $, undefined ) {
//Private Property
var amountOfGrease = "1 Cup";
//Public Method
skillet.toString = function() {
console.log( skillet.quantity + " " +
skillet.ingredient + " & " +
amountOfGrease + " of Grease" );
console.log( isHot ? "Hot" : "Cold" );
};
}( window.skillet = window.skillet || {}, jQuery ));
번째 ★★★★★★★★★★★★★★.undefined가 바뀌다
번째, ㅇㅇㅇㅇㅇㅇㅇ.
undefined는 값 입니다.undefined만, 구5.8.5 ~fox 4 동안, 스코프 변수 「」, 「javascript 1」(ecmas 5), 「javascript 1」(ecmascript 5undefined쓰기 가능하기 때문에 누구나 값을 다시 쓸 수 있습니다. 인수되지 않은 는 변수 인 값값값값(이러다)를 .undefined네임스페이스/함수로 범위가 지정됩니다.작성 시은 "Default" 입니다.undefined.
마음에 들어요.
var yourNamespace = {
foo: function() {
},
bar: function() {
}
};
...
yourNamespace.foo();
오브젝트 리터럴 형식보다 조금 덜 제한적이라고 생각되는 또 다른 방법은 다음과 같습니다.
var ns = new function() {
var internalFunction = function() {
};
this.publicFunction = function() {
};
};
위의 내용은 모듈 패턴과 거의 비슷하며, 좋든 싫든 간에 객체 리터럴의 견고한 구조를 피하면서 모든 기능을 공개합니다.
좀 더 우아하거나 간결한 방법이 있을까요?
예. 예:
var your_namespace = your_namespace || {};
그럼 넌 가질 수 있다.
var your_namespace = your_namespace || {};
your_namespace.Foo = {toAlert:'test'};
your_namespace.Bar = function(arg)
{
alert(arg);
};
with(your_namespace)
{
Bar(Foo.toAlert);
}
저는 보통 폐쇄형으로 만듭니다.
var MYNS = MYNS || {};
MYNS.subns = (function() {
function privateMethod() {
// Do private stuff, or build internal.
return "Message";
}
return {
someProperty: 'prop value',
publicMethod: function() {
return privateMethod() + " stuff";
}
};
})();
이 글을 쓴 이후 몇 년 동안 내 스타일은 조금씩 바뀌었고, 나는 지금 이렇게 결말을 쓰고 있다.
var MYNS = MYNS || {};
MYNS.subns = (function() {
var internalState = "Message";
var privateMethod = function() {
// Do private stuff, or build internal.
return internalState;
};
var publicMethod = function() {
return privateMethod() + " stuff";
};
return {
someProperty: 'prop value',
publicMethod: publicMethod
};
})();
이렇게 하면 퍼블릭 API와 구현을 이해하기 쉬워집니다.return 스테이트먼트는 구현에 대한 퍼블릭인터페이스라고 생각하시면 됩니다
JavaScript의 다른 파일을 쓰고 나중에 응용 프로그램에서 결합하거나 결합하지 않을 수 있기 때문에 각 파일은 다른 파일의 작업을 손상시키지 않고 네임스페이스 개체를 복구하거나 구성할 수 있어야 합니다.
의 파일에서는 네임스페이스를 할 수 .namespace.namespace1:
namespace = window.namespace || {};
namespace.namespace1 = namespace.namespace1 || {};
namespace.namespace1.doSomeThing = function(){}
에서는 네임스페이스를 할 수 .namespace.namespace2:
namespace = window.namespace || {};
namespace.namespace2 = namespace.namespace2 || {};
namespace.namespace2.doSomeThing = function(){}
이 2개의 파일은 충돌하지 않고 공존하거나 분리할 수 있습니다.
Stoyan Stephanov의 JavaScript Patterns 책에는 다음과 같이 기재되어 있습니다(또한 Stoyan Stephanov는 API 자동 생성 문서를 허용하는 코멘트를 어떻게 하는지, 커스텀 오브젝트의 프로토타입에 메서드를 추가하는 방법도 기재되어 있습니다).
/**
* My JavaScript application
*
* @module myapp
*/
/** @namespace Namespace for MYAPP classes and functions. */
var MYAPP = MYAPP || {};
/**
* A maths utility
* @namespace MYAPP
* @class math_stuff
*/
MYAPP.math_stuff = {
/**
* Sums two numbers
*
* @method sum
* @param {Number} a First number
* @param {Number} b Second number
* @return {Number} Sum of the inputs
*/
sum: function (a, b) {
return a + b;
},
/**
* Multiplies two numbers
*
* @method multi
* @param {Number} a First number
* @param {Number} b Second number
* @return {Number} The inputs multiplied
*/
multi: function (a, b) {
return a * b;
}
};
/**
* Constructs Person objects
* @class Person
* @constructor
* @namespace MYAPP
* @param {String} First name
* @param {String} Last name
*/
MYAPP.Person = function (first, last) {
/**
* First name of the Person
* @property first_name
* @type String
*/
this.first_name = first;
/**
* Last name of the Person
* @property last_name
* @type String
*/
this.last_name = last;
};
/**
* Return Person's full name
*
* @method getName
* @return {String} First name + last name
*/
MYAPP.Person.prototype.getName = function () {
return this.first_name + ' ' + this.last_name;
};
다음과 같은 접근방식을 사용합니다.
var myNamespace = {}
myNamespace._construct = function()
{
var staticVariable = "This is available to all functions created here"
function MyClass()
{
// Depending on the class, we may build all the classes here
this.publicMethod = function()
{
//Do stuff
}
}
// Alternatively, we may use a prototype.
MyClass.prototype.altPublicMethod = function()
{
//Do stuff
}
function privateStuff()
{
}
function publicStuff()
{
// Code that may call other public and private functions
}
// List of things to place publically
this.publicStuff = publicStuff
this.MyClass = MyClass
}
myNamespace._construct()
// The following may or may not be in another file
myNamespace.subName = {}
myNamespace.subName._construct = function()
{
// Build namespace
}
myNamespace.subName._construct()
외부 코드는 다음과 같습니다.
var myClass = new myNamespace.MyClass();
var myOtherClass = new myNamepace.subName.SomeOtherClass();
myNamespace.subName.publicOtherStuff(someParameter);
사용자 106826의 Namespace.js 링크에 대한 후속 조치입니다.프로젝트가 GitHub로 넘어간 것 같습니다.이제 smith/namesledots가 되었습니다.
저는 이 간단한 JavaScript 도우미를 작은 프로젝트에 사용해 왔습니다.지금까지 네임스페이스와 모듈/클래스를 처리할 수 있을 만큼 가볍지만 다재다능한 것 같습니다.글로벌 네임스페이스뿐만 아니라 선택한 네임스페이스로 패키지를 Import할 수 있으면 좋겠습니다.한숨을 내쉬지만, 그건 중요한게 아니에요.
이 네임스페이스를 선언하고 해당 네임스페이스에서 개체/모듈을 정의할 수 있습니다.
Namespace('my.awesome.package');
my.awesome.package.WildClass = {};
다른 옵션은 네임스페이스와 그 내용을 한 번에 선언하는 것입니다.
Namespace('my.awesome.package', {
SuperDuperClass: {
saveTheDay: function() {
alert('You are welcome.');
}
}
});
사용 예에 대한 자세한 내용은 소스의 example.js 파일을 참조하십시오.
샘플:
var namespace = {};
namespace.module1 = (function(){
var self = {};
self.initialized = false;
self.init = function(){
setTimeout(self.onTimeout, 1000)
};
self.onTimeout = function(){
alert('onTimeout')
self.initialized = true;
};
self.init(); /* If it needs to auto-initialize, */
/* You can also call 'namespace.module1.init();' from outside the module. */
return self;
})()
할 수 .local 「」,same,맘에 들다selflocal.onTimeout적인면면면면면면면면면
모듈 패턴은 원래 기존 소프트웨어 엔지니어링 클래스에 프라이빗 캡슐화와 퍼블릭 캡슐화를 모두 제공하는 방법으로 정의되었습니다.
모듈 패턴을 사용할 때는 처음에 사용하는 단순한 템플릿을 정의하는 것이 도움이 될 수 있습니다.여기 이름 간격, 공개 변수 및 개인 변수를 다룹니다.
JavaScript에서 Module 패턴은 퍼블릭/프라이빗 메서드와 변수를 모두 단일 오브젝트 내에 포함할 수 있도록 클래스의 개념을 더욱 에뮬레이트하기 위해 사용됩니다.이것에 의해, 글로벌 스코프로부터 특정의 부분을 보호할 수 있습니다.그 결과, 페이지의 추가 스크립트에 정의되어 있는 다른 함수와 함수명이 경합할 가능성이 낮아집니다.
var myNamespace = (function () {
var myPrivateVar, myPrivateMethod;
// A private counter variable
myPrivateVar = 0;
// A private function which logs any arguments
myPrivateMethod = function( foo ) {
console.log( foo );
};
return {
// A public variable
myPublicVar: "foo",
// A public function utilizing privates
myPublicFunction: function( bar ) {
// Increment our private counter
myPrivateVar++;
// Call our private method using bar
myPrivateMethod( bar );
}
};
})();
이점
모듈 패턴이 적합한 이유는 무엇입니까?우선 오브젝트 지향의 배경에서 온 개발자들에게는 적어도 JavaScript의 관점에서 진정한 캡슐화의 개념보다 훨씬 더 깔끔하다.
둘째, 개인 데이터를 지원하므로 모듈 패턴에서는 코드의 공용 부분이 개인 부분을 터치할 수 있지만 외부에서는 클래스의 개인 부분을 터치할 수 없습니다.
단점들
모듈 패턴의 단점은 퍼블릭멤버와 프라이빗멤버 모두 접근 방법이 다르기 때문에 가시성을 변경하려면 실제로 멤버를 사용한 각 장소를 변경해야 한다는 것입니다.
또한 나중에 개체에 추가된 메서드에서는 개인 구성원에 액세스할 수 없습니다.단, 대부분의 경우 모듈 패턴은 여전히 매우 유용하며 올바르게 사용되면 응용 프로그램의 구조를 개선할 수 있습니다.
모듈 패턴 공개
모듈 패턴에 조금 더 익숙해졌으므로 Christian Heilmann의 노출 모듈 패턴에 대해 살펴보겠습니다.
공개 모듈 패턴은 Heilmann이 다른 공개 메서드를 호출하거나 공개 변수에 액세스하고 싶을 때 주요 오브젝트의 이름을 반복해야 한다는 사실에 좌절함에 따라 생겨났습니다.그는 또한 공개하고자 하는 사물에 대해 객체 문자 표기법으로 전환해야 하는 모듈 패턴의 요구 사항을 싫어했습니다.
그의 노력의 결과는 프라이빗 스코프의 모든 기능과 변수를 간단히 정의하고 공개하고 싶은 프라이빗 기능에 대한 포인터가 포함된 익명의 오브젝트를 반환하는 업데이트된 패턴이었습니다.
노출 모듈 패턴의 사용 예는 다음과 같습니다.
var myRevealingModule = (function () {
var privateVar = "Ben Cherry",
publicVar = "Hey there!";
function privateFunction() {
console.log( "Name:" + privateVar );
}
function publicSetName( strName ) {
privateVar = strName;
}
function publicGetName() {
privateFunction();
}
// Reveal public pointers to
// private functions and properties
return {
setName: publicSetName,
greeting: publicVar,
getName: publicGetName
};
})();
myRevealingModule.setName( "Paul Kinlan" );
이점
이 패턴을 사용하면 스크립트의 구문을 보다 일관되게 할 수 있습니다.또한 모듈 끝부분에서 어떤 기능과 변수에 공개적으로 액세스할 수 있는지 더 명확하게 알 수 있으므로 가독성이 향상됩니다.
단점들
이 패턴의 단점은 프라이빗 기능이 퍼블릭 기능을 참조하는 경우 패치가 필요한 경우 해당 퍼블릭 기능을 덮어쓸 수 없다는 것입니다.이는 프라이빗 기능이 프라이빗 구현을 계속 참조하고 퍼블릭 멤버에게는 적용되지 않고 기능에만 적용되기 때문입니다.
개인 변수를 참조하는 퍼블릭오브젝트 멤버도 위의 패치 없음 규칙 주의사항이 적용됩니다.
프라이빗 스코프가 필요한 경우:
var yourNamespace = (function() {
//Private property
var publicScope = {};
//Private property
var privateProperty = "aaa";
//Public property
publicScope.publicProperty = "bbb";
//Public method
publicScope.publicMethod = function() {
this.privateMethod();
};
//Private method
function privateMethod() {
console.log(this.privateProperty);
}
//Return only the public parts
return publicScope;
}());
yourNamespace.publicMethod();
그렇지 않으면 개인 스코프를 사용하지 않을 경우:
var yourNamespace = {};
yourNamespace.publicMethod = function() {
// Do something...
};
yourNamespace.publicMethod2 = function() {
// Do something...
};
yourNamespace.publicMethod();
단순한 함수를 선언하여 네임스페이스를 제공할 수 있습니다.
function namespace(namespace) {
var object = this, tokens = namespace.split("."), token;
while (tokens.length > 0) {
token = tokens.shift();
if (typeof object[token] === "undefined") {
object[token] = {};
}
object = object[token];
}
return object;
}
// Usage example
namespace("foo.bar").baz = "I'm a value!";
파티에 7년이나 늦었지만, 8년 전에 꽤 많은 일을 했어요.
- http://blogger.ziesemer.com/2008/05/javascript-namespace-function.html
- http://blogger.ziesemer.com/2007/10/respecting-javascript-global-namespace.html
복잡한 웹 애플리케이션을 정리하고 관리하기 쉽게 하기 위해 여러 개의 중첩된 네임스페이스를 쉽고 효율적으로 작성할 수 있는 동시에 JavaScript 글로벌 네임스페이스를 존중하고(네임스페이스 오염을 방지하며), 네임스페이스 경로의 기존 개체를 닫지 않도록 하는 것이 중요합니다.
이상으로부터, 2008년 경의 솔루션을 소개했습니다.
var namespace = function(name, separator, container){
var ns = name.split(separator || '.'),
o = container || window,
i,
len;
for(i = 0, len = ns.length; i < len; i++){
o = o[ns[i]] = o[ns[i]] || {};
}
return o;
};
이것은 네임스페이스를 만드는 것이 아니라 네임스페이스를 만드는 기능을 제공합니다.
이는 최소화된 원라이너로 요약할 수 있습니다.
var namespace=function(c,f,b){var e=c.split(f||"."),g=b||window,d,a;for(d=0,a=e.length;d<a;d++){g=g[e[d]]=g[e[d]]||{}}return g};
사용 예:
namespace("com.example.namespace");
com.example.namespace.test = function(){
alert("In namespaced function.");
};
또는 하나의 문장으로서:
namespace("com.example.namespace").test = function(){
alert("In namespaced function.");
};
다음 중 하나가 실행됩니다.
com.example.namespace.test();
레거시 브라우저 지원이 필요하지 않은 경우 업데이트된 버전:
const namespace = function(name, separator, container){
var o = container || window;
name.split(separator || '.').forEach(function(x){
o = o[x] = o[x] || {};
});
return o;
};
그럼 이제 , ,, 는, 는, 는, 는, 는, 는, 는, now, now, now, now, now, now, now, now, now, now, now, now, now, now, now, now, now, now, now, nownamespace (기본 언어가 이것을하지 않는다!)그래서 저는 보통 이것을 다음과 같이 마무리 지을 때 사용합니다.
(function(){
const namespace = function(name, separator, container){
var o = container || window;
name.split(separator || '.').forEach(function(x){
o = o[x] = o[x] || {};
});
return o;
};
const ns = namespace("com.ziesemer.myApp");
// Optional:
ns.namespace = ns;
// Further extend, work with ns from here...
}());
console.log("\"com\":", com);대규모 애플리케이션에서는 페이지 로드 시작 시(클라이언트 기반 웹 앱의 경우)에 한 번만 정의하면 됩니다.보관된 경우 추가 파일이 네임스페이스 기능을 재사용할 수 있습니다(위의 "선택 사항"으로 포함).최악의 경우 이 함수가 여러 번 다시 선언되면 코드 몇 줄에 불과하며 최소화된 경우에는 더 적게 선언됩니다.
저는 Erlang의 모듈에서 영감을 얻은 네임스페이스를 만들었습니다.이것은 매우 기능적인 접근법이지만, 요즘은 그렇게 자바스크립트 코드를 쓰고 있습니다.
폐쇄에 전역 네임스페이스를 제공하고 해당 폐쇄 내에 정의된 집합 함수를 표시합니다.
(function(){
namespace("images", previous, next);
// ^^ This creates or finds a root object, images, and binds the two functions to it.
// It works even though those functions are not yet defined.
function previous(){ ... }
function next(){ ... }
function find(){ ... } // A private function
})();
여러 라이브러리를 다른 프로젝트로 이식하고 상위 수준(정적으로 이름이 지정된) 네임스페이스를 계속 변경해야 했던 후 이 작은(오픈 소스) 도우미 기능을 사용하여 네임스페이스를 정의하는 것으로 전환했습니다.
global_namespace.Define('startpad.base', function(ns) {
var Other = ns.Import('startpad.other');
....
});
이점에 대한 설명은 제 블로그 포스트에 있습니다.여기서 소스코드를 잡을 수 있습니다.
제가 정말 좋아하는 장점 중 하나는 로드 순서와 관련하여 모듈 간의 분리입니다.외부 모듈을 로드하기 전에 참조할 수 있습니다.그리고 코드를 사용할 수 있게 되면 오브젝트 레퍼런스가 입력됩니다.
네임스페이스에는 다음 구문을 사용합니다.
var MYNamespace = MYNamespace|| {};
MYNamespace.MyFirstClass = function (val) {
this.value = val;
this.getValue = function(){
return this.value;
};
}
var myFirstInstance = new MYNamespace.MyFirstClass(46);
alert(myFirstInstance.getValue());
jsfiddle:http://jsfiddle.net/rpaul/4dngxwb3/1/
그런 간단한 문제에는 다들 너무 많은 코드를 사용하는 것 같아요.그건 보고할 필요 없어여기 한 줄의 함수가 있습니다.
namespace => namespace.split(".").reduce((last, next) => (last[next] = (last[next] || {})), window);
시험해 보세요:
// --- definition ---
const namespace = name => name.split(".").reduce((last, next) => (last[next] = (last[next] || {})), window);
// --- Use ----
const c = namespace("a.b.c");
c.MyClass = class MyClass {};
// --- see ----
console.log("a : ", a);// circle.js
export { name, draw, reportArea, reportPerimeter };
// main.js
import * as Circle from './modules/circle.js';
// draw a circle
let circle1 = Circle.draw(myCanvas.ctx, 75, 200, 100, 'green');
Circle.reportArea(circle1.radius, reportList);
Circle.reportPerimeter(circle1.radius, reportList);
circle내에서 circle.js의 할 수 있게 .Circle는, 사실상 독자적인 네임스페이스를 제공합니다.
최근 가장 좋아하는 패턴이 되었습니다.
var namespace = (function() {
// expose to public
return {
a: internalA,
c: internalC
}
// all private
/**
* Full JSDoc
*/
function internalA() {
// ...
}
/**
* Full JSDoc
*/
function internalB() {
// ...
}
/**
* Full JSDoc
*/
function internalC() {
// ...
}
/**
* Full JSDoc
*/
function internalD() {
// ...
}
})();물론 반환은 마지막에 할 수 있지만 함수 선언만 뒤따른다면 이름공간이 무엇이고 어떤 API가 노출되었는지 훨씬 쉽게 알 수 있습니다.
이러한 경우 함수식을 사용하는 패턴은 코드 전체를 검토하지 않으면 어떤 메서드가 노출되는지 알 수 없게 됩니다.
Jaco Pretorius의 솔루션도 좋지만, 모듈/네임스페이스 오브젝트를 포인팅하여 "this" 키워드를 좀 더 유용하게 만들고 싶었습니다.내 버전의 프라이팬:
(function ($, undefined) {
console.log(this);
}).call(window.myNamespace = window.myNamespace || {}, jQuery);
Make file을 사용하는 경우 이 작업을 수행할 수 있습니다.
// prelude.hjs
billy = new (
function moduleWrapper () {
const exports = this;
// postlude.hjs
return exports;
})();
// someinternalfile.js
function bob () { console.log('hi'); }
exports.bob = bob;
// clientfile.js
billy.bob();
makefile에서 한 줄만 삭제해도 큰 코드 스윗을 효과적으로 코멘트할 수 있기 때문에 1000줄 정도 되면 Makefile을 사용하는 것이 좋습니다.물건을 만지작거리기가 쉬워진다.또한 이 기술을 사용하면 네임스페이스는 전주곡에 한 번만 표시되므로 변경하기 쉽고 라이브러리 코드 내에서 계속 반복할 필요가 없습니다.
makefile 사용 시 브라우저에서 라이브 개발을 위한 셸 스크립트:
while (true); do make; sleep 1; done
이를 '시작' 태스크로 추가하면 코드 작성 시 빌드를 최신 상태로 유지할 수 있습니다.
이지만, Ionu G. Stan을 사용하여 할 수 있는 .var ClassFirst = this.ClassFirst = function() {...}이는 JavaScript의 폐쇄 범위를 활용하여 동일한 네임스페이스에 있는 클래스에 대해 네임스페이스의 혼란을 줄여줍니다.
var Namespace = new function() {
var ClassFirst = this.ClassFirst = function() {
this.abc = 123;
}
var ClassSecond = this.ClassSecond = function() {
console.log("Cluttered way to access another class in namespace: ", new Namespace.ClassFirst().abc);
console.log("Nicer way to access a class in same namespace: ", new ClassFirst().abc);
}
}
var Namespace2 = new function() {
var ClassFirst = this.ClassFirst = function() {
this.abc = 666;
}
var ClassSecond = this.ClassSecond = function() {
console.log("Cluttered way to access another class in namespace: ", new Namespace2.ClassFirst().abc);
console.log("Nicer way to access a class in same namespace: ", new ClassFirst().abc);
}
}
new Namespace.ClassSecond()
new Namespace2.ClassSecond()
출력:
Cluttered way to access another class in namespace: 123
Nicer way to access a class in same namespace: 123
Cluttered way to access another class in namespace: 666
Nicer way to access a class in same namespace: 666
다른 언어로 패키지/유닛처럼 작동하는 네임스페이스 라이브러리를 작성했습니다.다른 코드에서 JavaScript 코드의 패키지와 해당 패키지를 참조할 수 있습니다.
파일 hello.js
Package("hello", [], function() {
function greeting() {
alert("Hello World!");
}
// Expose function greeting to other packages
Export("greeting", greeting);
});
파일 예.js
Package("example", ["hello"], function(greeting) {
// Greeting is available here
greeting(); // Alerts: "Hello World!"
});
페이지에는 두 번째 파일만 포함하면 됩니다.의존관계(이 예에서는 file hello.js)가 자동으로 로드되고 이러한 의존관계에서 내보낸 객체가 콜백함수의 인수를 입력하기 위해 사용됩니다.
다음과 같은 방법으로 독립적으로 사용할 수 있습니다.
var A = A|| {};
A.B = {};
A.B = {
itemOne: null,
itemTwo: null,
};
A.B.itemOne = function () {
//..
}
A.B.itemTwo = function () {
//..
}
JavaScript에는 네임스페이스를 사용하는 미리 정의된 메서드가 없습니다.JavaScript에서는 네임스페이스를 정의하는 독자적인 메서드를 작성해야 합니다.우들 기술에서 우리가 따르는 절차는 다음과 같습니다.
네임스페이스 등록 다음은 네임스페이스를 등록하는 기능입니다.
//Register NameSpaces Function
function registerNS(args){
var nameSpaceParts = args.split(".");
var root = window;
for(var i=0; i < nameSpaceParts.length; i++)
{
if(typeof root[nameSpaceParts[i]] == "undefined")
root[nameSpaceParts[i]] = new Object();
root = root[nameSpaceParts[i]];
}
}
네임스페이스를 등록하려면 위의 함수를 네임스페이스로 구분하여 인수로 호출합니다.'.'(dot). 예를 들어 어플리케이션 이름을 oudles로 합니다.다음 방법으로 네임스페이스를 만들 수 있습니다.
registerNS("oodles.HomeUtilities");
registerNS("oodles.GlobalUtilities");
var $OHU = oodles.HomeUtilities;
var $OGU = oodles.GlobalUtilities;
기본적으로 백엔드에 다음과 같은 네임스페이스 구조가 생성됩니다.
var oodles = {
"HomeUtilities": {},
"GlobalUtilities": {}
};
위의 함수에서는 다음과 같은 네임스페이스를 등록했습니다."oodles.HomeUtilities"그리고."oodles.GlobalUtilities". 이러한 이름 공간을 부르기 위해 변수(예: 변수)를 만듭니다.$OHU및 변수$OGU.
이러한 변수는 네임스페이스 초기화의 별칭에 불과합니다.다음에 속하는 함수를 선언할 때마다HomeUtilities다음과 같이 선언합니다.
$OHU.initialization = function(){
//Your Code Here
};
위는 함수 이름 초기화이며 네임스페이스에 배치됩니다.$OHU스크립트 파일의 임의의 장소에서 이 함수를 호출합니다.다음 코드를 사용합니다.
$OHU.initialization();
마찬가지로 다른 네임스페이스에서도 마찬가지입니다.
도움이 됐으면 좋겠다.
JavaScript에는 아직 네임스페이스 네이티브 표시가 없지만 TypeScript에는 네임스페이스가 있습니다.
예를 들어 다음과 같은 TS 코드(플레이그라운드)를 사용할 수 있습니다.
namespace Stack {
export const hello = () => console.log('hi')
}
Stack.hello()
코드를 TS로 업데이트할 수 없는 경우, 네임스페이스에 대한 JS 출력을 생성할 때 TS에서 사용하는 패턴을 적어도 사용할 수 있습니다. 이 패턴은 다음과 같습니다.
var Stack;
(function (Stack) {
Stack.hello = () => console.log('hi');
})(Stack || (Stack = {}));
Stack.hello();
상세 정보:
myName() 함수를 속성 저장소로 사용하고 myName() 함수를 "method" 홀더로 사용하는 것이 습관입니다.
이게 합법적이든 아니든 날 때려!저는 항상 제 PHP 논리에 의존하고 있고, 모든 것이 간단히 작동합니다. : D
function myObj() {
this.prop1 = 1;
this.prop2 = 2;
this.prop3 = 'string';
}
var myObj = (
(myObj instanceof Function !== false)
? Object.create({
$props: new myObj(),
fName1: function() { /* code.. */ },
fName2: function() { /* code ...*/ }
})
: console.log('Object creation failed!')
);
if (this !== that) myObj.fName1(); else myObj.fName2();
오브젝트를 작성하기 전에 '반대'로 체크할 수도 있습니다.이 방법은 다음과 같습니다.
function myObj() {
this.prop1 = 1;
this.prop2 = 2;
this.prop3 = 'string';
}
var myObj = (
(typeof(myObj) !== "function" || myObj instanceof Function === false)
? new Boolean()
: Object.create({
$props: new myObj(),
init: function () { return; },
fName1: function() { /* code.. */ },
fName2: function() { /* code ...*/ }
})
);
if (myObj instanceof Boolean) {
Object.freeze(myObj);
console.log('myObj failed!');
debugger;
}
else
myObj.init();
참조: JavaScript: Object.create()를 사용하여 개체를 만듭니다.
JavaScript는 기본적으로 네임스페이스를 지원하지 않습니다.따라서 요소(함수, 메서드, 오브젝트, 변수)를 작성하면 글로벌하게 되어 글로벌 네임스페이스를 오염시킵니다.네임스페이스 없이 2개의 함수를 정의하는 예를 들어보겠습니다.
function func1() {
console.log("This is a first definition");
}
function func1() {
console.log("This is a second definition");
}
func1(); // This is a second definition
항상 두 번째 함수 정의를 호출합니다.이 경우 네임스페이스는 이름 충돌 문제를 해결합니다.
언급URL : https://stackoverflow.com/questions/881515/how-do-i-declare-a-namespace-in-javascript
'programing' 카테고리의 다른 글
| 루트 액세스 없이 python 모듈을 설치하는 방법 (0) | 2022.11.26 |
|---|---|
| Python 스크립트를 실행하지 않고 어떻게 구문을 확인할 수 있습니까? (0) | 2022.11.26 |
| Vue.js 2의 컴포넌트에서 이벤트 청취자에 액세스할 수 있습니까? (0) | 2022.11.26 |
| (function($) {})(jQuery);는 무엇을 의미합니까? (0) | 2022.11.26 |
| API 호출을 통해 vuex에 새 개체를 추가하고 이미지 URL을 저장하는 방법 (0) | 2022.11.26 |