개념: 자바 스크립트 모듈 디자인 패턴

이 항목에서는 JavaScript 모듈 디자인 패턴을 사용하여 코드가 웹 페이지의 다른 스크립트와 충돌할 가능성을 줄이는 방법을 배웁니다.

범위 충돌

JavaScript에서는var요소를 사용하여 변수를 정의 할 때 정의 된 함수 내에서 범위가 지정됩니다. 를 사용하지 않고 변수를var정의하면 전역 범위가 할당됩니다. 즉, 전역 변수는 페이지의 다른 스크립트와의 충돌에 취약합니다.

의 코드 예제를 살펴 보자. 다음 코드에서는 함수와 변수가 페이지 범위 내에 존재합니다.

// script 1
var incrementCount = function() {
    count++;
}

var myButton = document.getElementById('buttonId');
var count = 0;

myButton.onclick = incrementCount;

이제 스크립트 외부에 전역count변수를 수정하는 함수가 있다고 가정 해 보겠습니다. 이러한 스크립트 충돌로 인해 예기치 않은 결과가 발생할 수 있습니다.

// script 2
var countVideos = function(videoList) {
    count = videoList.length;
}

결과:

사용자가myButton버튼을 두 번 선택하여 에서count변수를 증가시킵니다script 1 .
- count = 2
이countvideos함수는 에Script 2존재하지만 웹 페이지에도 존재합니다. 에 10 개의 항목이videoList포함되어 있다고 가정 해 보겠습니다. 이제count전역 변수의 값은10입니다 .
- count = 10
다음에 사용자가myButton버튼을 선택하면count변수가 예기치 않은 결과를 반환합니다.
- 예상: count = 3
- 실제: count = 11

스크립트에서 충돌을 피하려고 할 수 있지만 페이지에 포함된 타사 스크립트가 유사한 함수 및 변수 이름을 사용하지 않는다는 보장은 없습니다.

익명 함수

한 가지 해결책은 코드를 익명의 함수 (클로저라고도 함) 로 래핑하여 즉시 실행되는 것입니다. 클로저 내의 코드는 다른 스크립트에서 액세스 할 수 없습니다. 따라서 개인 함수와 변수를 만드는 방법을 제공합니다.

여기에 익명 함수의 구문은 다음과 같습니다

3 행: 다른 코드가 함수를 호출 할 때까지 기다리는 대신 파싱 된 후 즉시 함수를 실행하도록 JavaScript에 지시하는 추가 괄호 집합이 포함됩니다.

(function () {
    // your code
}());

클로저는 응용 프로그램의 수명 기간 동안 개인 정보 보호 및 상태를 제공하므로 강력해질 수 있습니다. 클로저 내부의 코드의 경우 모든 변수와 함수는 클로저 범위에만 있습니다. 그러나 클로저 내부의 코드는 여전히 전역 변수 나 함수에 액세스 할 수 있습니다.

전역

JavaScript에는 암시적 전역이라는 기능이 있지만 전역 변수를 확인하는 것은 쉽지 않으므로 코드를 관리하기가 어려울 수 있습니다. 변수가 전역 변수인지 확인하려면 인터프리터는 이름과 일치하는var명령문을 찾는 범위 체인을 거꾸로 걸어야합니다. 아무 것도 발견되지 않으면 변수는 전역 변수로 간주됩니다.

전역 전달

익명 함수를 사용하면 전역 매개 변수를 명시 적으로 전달할 수 있습니다. 이를 코드로 매개 변수 가져 오기라고합니다.

다음은 예입니다.

행 1: 함수에 전달되는 매개 변수의 이름을 정의합니다. 3 행의 이름과 일치 할 필요가 없습니다. 여기서, window객체라는 매개 변수로 전달됩니다window1 .
3 행: window객체를 함수로 전달합니다.

(function( window1, undefined ) {
    ...
})(window);

전달되는 객체는 하나만 있지만 두 개의 매개 변수가 있으므로 의undefined값은 정의되지 않습니다.

typeof undefined == "undefined"

다른 변수가 정의되어 있는지 쉽게 확인할 수있는 방법을 원한다면 유용 할 수 있습니다.

if(variable1 === undefined)

전역 내보내기

익명 함수 외부에서 변수와 함수를 전달할 수도 있습니다. return값을 사용하여이 작업을 수행 할 수 있습니다.

다음은 예입니다.

1 행: 익명 함수를 에 할당합니다BCLS . 이 값은 사용자가 선택하는 모든 것이 될 수 있습니다. 이 예에서는 BCLS (브라이트코브 학습 서비스) 를 사용하고 있습니다.

var BCLS = (function( window1, undefined ) {
    var object1 = {};
    object1.count = 1;
    object1.method = function () {
        ...
    }
    return object1;
})(window);

이제object1객체는 두 개의 공용 속성 (라는count변수와 라는 함수) 을 사용하여 전역적으로 사용할 수method있습니다. 익명 함수 외부에서 다음과 같이 액세스 할 수 있습니다.

BCLS.object1.count
BCLS.object1.method

전체 예제

다음은 자바 스크립트 모듈 디자인 패턴의 몇 가지 완전한 예입니다.

예제 1

이 예에서는 모듈 패턴을 사용하여 개인 및 공용 변수와 함수를 만드는 방법을 보여 줍니다.

전용 변수: myvar , myvar2
개인 기능: fname , fname2
공용 변수: myvar3
공용 기능: fname3

var BCLS = ( function() {
   var myvar = value,
       myvar2 = value;

   fname = function() {
        ...
   };
   fname2 = function() {
        ...
   };

   return {
        fname3 : function() {
             ...
        },
        myvar3 = value;
   };
}());

예제 2

이 예제는 전역 객체를 전달하고 공용 함수를 노출합니다.

var BCLS = (function( window, document, videojs ) {
    var myvar = value;

    // use a global object passed into the anonymous function
    videojs.registerPlugin('overlay');

    fname = function() {
        ...
    }
    return {
      fname2 : function() {
            ...
        }
    }
})(window, document, videojs);

// call the public function fname2
var newvar = BCLS.fname2();

코드 샘플

코드 예제 중 일부는 JavaScript 모듈 디자인 패턴을 사용하며이 패턴을 구현하는 방법에 대한 아이디어를 검토 할 수 있습니다.

플로팅 플레이어

페이지 내용