[javascript] JavaScript로 네임 스페이스를 어떻게 선언합니까?

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

    };
};

위의 내용은 모듈 패턴 과 비슷 하며 , 원하는지 여부에 관계없이 객체 리터럴의 엄격한 구조를 피하면서 모든 기능을 공개로 노출 할 수 있습니다.

답변

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

예. 예를 들면 다음과 같습니다.

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 패턴 책 에서 어떻게 수행했는지 잘 보여줍니다. (자동 생성 된 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;
};