JavaScript는 모듈성을 달성하기 위해 클로저를 사용합니다.

클로저의 힘을 활용하세요. 하지만 표면적으로는 콜백과 아무 관련이 없는 것 같습니다. 그중 가장 강력한 모듈인 모듈을 살펴보겠습니다.

function foo() {
  var something = "cool";
  var another = [1, 2, 3];
  function doSomething() {
    console.log( something );
  }
  function doAnother() {
    console.log( another.join( " ! " ) );
  }
}

이 코드에서 볼 수 있듯이 명확한 클로저가 없으며 두 개의 개인 데이터 변수인 Something과 Another, 그리고 doSomething() 및 doAnother()만 있습니다. 두 개의 내부 함수, 어휘 범위(그리고 이것이 클로저)는 foo()의 내부 범위입니다.

다음으로 다음 코드를 고려하세요.

function CoolModule() {
  var something = "cool";
  var another = [1, 2, 3];
  function doSomething() {
    alert( something );
  }
  function doAnother() {
    alert( another.join( " ! " ) );
  }
  return {
    doSomething: doSomething,
    doAnother: doAnother
  };
}
var foo = CoolModule();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

이 패턴을 JavaScript에서는 모듈이라고 합니다. 모듈 패턴을 구현하는 가장 일반적인 방법은 종종 모듈 노출이라고 하며, 그 변형이 여기에 표시됩니다. 코드를 자세히 살펴보겠습니다.

우선 CoolModule()은 모듈 인스턴스를 생성하기 위해 호출해야 하는 함수일 뿐입니다. 외부 함수를 실행하지 않으면 내부 범위나 클로저를 생성할 수 없습니다. 둘째, CoolModule()은 객체 리터럴 구문 { key: value, ... }로 표시되는 객체를 반환합니다. 반환된 개체에는 내부 데이터 변수가 아닌 내부 함수에 대한 참조가 포함되어 있습니다. 우리는 내부 데이터 변수를 숨기고 비공개로 유지합니다. 이 객체 유형의 반환 값을 본질적으로 모듈의 공개 API로 생각할 수 있습니다. 이 객체 유형의 반환 값은 결국 외부 변수 foo에 할당된 다음 이를 사용하여 foo.doSomething()과 같은 API의 속성 메서드에 액세스할 수 있습니다.

모듈에서 실제 객체를 반환할 필요는 없으며 내부 함수를 직접 반환할 수도 있습니다. jQuery가 좋은 예입니다. jQuery와 $ 식별자는 jQuery 모듈의 공개 API이지만 그 자체가 함수입니다(함수도 객체이므로 속성 자체를 가질 수도 있습니다).

doSomething() 및 doAnother() 함수에는 모듈 인스턴스 내부의 범위를 포괄하는 클로저가 있습니다(CoolModule()을 호출하여 구현됨). 속성 참조가 포함된 객체를 반환하여 어휘 범위 외부의 함수를 전달할 때 클로저를 관찰하고 연습할 수 있는 조건을 만든 것입니다. 좀 더 간단하게 설명하자면, 모듈 패턴은 두 가지 필수 조건을 충족해야 합니다.

1. 적어도 한 번은 호출해야 하는 외부 엔클로징 함수가 있어야 합니다(각 호출은 새 모듈 인스턴스를 생성합니다).

2. 닫힌 함수는 내부 함수가 프라이빗 범위에서 클로저를 형성하고 프라이빗 상태에 액세스하거나 수정할 수 있도록 적어도 하나의 내부 함수를 반환해야 합니다.

기능적 속성을 가진 객체는 그 자체로 모듈이 아닙니다. 편리한 관찰 관점에서 보면 데이터 속성만 있고 클로저 함수는 없는 함수 호출에서 반환된 객체는 실제 모듈이 아닙니다. 이전 예제 코드에는 CoolModule()이라는 별도의 모듈 생성기가 있어 여러 번 호출할 수 있으며 호출할 때마다 새 모듈 인스턴스를 생성합니다. 인스턴스가 하나만 필요한 경우 이 패턴을 개선하여 싱글톤 패턴을 구현할 수 있습니다.

var foo = (function CoolModule() {
  var something = "cool";
  var another = [1, 2, 3];
  function doSomething() {
    alert( something );
  }
  function doAnother() {
    alert( another.join( " ! " ) );
  }
  return {
    doSomething: doSomething,
    doAnother: doAnother
  };
})();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

이 함수를 즉시 호출하고 반환 값을 직접 할당합니다. 모듈 싱글톤에 주어진 인스턴스 식별자 foo입니다.

모듈도 일반 함수이므로 매개변수를 받을 수 있습니다.

function CoolModule(id) {
  function identify() {
    console.log( id );
  }
  return {
    identify: identify
  };
}
var foo1 = CoolModule( "foo 1" );
var foo2 = CoolModule( "foo 2" );
foo1.identify(); // "foo 1"
foo2.identify(); // "foo 2"

모듈 패턴의 또 다른 간단하지만 강력한 변형은 객체 이름을 지정하는 것입니다. 공개 API로 반환됨:

var foo = (function CoolModule(id) {
function change() {
  // 修改公共API
  publicAPI.identify = identify2;
}
function identify1() {
  alert( id );
}
function identify2() {
  alert( id.toUpperCase() );
}
var publicAPI = {
  change: change,
  identify: identify1
};
return publicAPI;
})( "foo module" );
foo.identify(); // foo module
foo.change();
foo.identify(); // FOO MODULE

모듈 인스턴스 내부의 공개 API 객체에 대한 내부 참조를 유지하여 모듈 인스턴스를 내부에서 수정할 수 있습니다. 또는 메서드와 속성을 제거하고 해당 값을 수정합니다.

위 내용은 이 글의 전체 내용입니다. 이 글의 내용이 모든 분들의 공부나 업무에 조금이나마 도움이 되었으면 좋겠습니다. 저도 PHP 중국어 홈페이지에 지원하고 싶습니다!

모듈화를 위해 클로저를 사용하는 JavaScript와 관련된 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!