Programing

JavaScript에서 네임 스페이스를 어떻게 선언합니까?

lottogame 2020. 9. 28. 07:53
반응형

JavaScript에서 네임 스페이스를 어떻게 선언합니까?


객체와 함수가 같은 이름의 다른 객체와 함수로 덮어 쓰이지 않도록 JavaScript에서 네임 스페이스를 만들려면 어떻게해야합니까? 다음을 사용했습니다.

if (Foo == null || typeof(Foo) != "object") { var Foo = new Object();}

더 우아하거나 간결한 방법이 있습니까?


나는 이것을 좋아한다 :

var yourNamespace = {

    foo: function() {
    },

    bar: function() {
    }
};

...

yourNamespace.foo();

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인수는 value 변수의 소스입니다 undefined. 오늘날에도 여전히 관련성이 있는지는 잘 모르겠지만 이전 브라우저 / JavaScript 표준 (ecmascript 5, javascript <1.8.5 ~ firefox 4)으로 작업하는 동안 전역 범위 변수 undefined는 쓰기 가능하므로 누구나 값을 다시 쓸 수 있습니다. 세 번째 인수 (값이 전달되지 않은 경우) undefined는 네임 스페이스 / 함수로 범위가 지정된 변수를 만듭니다 . 네임 스페이스를 만들 때 전달 된 값이 없기 때문에 기본값은 value undefined입니다.


이를 수행하는 또 다른 방법은 객체 리터럴 형식보다 조금 덜 제한적이라고 생각합니다.

var ns = new function() {

    var internalFunction = function() {

    };

    this.publicFunction = function() {

    };
};

위는 거의 같다 모듈 패턴당신이 좋아 여부 객체 리터럴의 견고한 구조를 피하면서, 그것은 당신이 public으로 모든 기능을 표시 할 수 있습니다.


더 우아하거나 간결한 방법이 있습니까?

예. 예를 들면 :

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(){}

이 두 파일은 충돌없이 함께 또는 떨어져있을 수 있습니다.


다음은 Stoyan Stefanov가 자신의 JavaScript Patterns에서 수행하는 방법입니다.이 책은 매우 훌륭합니다 (또한 자동 생성 된 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);

이것은 user106826의 Namespace.js 링크에 대한 후속 조치입니다. 프로젝트가 GitHub 로 옮겨진 것 같습니다 . 이제 smith / namespacedotjs 입니다.

저는이 간단한 자바 스크립트 도우미를 내 작은 프로젝트에 사용해 왔으며 지금까지 네임 스페이스를 처리 하고 모듈 / 클래스를로드 하기에 충분히 가볍지 만 다재다능한 것 같습니다 . 패키지를 내가 선택한 네임 스페이스로 가져올 수 있다면 좋을 것입니다. 글로벌 네임 스페이스뿐 아니라 ... 한숨이지만 그게 요점이 아닙니다.

네임 스페이스를 선언 한 다음 해당 네임 스페이스에서 개체 / 모듈을 정의 할 수 있습니다.

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변수, samelike를 선언하고 비공개로 설정 self하려면 할당 local.onTimeout할 수 있습니다.


네임 스페이스를 제공하는 간단한 함수를 선언 할 수 있습니다.

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!";

개인 범위가 필요한 경우 :

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();

모듈 패턴은 원래 기존 소프트웨어 엔지니어링의 클래스에 대해 개인 및 공용 캡슐화를 모두 제공하는 방법으로 정의되었습니다.

모듈 패턴으로 작업 할 때 시작하는 데 사용하는 간단한 템플릿을 정의하는 것이 유용 할 수 있습니다. 다음은 이름-간격, 공용 및 개인 변수를 다루는 것입니다.

JavaScript에서 Module 패턴은 하나의 객체 안에 public / private 메서드와 변수를 모두 포함 할 수있는 방식으로 클래스 개념을 추가로 에뮬레이션하는 데 사용되어 전역 범위에서 특정 부분을 보호합니다. 그 결과 페이지의 추가 스크립트에 정의 된 다른 함수와 충돌하는 함수 이름의 가능성이 줄어 듭니다.

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 관점에서 보면 진정한 캡슐화의 아이디어보다 객체 지향 배경에서 오는 개발자에게는 훨씬 더 깨끗합니다.

둘째, 개인 데이터를 지원하므로 모듈 패턴에서 코드의 공용 부분은 개인 부분을 만질 수 있지만 외부 세계는 클래스의 개인 부분을 만질 수 없습니다.

단점

모듈 패턴의 단점은 공개 및 비공개 멤버 모두에 다르게 액세스하므로 가시성을 변경하려는 경우 실제로 멤버가 사용 된 각 위치를 변경해야한다는 것입니다.

또한 나중에 개체에 추가되는 메서드의 개인 멤버에 액세스 할 수 없습니다 . 즉, 많은 경우에 Module 패턴은 여전히 ​​매우 유용하며 올바르게 사용하면 응용 프로그램의 구조를 개선 할 가능성이 있습니다.

드러나는 모듈 패턴

이제 모듈 패턴에 대해 조금 더 익숙해 졌으므로 약간 개선 된 버전 인 Christian Heilmann의 Revealing Module 패턴을 살펴 보겠습니다.

Revealing Module 패턴은 Heilmann이 하나의 퍼블릭 메소드를 다른 퍼블릭 메소드에서 호출하거나 퍼블릭 변수에 접근하기를 원할 때 메인 객체의 이름을 반복해야한다는 사실에 불만을 품고 나타났습니다. 그가 공개하고자하는 것들에 대한 문자 표기법을 반대합니다.

그의 노력의 결과는 우리가 모든 함수와 변수를 private 범위에 간단히 정의하고 우리가 공개하고자하는 private 기능에 대한 포인터와 함께 익명 객체를 반환하는 업데이트 된 패턴이었습니다.

공개 모듈 패턴을 사용하는 방법의 예는 아래에서 찾을 수 있습니다.

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" );

장점

이 패턴을 사용하면 스크립트의 구문이 더 일관적일 수 있습니다. 또한 모듈 끝에서 우리의 함수와 변수 중 어떤 것이 공개적으로 액세스 될 수 있는지 더 명확하게하여 가독성을 높입니다.

단점

이 패턴의 단점은 private 함수가 public 함수를 참조하는 경우 패치가 필요한 경우 해당 public 함수를 재정의 할 수 없다는 것입니다. 이것은 private 함수가 계속 private 구현을 참조하고 패턴이 public 멤버에는 적용되지 않고 함수에만 적용되기 때문입니다.

개인용 변수를 참조하는 공용 개체 멤버는 위의 패치 없음 규칙 참고 사항도 적용됩니다.


Erlang의 모듈에서 영감을받은 네임 스페이스만들었습니다 . 매우 기능적인 접근 방식이지만 요즘 JavaScript 코드를 작성하는 방법입니다.

클로저에 전역 네임 스페이스를 제공하고 해당 클로저 내에서 정의 된 집합 함수를 노출합니다.

(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

})();

네임 스페이스에 다음 구문을 사용합니다.

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/


여러 개의 라이브러리를 서로 다른 프로젝트로 이식하고 최상위 (정적으로 이름이 지정된) 네임 스페이스를 지속적으로 변경해야하는 이후 네임 스페이스 정의를 위해이 작은 (오픈 소스) 도우미 함수를 사용하도록 전환했습니다.

global_namespace.Define('startpad.base', function(ns) {
    var Other = ns.Import('startpad.other');
    ....
});

혜택에 대한 설명은 내 블로그 게시물에 있습니다. 여기 에서 소스 코드를 얻을 수 있습니다 .

내가 정말 좋아하는 이점 중 하나는로드 순서와 관련하여 모듈 간의 격리입니다. 로드하기 전에 외부 모듈을 참조 할 수 있습니다. 그리고 코드를 사용할 수있을 때 얻은 개체 참조가 채워집니다.


나는 파티에 7 년 늦었지만 8 년 전에 꽤 많은 일을했다.

자바 스크립트 전역 네임 스페이스 (네임 스페이스 오염 방지)를 존중하면서 네임 스페이스 경로에있는 기존 개체를 방해하지 않고 복잡한 웹 애플리케이션을 구성하고 관리 할 수 ​​있도록 쉽고 효율적으로 여러 개의 중첩 네임 스페이스를 생성 할 수 있어야합니다. .

위의 내용에서 이것은 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;
};

이제는 namespace전역 네임 스페이스 자체 에 노출 하는 것이 걱정 됩니다. (기본 언어가 이것을 제공하지 않는 것이 너무 나쁘다!) 그래서 나는 일반적으로 다음과 같은 클로저에서 이것을 직접 사용합니다.

(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);

더 큰 애플리케이션에서는 페이지로드를 시작할 때 한 번만 정의하면됩니다 (클라이언트 기반 웹 앱의 경우). 그런 다음 추가 파일이 유지되면 네임 스페이스 함수를 다시 사용할 수 있습니다 (위에서 "선택 사항"으로 포함됨). 최악의 경우이 함수가 몇 번 다시 선언되면 코드가 몇 줄에 불과하고 축소되면 더 적습니다.


저는 Jaco Pretorius의 솔루션을 좋아하지만 모듈 / 네임 스페이스 객체를 가리켜 "this"키워드를 좀 더 유용하게 만들고 싶었습니다. 내 버전의 프라이팬 :

(function ($, undefined) {

    console.log(this);

}).call(window.myNamespace = window.myNamespace || {}, jQuery);

최근에 제가 가장 좋아하는 패턴은 다음과 같습니다.

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() {
    // ...
  }
  
})();

물론 return은 끝에있을 수 있지만 함수 선언 만 뒤에 오는 경우 네임 스페이스가 무엇인지, 어떤 API가 노출되는지 확인하는 것이 훨씬 쉽습니다.

이러한 경우 함수 표현식을 사용하는 패턴은 전체 코드를 검토하지 않고는 어떤 메소드가 노출되는지 알 수 없게합니다.


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

다음과 같이 독립적으로 사용할 수 있습니다.

var A = A|| {};
A.B = {};

A.B = {
    itemOne: null,
    itemTwo: null,
};

A.B.itemOne = function () {
    //..
}

A.B.itemTwo = function () {
    //..
}

나는 여러분 모두가 그러한 간단한 문제에 너무 많은 코드를 사용한다고 생각합니다. 이를 위해 repo를 만들 필요가 없습니다. 다음은 한 줄 함수입니다.

namespace => namespace.split(".").reduce((last, next) => (last[next] = (last[next] || {})), window);

시도 해봐 :

// --- definition ---
const namespace = namespace => namespace.split(".").reduce((last, next) => (last[next] = (last[next] || {})), window);

// --- Use ----
let myNamespace = namespace("a.b.c");
myNamespace.MyClass = class MyClass {};

// --- see ----
console.log("a : ", a);


Makefile을 사용하는 경우이를 수행 할 수 있습니다.

// 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();

일단 약 1000 줄이되면 Makefile을 사용하는 것을 선호합니다. 왜냐하면 makefile에서 한 줄을 제거하여 많은 양의 코드를 효과적으로 주석 처리 할 수 ​​있기 때문입니다. 물건을 쉽게 조작 할 수 있습니다. 또한이 기술을 사용하면 네임 스페이스가 전주곡에 한 번만 표시되므로 변경하기 쉽고 라이브러리 코드 내에서 계속 반복 할 필요가 없습니다.

makefile을 사용할 때 브라우저에서 라이브 개발을위한 쉘 스크립트 :

while (true); do make; sleep 1; done

이것을 make task 'go'로 추가하면 코드를 작성할 때 빌드를 계속 업데이트 할 수 있습니다.


다른 언어에서 패키지 / 유닛처럼 작동하는 또 다른 네임 스페이스 라이브러리를 작성했습니다. 이를 통해 JavaScript 코드 패키지 및 다른 코드에서 해당 패키지를 참조 할 수 있습니다.

hello.js 파일

Package("hello", [], function() {
  function greeting() {
    alert("Hello World!");
  }
  // Expose function greeting to other packages
  Export("greeting", greeting);
});

Example.js 파일

Package("example", ["hello"], function(greeting) {
  // Greeting is available here
  greeting();  // Alerts: "Hello World!"
});

두 번째 파일 만 페이지에 포함되어야합니다. 해당 종속성 ( 이 예제에서는 hello.js 파일 )이 자동으로로드되고 해당 종속성에서 내 보낸 객체가 콜백 함수의 인수를 채우는 데 사용됩니다.

Packages JS 에서 관련 프로젝트를 찾을 수 있습니다 .


내 습관은 myName () 함수 를 속성 저장소로 사용하고 var myName 을 "method"홀더로 사용하는 것입니다.

이것이 합법적이든 아니든 나를 이길 수 있습니다! 나는 항상 내 PHP 로직에 의존하고 있으며 모든 것이 단순히 작동합니다. :디

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에는 네임 스페이스를 사용하기위한 미리 정의 된 메서드가 없습니다. JavaScript에서 우리는 네임 스페이스를 정의하기 위해 우리 자신의 메소드를 만들어야합니다. 다음은 Oodles 기술에서 따르는 절차입니다.

네임 스페이스 등록 다음은 네임 스페이스를 등록하는 기능입니다.

//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]];
 }
}

네임 스페이스를 등록하려면 '.'(점)으로 구분 된 네임 스페이스로 인수를 사용하여 위의 함수를 호출하면 됩니다. 예를 들어 응용 프로그램 이름이 oodles입니다. 다음 방법으로 네임 스페이스를 만들 수 있습니다.

registerNS("oodles.HomeUtilities");
registerNS("oodles.GlobalUtilities");
var $OHU = oodles.HomeUtilities;
var $OGU = oodles.GlobalUtilities;

기본적으로 백엔드에서 아래와 같이 NameSpaces 구조를 생성합니다.

var oodles = {
    "HomeUtilities": {},
    "GlobalUtilities": {}
};

위의 함수에서 "oodles.HomeUtilities"라는 네임 스페이스를 등록했습니다 "oodles.GlobalUtilities". 이러한 네임 스페이스를 호출하기 위해 변수 즉 var $OHU및 var을 $OGU만듭니다.

이러한 변수는 네임 스페이스 초기화에 대한 별칭 일뿐입니다. 이제 자신에게 속한 함수를 선언 할 때마다 HomeUtilities다음과 같이 선언합니다.

$OHU.initialization = function(){
    //Your Code Here
};

위는 함수 이름 초기화이며 네임 스페이스에 배치됩니다 $OHU. 스크립트 파일 어디에서나이 함수를 호출합니다. 다음 코드를 사용하십시오.

$OHU.initialization();

마찬가지로 다른 네임 스페이스도 마찬가지입니다.

도움이되기를 바랍니다.

참고 URL : https://stackoverflow.com/questions/881515/how-do-i-declare-a-namespace-in-javascript

반응형