내가 가장 좋아하는 JavaScript 디자인 패턴

나는 많은 것을 사용하는 JavaScript 디자인 패턴을 보는 것이 흥미로울 것이라고 생각했습니다. 나는 필요한 유연성을 제공하는 패턴에 도달 할 때까지 다양한 소스의 영향을 흡수하고 적응시키는 기간 동안 점차적으로 정착했습니다. 개요를 보여 드린 다음 어떻게 함께 오는지 보겠습니다.

해당 샘플 코드에서 볼 수 있듯이 전체 구조는

함수 리터럴

: 입니다.

리터럴은 본질적으로 자체 실행 범위이며, 이름이 지정된 함수를 정의한 다음 즉시 호출하는 것과 동일합니다.

나는 원래

function MyScript(){}
(function()
{

  var THIS = this;

  function defined(x)
  {
    return typeof x != 'undefined';
  }

  this.ready = false;

  this.init = function(
  {
    this.ready = true;
  };

  this.doSomething = function()
  {
  };   

  var options = {
      x : 123,
      y : 'abc'
      };

  this.define = function(key, value)
  {
    if(defined(options[key]))
    {
      options[key] = value;
    }
  };

}).apply(MyScript);

acapsulation

를 위해 함수 리터럴을 사용하기 시작했습니다. 모든 형식의 스크립트는 해당 인클로저로 래핑 할 수 있으며, 개인 스코프로 효과적으로 "밀봉"하여 동일한 스코프의 다른 스크립트와 충돌하지 않거나 전 세계 스코프의 데이터와 충돌하지 않습니다. 끝에있는 브래킷 페어는 다른 기능과 마찬가지로 범위를 실행하는 것입니다. 그러나 전역으로 호출하는 대신 범위가 함수를 사용하여 실행된다면, Apply에서는 외부에서 참조 할 수있는 특정 스코프에서 실행하도록 만들 수 있습니다. . 그래서 그 두 가지를 결합하여 명명 된 함수의 생성을 결합한 다음, 이름이 지정된 함수의 범위에 함수 문자를 실행함으로써 우리는 모든 스크립트의 기초를 형성 할 수있는 단일 사용 객체로 끝나고, 객체 지향적 클래스에서 발견되는 종류의 상속을 시뮬레이션합니다. 내부의 아름다움 첫 번째 코드 예제를 살펴보면 둘러싸는 스코프의 구조에 의해 어떤 유연성이 제공되는지 알 수 있습니다. 물론 어떤 기능에서도 할 수없는 것은 아니지만, 이런 식으로 마무리하면

라는 스코프와 관련 될 수있는 구성이 있습니다. 우리는 그러한 구성을 여러 개의 구조물을 만들고 동일한 범위를 모두 연관시킬 수 있습니다. 그러면 모두

(function()
{
  ...

})();

공개 데이터 를 공유합니다. 그러나 공개 데이터를 공유하는 것과 동시에, 각각은 자체 개인 데이터 function doSomething() { ... } doSomething();도 정의 할 수 있습니다. 예를 들어, 스크립트의 맨 위에서 :

우리는 기능 범위를 가리키는 개인 변수 를 만들었고, 개인 기능 내에서 그것을 언급하기 위해 개인 함수 내에서 사용될 수 있습니다. 동일한 방식으로 선언 된 다른 개인 변수는 상수 데이터를 정의하면 대문자 규칙을 공유 할 수 있습니다 (그러나 VAR 대신 const를 사용하는 선언은 잘지지되지 않기 때문에 피해야합니다). 개인 기능

는 내부 유틸리티를 제공하는 데 사용될 수 있습니다

function MyScript(){}
(function()
{

  var THIS = this;

  function defined(x)
  {
    return typeof x != 'undefined';
  }

  this.ready = false;

  this.init = function(
  {
    this.ready = true;
  };

  this.doSomething = function()
  {
  };   

  var options = {
      x : 123,
      y : 'abc'
      };

  this.define = function(key, value)
  {
    if(defined(options[key]))
    {
      options[key] = value;
    }
  };

}).apply(MyScript);

그러면

공개 방법과 속성을 만들 수 있으며 다른 인스턴스와 외부에 액세스 할 수 있습니다. 우리는 또한 특권 값을 생성 할 수 있으며,이 경우 공개 정의 방법을 통해 개인이지만 공개적으로 정의 가능합니다. 데이터의 요구에 따라 그 주장이 추가로 검증 될 수 있습니다.

마무리!

(function()
{
  ...

})();

이러한 모든 기능은 구성을 나에게 유용하게 만드는 이유입니다. 그리고 그것은 모두 깔끔하고 자체적으로

싱글 톤 에 싸여 있습니다. 그래서 당신은 어떻게 생각하십니까? 이것은 당신에게 친숙한 패턴입니까, 아니면 당신이 사용하고 싶은 다른 것이 있습니까?

썸네일 크레디트 : Superkimbo

function doSomething()
{
  ...
}

doSomething();

참고 : 더 원하십니까? James로부터 더 많은 것을 읽으려면 Weekly Tech Geek 뉴스 레터,

Tech Times

.

위 내용은 내가 가장 좋아하는 JavaScript 디자인 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!