JavaScript 싱글톤 패턴 개념 및 코드 예제

서문

다른 프로그래밍 언어와 마찬가지로 Javascript에도 싱글톤 모드, 프록시 모드, 관찰자 ​​모드 등 많은 디자인 패턴이 있습니다. Javascript 디자인 패턴을 사용하면 코드 논리를 더 명확하고 유지 관리 및 리팩토링하기 쉽게 만들 수 있습니다.

이번 글에서는 자바스크립트 모드 중 더욱 일반적이고 실용적인 모드인 싱글톤 모드를 소개하겠습니다. 크게 개념과 예시로 나누어서 설명하겠습니다. 예제를 소개하면서 코드의 추가 지식 포인트도 설명합니다.

싱글턴 패턴의 개념

먼저 싱글턴 패턴이란 무엇일까요? 이는 다음과 같이 이해될 수 있습니다. 싱글턴 패턴은 클래스에 인스턴스가 하나만 있고 전역 액세스 지점을 제공하는 것을 목표로 합니다.

아직 싱글턴의 개념을 이해하지 못하는 분들도 계시니, 생활 속 예시를 상상해 보세요. 예를 들어, 계정을 등록할 때 등록한 계정이 이미 존재하는 경우 "계정이 이미 존재합니다. 이 계정을 사용하여 로그인하시겠습니까?"라는 메시지가 표시됩니다. 취소하지 않으면 동일한 계정을 다시 만들 수 없습니다. 원래 계정. 이는 싱글톤 패턴의 생생한 구현입니다.

비슷한 예는 웹페이지의 로그인 팝업 상자입니다. 로그인 버튼을 몇 번 클릭해도 인터페이스에는 항상 하나의 로그인 팝업 상자만 표시되고, 두 번째는 로그인 팝업 상자입니다. 하나는 생성될 수 없습니다.

이 글에서는 로그인 팝업 상자를 예로 들어 싱글톤 모드 사용을 소개합니다.

싱글턴 모드 인스턴스

1.demo 디스플레이

데모 주소: 팝업 상자 인스턴스

2. 코드 표시

싱글톤 모드 팝업 상자 인스턴스를 작성하는 코드는 사람마다 다르게 작성될 수 있지만 목적은 동일합니다. 즉, 전역적으로 고유하고 액세스 가능한 팝업 상자를 작성하는 것입니다. 다음으로 이 예제를 단계별로 구현해 보겠습니다.

(1) DOM 객체 가져오기

var $ = function(id) {
    return typeof id === 'string' ? document.getElementById(id) : id; 
};

먼저 DOM에 대한 후속 작업을 용이하게 하기 위해 여기서는 함수형 프로그래밍의 원리를 사용합니다. 대상 ID의 요소 개체를 가져옵니다. 이 메서드는 캡슐화되어 있으며 $(id)를 사용하여 직접 얻을 수 있습니다.

(2) 팝업 프레임 생성자

var Modal = function(id, html) {
    this.html = html;
    this.id = id;
    this.open = false;
};

여기서 Modal을 팝업 프레임의 생성자로 선언하고 공개 속성인 html과 id를 정의합니다. 내부적으로 개방되어 있습니다. HTML은 팝업 상자 내부의 콘텐츠를 정의하는 데 사용되고, id는 팝업 상자의 ID 이름을 정의하는 데 사용되며, open은 팝업 상자가 열려 있는지 확인하는 데 사용됩니다.

(3) open 메소드

Modal.prototype.create = function() {
    if (!this.open) {
        var modal = document.createElement('p');

        modal.innerHTML = this.html;
        modal.id = this.id;
        document.body.appendChild(modal);

        setTimeout(function() {
            modal.classList.add('show');
        }, 0);

        this.open = true;
    }
};

Modal의 프로토타입 체인에 create 메소드를 정의했으며 메소드 내부에 팝업 상자를 생성하고 DOM에 삽입합니다. , 동시에 팝업 상자에 "show" 클래스의 애니메이션 효과 추가를 제공합니다. classList에 대한 간략한 소개는 다음과 같습니다.

classList는 className보다 요소 클래스를 조작하는 데 더 편리한 속성이지만 호환성 측면에서 IE10 이하 버전과 호환되지 않습니다.

제공하는 클래스 작업 방법은 jQuery의 작업 방법과 유사하며 주로 하나 이상의 클래스 이름을 추가하는

• add(class1, class2, ...)를 포함합니다. jQuery의 addClass()

• remove(class1, class2, …)와 유사한 요소는 jQuery의 RemoveClass()

  <🎜와 유사하게 요소에서 하나 이상의 클래스 이름을 제거합니다. >
• contains(class) jQuery의 hasClass()와 유사하게 지정된 클래스 이름이 존재하는지 확인합니다.

여기서 add 메소드를 사용하여 show 클래스를 Modal에 추가합니다. .

(4) 닫기 메소드

Modal.prototype.delete = function() {
    if (this.open) {
        var modal = $(this.id);

        modal.classList.add('hide'); 
        setTimeout(function() {
            document.body.removeChild(modal);
        }, 200);

        this.open = false;
    }
};

open 메소드를 정의한 후 여기에 팝업 상자를 닫는 메소드를 정의하고 클래스 숨기기 애니메이션 효과를 추가합니다. 그 안에 있는 팝업 상자 개체에 추가하고 마지막으로 페이지에서 팝업 개체를 제거합니다.

(5) 인스턴스 생성

var createIntance = (function() {
    var instance;
    return function() {
        return instance || (instance = new Modal('modal', '这是一个弹框'))
    }
})();

이것은 싱글턴 패턴 구현의 중요한 부분입니다. 지식 포인트를 분석해 보겠습니다.

1. 클로저 를 사용하여 인스턴스 전용 변수를 캡슐화하고 함수를 반환합니다.

2. || 구문을 사용하여 인스턴스가 존재하지 않는지 확인하고 후자의 구문을 실행합니다. 인스턴스화 모달 메서드가 존재하는 경우 인스턴스를 직접 반환하여 팝업 인스턴스가 하나만 있는지 확인합니다.

이 인스턴스 생성도 프록시의 일부로 이해할 수 있습니다. 방법.

(6) 버튼 조작

var operate = {
    setModal: null,
    open: function() {
        this.setModal = createIntance();
        this.setModal.create();
    },
    delete: function() {
        this.setModal ? this.setModal.delete() : '';
    }
};

여기서는 버튼 조작을 Operate 객체에 넣어서 열고 닫는 조작이 이를 통해 인스턴스 setModal을 얻을 수 있도록 합니다.

(7) 이벤트 바인딩

$('open').onclick = function() {
    operate.open();
};

$('delete').onclick = function() {
    operate.delete();
};

마지막으로 열기 및 삭제 메서드를 두 개의 버튼에 바인딩합니다. 이 시점에서는 싱글톤 모드를 사용하여 구현합니다. 팝업 상자 데모가 구현되었습니다.

전체 코드 보기: 전체 코드

결론

위는 JavaScript 싱글턴 모드 개념 내용과 코드 예시입니다. PHP 중국어 홈페이지(www.php.cn)로!