js 디자인 모델의 단일 모드

1. 정의

하나의 클래스가 하나의 실례만 생성하고 전역적으로 접근할 수 있도록 보장합니다.

2. 응용 범위

단열 모드의 응용은 매우 광범위하다. 일부 장면에서 일부 대상은 브라우저의 window 대상, 전역 캐시 대상 등 하나만 필요하다.실제 개발 과정에서 응용도 비교적 많다. 예를 들어 한 단추를 누르면 로그인 상자가 만들어진다. 몇 번을 눌러도 이 로그인 상자가 처음 만들어져야 하고 뒤에서 N번을 눌러도 이 로그인 상자를 다시 만드는 것이 아니라 다시 만드는 것이다. 이런 장면은 단열 모드로 이 로그인 상자를 만들 수 있다.

3. 간단한 단일 모델 실현

// 
const Singleton = function (name) {
    this.name = name
    // instance 
    this.instance = null
}
Singleton.prototype.getName = function () {
    return this.name
}

// 
Singleton.getInstance = function (name) {
    if (!this.instance){
        this.instance = new Singleton(name)
    }
    return this.instance
    
}

const A = Singleton.getInstance('A') 
const B = Singleton.getInstance('B')
console.log(A === B); //true
console.log(A.getName()); //A
console.log(B.getName()); //A

실현하기가 복잡하지 않다. 이미 생성된 실례를 저장하기 위해 개인 변수를 사용하고, 다음에 새로 만들 때 이 실례가 존재하는지 판단하고, 직접 되돌아오는 것이 존재하면 만들지 않으면 OK이다.

4. 투명판

투명판도 new Constructor 형식으로 대상을 만들고, 하나의 예를 사용하는 클래스는 일반적인 클래스를 사용하는 것과 같다.다음은 패키지 형식으로 단열류를 쓰고 패키지의 국부 변수를 사용하여 생성된 실례를 저장합니다.

// 

const Singleton = (function () {
    let instance = null
    // 
    function createDiv(html){
        if (instance){
            return instance
        }
        this.html = html

        return instance = this
    }
    createDiv.prototype.init = function () {
        let div = document.createElement('div')
        div.innerHTML = this.html
        document.body.append(div)
    }

    return createDiv
})()
const A = new Singleton('A') 
const B = new Singleton('B')
console.log(A === B); //true

5. 대리판

프록시 버전이 실현하고자 하는 목표는 정의된 종류의 코드와 관리 단례의 코드를 분리하여 더욱 작은 입도의 구분을 실현하고 단일 직책 원칙에 따르는 것이다

const Singleton = function (name){
    this.name = name
}
const proxySingleton = (function () {
    let instance = null
    return function (name) {
        if (!instance){
            instance = new Singleton(name)
        }
        return instance
    }
})()

6. 타성 단례

앞에서 쓴 예는 모두'클래스'를 바탕으로 한 단례 모델이다.그 목적은'클래스'로 생성된 유일한 대상을 만드는 것이다. (이곳의'클래스'는 위류를 가리킨다. 즉, 우리가 자바스크립트의 구조 함수를 다른 전통 언어의 클래스로 삼아 이해하는 것이다. 그러나 사실 자바스크립트에는 클래스가 존재하지 않는다는 개념이다. 모든 대상은 구조 함수가 원형을 바탕으로 복제된 것이기 때문에 대상을 대상으로 끌고 간다. 여기서 더 이상 말하지 않는다) 이해 타성 단례는 다음과 같다. 1.현재 이해해야 할'타성 단례'의 개념에 따르면 우리의 사상은 전체 국면에서 유일하게 위류로 생성된 대상을 실현하는 데 국한되지 않는다. 우리가 유지하는 유일한 단례는div일 수도 있고 목록일 수도 있고 자연히 하나의 대상일 수도 있다.2. 그리고 이해해야 할 것은'타성'이라는 두 글자이다. 즉, 우리가 유지하는 단례는 필요하지 않은 상황에서 생기지 않고 필요한 상황에서만 생성된다. 사실 이 점은 제2절의 간단한 단례 모델에서 이미 실현되었다. Singleton만 호출된다.Instance가 생성되고 생성된 후에 계속 존재할 것입니다. 예를 들어 우리는 로그인 상자가 필요합니다. 페이지에서 로그인을 클릭하면 이 로그인 상자가 팝업됩니다. 여러 번 클릭하면 같은 DOM 노드가 생성되고 이 DOM 노드는 첫 번째 호출 생성만 되며 뒤에 로그인을 클릭하면 이 DOM 노드만 복원됩니다.여기서 우리가 유지하는 유일한 예는 로그인 상자의DOM 노드이고 타성적으로 생성된 것이다. 즉, 로그인을 클릭하지 않으면 이 DOM 노드가 영원히 생성되지 않는다.다음은 타성 단례의 통용 코드를 제시한다

// 
const getSingle = function (fn){
    let instance = null;
    return function (){
        return instance || (instance = fn.call(this, arguments))
    }
}

위에서 유지한 로그인 상자의 예를 실현하려면 여기서 아이디어를 말하자면 fn의 기능은 로그인 상자를 만들고 로그인 상자의DOM을 되돌려주는 것이다. 코드는 다음과 같다.

const createLoginLayer = function(){
    let div = document.createElement( 'div' );
    div.innerHTML = ' ';
    div.style.display = 'none';
    document.body.appendChild( div );
    return div;
};
let createSingleLoginLayer = getSingle( createLoginLayer );
document.getElementById( 'loginBtn' ).onclick = function(){
    let loginLayer = createSingleLoginLayer();
    loginLayer.style.display = 'block';
};

7. 소결

단례 모델은 개발 과정에서 광범위하게 응용되고 특히 타성 단례가 있기 때문에 우리가 반드시 파악해야 할 점이다.그리고 몇 마디 더 늘어놓아야 할 것은 단일 직책 원칙, 개방 폐쇄 원칙, 최소 지식 원칙 등 대상을 대상으로 하는 개념에 관한 것이다. 위에서 언급한 것이든 언급하지 않은 것이든 우리는 어느 정도 이해해야 한다. 이런 원칙을 숙지하고 실제에 응용하면 코드의 질 향상에 커다란 영향을 미칠 것이다.