>  기사  >  웹 프론트엔드  >  JavaScript_javascript 기술로 단일 모드 구현 공유

JavaScript_javascript 기술로 단일 모드 구현 공유

WBOY
WBOY원래의
2016-05-16 16:17:13837검색

소프트웨어 개발 모델로서 단일 모드는 많은 객체 지향 언어에서 널리 사용되었습니다. JavaScript에서는 단일 모드도 매우 널리 사용됩니다. 그러나 JavaScript 언어에는 고유한 객체 지향 접근 방식이 있기 때문에 다음과 같은 이점이 있습니다. 단일 모드라는 개념에서는 일부 전통적인 객체지향 언어와 일치하지만 구현에는 여전히 차이가 있습니다.

먼저 전통적인 객체 지향 언어에서 싱글턴 패턴의 정의를 살펴보겠습니다. 싱글턴 패턴은 한 번만 인스턴스화할 수 있고 잘 알려진 액세스 포인트를 통해 액세스할 수 있는 클래스입니다. 이 정의에는 전통적인 객체 지향 언어의 특성, 즉 클래스와 인스턴스화를 강조하는 두 가지 사항이 있습니다. 따라서 전통적인 객체 지향 언어의 경우 싱글톤 모드는 클래스와 인스턴스화의 자연스러운 특성을 기반으로 합니다. using key 클래스라는 단어는 new 키워드를 통해 인스턴스화될 수 있는 클래스를 정의하지만, new에 의해 인스턴스화될 때마다 동일한 인스턴스를 얻거나 해당 생성자가 new를 통해 한 번만 호출될 수 있도록 보장해야 합니다.

JavaScript에서 싱글턴 모드의 정의를 살펴보겠습니다. 싱글턴은 네임스페이스를 나누고 관련 메서드 및 속성 그룹을 함께 구성하는 데 사용되는 객체입니다. 인스턴스화할 수 있으면 인스턴스화만 가능합니다. 한 번. 위의 정의를 비교해 보면, 여기서 단일 정의는 본질적으로 전통적인 객체 지향 언어의 클래스가 아닌 객체로 정의한다는 것을 알 수 있습니다. 이는 또한 JavaScript 언어가 객체를 기반으로 함을 보여줍니다. 동시에, 인스턴스화할 수 있다면 이는 JavaScript에서 단일 객체를 정의하는 방법이 여러 가지가 있어야 함을 보여주는 것이라고 나중에 지적되었습니다. new 키워드를 사용하여 단일 객체를 생성하는 방법은 하나 또는 여러 가지가 있습니다. 그러나 이 방법은 JavaScript 자체의 자연스러운 기능은 아닙니다. new 키워드를 사용하여 생성된 객체는 실제로 함수를 사용하여 생성자의 정의를 시뮬레이션하기 때문입니다(ES6에서는 class 키워드를 지원하기 시작했지만 아직 볼 수는 없습니다(널리 지원됨). 모든 브라우저에서)) 그렇다면 JavaScript의 자연스러운 기능을 사용하여 싱글톤 모드를 구현하는 방법은 무엇입니까?

var Singleton={
  attribute1:true,
  attribute2:10,
  method1:function(){

  },
  method2:function(arg){

  }
}

여기에는 여러 속성과 메서드가 포함된 Singleton 개체가 정의되어 있습니다. 이 개체는 js가 로드될 때 생성되며, 인스턴스화는 페이지와 같습니다. 로드되고 js 구문 분석 및 실행 프로세스가 완료되면 이 객체를 인스턴스화하기 위해 new 키워드를 사용하지 않습니다. 이는 JavaScript의 단일 모드 구현과 기존 객체 지향 언어의 큰 차이점이기도 합니다. 이 방법이 더 간단하고 이해하기 쉽습니다. 그러나 이 방법에는 몇 가지 단점이 있는데, 한 가지 분명한 단점은 네임스페이스를 제공하지 않는다는 것입니다. 다른 프로그래머도 페이지에 싱글톤 변수를 정의하면 단일 개체를 다시 작성하고 혼동하기 쉽기 때문에 이 문제를 해결하려면 다시 작성하십시오. 다음과 같습니다:

var mySpace={};
mySpace.Singleton={
  attribute1:true,
  attribute2:10,
  method1:function(){

  },
  method2:function(arg){

  }
}


여기서 먼저 mySpace 네임스페이스를 정의한 다음 이 개체 아래에 Singleton 개체를 마운트합니다. 이렇게 하면 다른 프로그래머가 전역 범위에 있더라도 충돌 및 오작동 가능성이 크게 줄어듭니다. 단일 객체는 이전 정의에서 언급한 대로 네임스페이스를 나누고 일부 관련 속성과 메서드를 함께 구성하는 기능을 수행합니다.

이 방법에는 여전히 단점이 있습니다. 이 단일 객체의 모든 속성과 메서드는 공통적이며 언제든지 외부에서 액세스하고 수정할 수 있습니다. 따라서 다음과 같이 클로저를 사용하여 개인 속성과 메서드를 시뮬레이션합니다.

mySpace.Singleton=(function(){
  var privateAttribute1=false;
  var privateAttribute1=[1,2,3];
  function privateMethod1(){

  }
  function privateMethod2(){

  }

  return {
  publicAttribute1:true,
  publicAttribute2:10,
  publicMethod1:function(){
    privateAttribute1=true;
    privateMethod1();
  },
  publicMethod2:function(arg){
    privateAttribute1=[4,5,6];
    privateMethod2();
  }

  }

})();

여기서는 단일 객체에 익명의 자체 실행 함수를 직접 할당합니다. 이 함수에서는 var 및 function 키워드를 사용하여 각각의 개인 속성과 메서드를 정의합니다. 이러한 속성은 함수 외부(단일 객체 외부)에서 직접 액세스할 수 없습니다. 함수가 실행되자마자 내부 범위의 공간이 회수되므로 접근 가능합니다. 이것이 바로 클로저를 사용하여 개인 속성과 메서드를 시뮬레이션할 수 있는 이유입니다. 이 함수(클로저)에서는 객체가 최종적으로 반환됩니다. 이 객체에는 외부에서 직접 호출할 수 있는 일부 공용 메서드와 속성이 포함되어 있습니다. 왜냐하면 이러한 공용 메서드는 함수 내부에 정의되어 있기 때문입니다. 그러나 외부 세계에서는 반환된 공용 메서드 및 속성을 통해서만 특정 작업을 완료할 수 있으며 Singleton.privateMethod1 속성을 직접 호출할 수는 없습니다. 이를 통해 단일 개체는 외부 세계가 자신의 전용 속성 및 메서드에 직접 액세스하는 것을 격리할 수 있을 뿐만 아니라 일부 공통 속성 및 메서드를 외부 세계에 제공하여 특정 작업을 완료할 수 있습니다.

익명 함수 자체 실행으로 구성된 이 싱글톤 모드는 많은 js 라이브러리에서 널리 사용되지만, 페이지를 로드할 때 객체를 사용할 필요가 없다면 여전히 문제가 있습니다. 생성(예: DOM 트리 및 해당 속성에 대한 많은 계산 또는 다중 액세스 필요 등)을 수행하는 경우 js의 구문 분석 및 실행으로 직접 생성하는 것보다 필요할 때 생성하는 것이 합리적인 접근 방식입니다. 이 개념을 지연 로딩(lazy loading)이라고 하므로 위의 코드를 다음과 같이 수정합니다.

mySpace.Singleton=(function(){
    var uniqueInstance;
    function constructor(){
      var privateAttribute1=false;
      var privateAttribute1=[1,2,3];
      function privateMethod1(){
      }
      function privateMethod2(){
      }
      return {
        publicAttribute1:true,
        publicAttribute2:10,
        publicMethod1:function(){
          privateAttribute1=true;
          privateMethod1();
        },
        publicMethod2:function(arg){
          privateAttribute1=[4,5,6];
          privateMethod2();
        }

      }
    }

    return {
      getInstance:function(){
       if(!uniqueInstance){
         uniqueInstance=constructor();
       }
        return uniqueInstance;
      }
    }

  })();

여기서는 먼저 단일 객체가 생성되었는지 확인하기 위한 핸들로 익명 함수의 전용 변수인 UniqueInstance를 정의한 다음, 단일 객체에 대해 방금 정의한 모든 속성과 메서드를 함수에 넣습니다. 단일 객체는 함수가 호출될 때만 생성되며, 그렇지 않으면 직접 생성되지 않습니다. 그런 다음 getInstance 메소드가 포함된 객체가 반환됩니다. 이 메소드를 호출할 때 먼저 단일 객체가 존재하는지 확인하고 그렇지 않으면 생성자 함수를 호출하여 생성합니다. 단일 개체로 다시 돌아갑니다. 마지막으로 단일 객체의 메소드를 호출할 경우 mySpace.Singleton.getInstance().publicMethod1()을 사용해야 하는데, 여기서는 이렇게 호출해야만 단일 객체가 생성되고, 그렇지 않으면 단일 객체가 생성되지 않습니다. 자동으로 생성되며 실제로 주문형 로딩 또는 지연 로딩을 구현합니다.

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.