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

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

JavaScript 변수 사용

ES2015 (ES6) 릴리스 이전에는var키워드를 사용하여 자바스크립트 변수를 선언했습니다. 하지만 ES6의let도입과 함께 변수를 선언하는 새로운 방법으로const추가되었습니다. 이것은 어떤 키워드를 언제 사용해야 하는지에 대한 질문을 자주 제기합니다.

다음은 JavaScript에서 변수를 선언하는 다양한 방법에 대한 간단한 설명입니다.

변수 사용

var사용은 JavaScript에서 가장 오래된 변수 선언 방법입니다. 함수 내에서 정의되는 경우var any는 해당 함수로 제한되지만 함수 외부에서 정의하면var a는 전역 함수로 제한됩니다.

// Global Declaration
var variable = value;

const varExampleFunction = () => {
    // Local Declaration
    var variable = value;
}

let 사용

let선언은 ES6에서 도입되었으며, 이 유형의 선언은 블록 범위가 지정되므로 로 선언된 변수는 해당 선언이 정의된 블록 또는 함수에서만 액세스할let수 있습니다. 

const letExampleFunction = () => {
    let variable = value;
}

const 사용

let As const는 ES6에서도 도입되었습니다. 이것이 두 선언이 매우 유사한 이유입니다. 가장 큰 차이점은 상수 값을 보유하는 메모리의 데이터를const가리키며const참조 변수를 메모리의 다른 객체에 재할당할 수 없다는 것입니다.

 const constExampleFunction = () => {
    const variable = value;
}

범위 충돌

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

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

// script 1
const incrementCount = () => {
    count++;
}

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

myButton.onclick = incrementCount;

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

// script 2
const countVideos = videoList => {
    count = videoList.length;
}

결과:

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

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

익명 함수

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

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

  • 3 행: 다른 코드가 함수를 호출 할 때까지 기다리는 대신 파싱 된 후 즉시 함수를 실행하도록 JavaScript에 지시하는 추가 괄호 집합이 포함됩니다.
( () => {
    // your code
}());

다른 구문 예:

var res = function( [arguments] ) { ... }

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

전역

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

전역 전달

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

다음은 예입니다.

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

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

typeof undefined == "undefined"

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

if(variable1 === undefined)

전역 내보내기

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

다음은 예입니다.

  • 1 행: 익명 함수를 에 할당합니다BCLS . 이 값은 사용자가 선택하는 모든 것이 될 수 있습니다. 이 예에서는 BCLS (브라이트코브 학습 서비스) 를 사용하고 있습니다.
const BCLS = ( ( 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
const BCLS = ( () => {
   var myvar = value,
       myvar2 = value;

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

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

예제 2

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

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

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

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

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

코드 샘플

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