자바스크립트 싱글턴 패턴

이번에는 자바스크립트의 싱글케이스 모드와 자바스크립트 싱글톤 모드의 주의사항에 대해 소개해 드릴게요.

싱글턴 패턴은 네임스페이스를 나누고 속성 및 메소드 배치를 함께 구성하는 데 사용되는 객체입니다. 인스턴스화할 수 있는 경우 한 번만 인스턴스화할 수 있습니다.

네임스페이스를 나누고 전역 변수를 줄입니다.

코드를 하나로 정리하여 읽고 유지하기 쉽습니다.

시뮬레이트된 데이터와 같이 모든 객체 리터럴이 싱글톤은 아닙니다.

기본 구조:

let Cat = {   name: 'Kitty',   age: 3,   run: ()=>{      console.log('run');
   }
}

위의 객체 리터럴 구조는 다음과 같습니다. 싱글턴 패턴을 만드는 방법 중 하나이지만 싱글턴 패턴은 아닙니다. 싱글턴 패턴의 특징은 한 번만 인스턴스화된다는 것입니다. 싱글턴 패턴을 구현하려면 변수를 사용하여 클래스가 생성되었는지 여부를 나타낼 수 있습니다. 기본 구현:

class Singleton {    constructor(name){        this.name = name;        this.instance = null;    }    getName(){        return this.name;    }}let getInstance = (()=> {    let instance;    return (name)=> {        if(!instance) {            instance = new Singleton(name);        }        return instance;    }})()let cat1 = getInstance('Hello');let cat2 = getInstance('Kitty');console.log(cat1 === cat2); //trueconsole.log(cat1.getName()) //'Hello'console.log(cat2.getName()) //'Hello'

인스턴스 변수를 사용하여 인스턴스를 표시합니다. 인스턴스가 없으면 인스턴스를 직접 반환합니다. 한 번만 인스턴스화할 수 있으므로 cat2에서 얻은 인스턴스는 다음과 같습니다. cat1과 동일합니다.

Practical
DOM 요소를 생성할 때 반복 생성을 피하기 위해 싱글톤 모드를 사용하여

//单例模式let createModal = function() {    let content = document.createElement('div');
    content.innerHTML = '弹窗内容';
    content.style.display = 'none';    document.body.appendChild(content);
}//代理获取实例let getInstance = function(fn) {    let result    return function() {        return result || (result = fn.call(this,arguments));
    }
}let createSingleModal = getInstance(createModal);document.getElementById("id").onclick = function(){    let modal = createSingleModal();
    modal.style.display = 'block';
};

를 생성할 수 있습니다. 더 흥미로운 정보를 보려면 이 기사의 사례를 읽은 후 방법을 익혔을 것입니다. PHP 중국어 웹사이트의 다른 관련 기사도 주목해주세요!

추천 도서:

Javascript의 관찰자 패턴

Javascript의 전략 패턴

위 내용은 자바스크립트 싱글턴 패턴의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!