자바스크립트 싱글턴 패턴-JS 튜토리얼-php.cn

자바스크립트 싱글턴 패턴

php中世界最好的语言

풀어 주다： 2018-03-13 18:08:11

원래의

1748명이 탐색했습니다.

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

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

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

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

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

기본 구조:

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

로그인 후 복사

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

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(&#39;Hello&#39;);let cat2 = getInstance(&#39;Kitty&#39;);console.log(cat1 === cat2); //trueconsole.log(cat1.getName()) //&#39;Hello&#39;console.log(cat2.getName()) //&#39;Hello&#39;

로그인 후 복사

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

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

//单例模式let createModal = function() {    let content = document.createElement(&#39;div&#39;);
    content.innerHTML = &#39;弹窗内容&#39;;
    content.style.display = &#39;none&#39;;    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 = &#39;block&#39;;
};

로그인 후 복사

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