JS 구현 단례 모델의 6가지 방안 요약

앞말

오늘 디자인 모델 중의 - 창설형 모델을 복습한 결과 JS가 단일 모델을 실현하는 방안은 여러 가지가 있음을 발견하고 요약하여 다음과 같은 6가지 방식을 열거하여 여러분과 나누었다
대체로 ES5(Function)와 ES6(Class) 구현의 두 부분으로 구분됩니다.

단례 모델의 개념

단례 모델은 시스템에서 하나의 실례를 저장하는 것이다. 바로 전역 변수이다. 팀 개발에서 비슷한 기능을 실현하기 위해 예를 들어 서로 다른 페이지 간의 표 검증을 실현하기 위해 수요가 다를 수 있지만 이름이 같을 수도 있고 이때 충돌이 발생할 수 있다. 이때 단례 모델은 이 문제를 잘 해결할 수 있다.

하나의 실례는 한 번만 생산한다

하나의 클래스가 하나의 실례만 있고 전역 액세스 포인트를 제공할 수 있습니다.

그것의 장점을 말해 보세요.
1, 단일 모드는 고유한 전역 변수, 객체를 선언하는 방식으로 선언할 수 있는 네임스페이스를 생성합니다.
var mapleTao={ name:"mapleTao",init:function(){console.log(this.name)}};
유목유는 이것이 대상과 약간 유사하다는 것을 발견했습니다. 사실name,init는 그 속성입니다. 마플타오를 통해.name는 mapletao를 통해 name의 값을 가져옵니다.init () 는 init 방법을 호출할 수 있습니다. 이렇게 하면 다중 수요 페이지를 처리하고 다중 사람이 개발할 때 명명 충돌 문제를 잘 해결할 수 있으며 코드를 더욱 잘 유지하고 제어할 수 있습니다.
2, 단일 모드는 전체 국면에서 하나의 변수만 설명합니다. 모두가 알다시피 js에서 function aa(){}와 같은 방법을 썼다면 윈도우에서 aa라는 변수를 생성할 수 있습니다. 하나의 기능을 실현할 때 코드 봉인에서 많은 함수, 많은 function을 만들 수 있습니다. 그러면 윈도우에서 많은 변수를 만들고 더 많은 메모리 단원을 차지하며 전체 변수의 작용역이 넓습니다.많은 처리 함수에서 바뀔 수 있습니다. 이렇게 하면 버그가 발생할 때 신속하게 찾을 수 없고, 단일 모드를 통해 만들어진 대상 변수에서 문제를 더욱 신속하게 찾을 수 있으며, 이로 인해 문제를 복구하는 시간과 시스템이 불러오는 시간을 크게 줄일 수 있습니다.
3. 같은 기능을 실현하는 곳에서new를 통해 새로 만든 대상을 통해 메모리가 자원에 대한 점용보다 우세하다.

방식

instanceof를 이용하여 new 키워드 호출 함수를 사용하여 대상의 실례화 여부를 판단합니다

function User() {
    if (!(this instanceof User)) {
        return
    }
    if (!User._instance) {
        this.name = ' '
        User._instance = this
    }
    return User._instance
}

const u1 = new User()
const u2 = new User()

console.log(u1===u2);// true

방식

함수에 직접 방법 속성 호출 생성 실례 추가

function User(){
    this.name = ' '
}
User.getInstance = function(){
    if(!User._instance){
        User._instance = new User()
    }
    return User._instance
}

const u1 = User.getInstance()
const u2 = User.getInstance()

console.log(u1===u2);

방식

클러치 사용, 개선 방법 2

function User() {
    this.name = ' '
}
User.getInstance = (function () {
    var instance
    return function () {
        if (!instance) {
            instance = new User()
        }
        return instance
    }
})()

const u1 = User.getInstance()
const u2 = User.getInstance()

console.log(u1 === u2);

방식

포장 대상을 폐하의 형식과 결합하여 실현하다

const User = (function () {
    function _user() {
        this.name = 'xm'
    }
    return function () {
        if (!_user.instance) {
            _user.instance = new _user()
        }
        return _user.instance
    }
})()

const u1 = new User()
const u2 = new User()

console.log(u1 === u2); // true

물론 여기는 패키지 부분의 코드를 단독으로 함수로 봉인할 수 있다
단례에 빈번하게 사용되는 상황에서 이와 유사한 방안을 추천하면 당연히 내부적으로 상술한 임의의

function SingleWrapper(cons) {
    //  
    if (!(cons instanceof Function) || !cons.prototype) {
        throw new Error(' ')
    }
    var instance
    return function () {
        if (!instance) {
            instance = new cons()
        }
        return instance
    }
}

function User(){
    this.name = 'xm'
}
const SingleUser = SingleWrapper(User)
const u1 = new SingleUser()
const u2 = new SingleUser()
console.log(u1 === u2);

방식

구조 함수에서 new를 이용하다.target new 키워드 사용 여부 판단

class User{
    constructor(){
        if(new.target !== User){
            return
        }
        if(!User._instance){
            this.name = 'xm'
            User._instance = this
        }
        return User._instance
    }
}

const u1 = new User()
const u2 = new User()
console.log(u1 === u2);

방식

static 정적 방법 사용하기

class User {
    constructor() {
        this.name = 'xm'
    }
    static getInstance() {
        if (!User._instance) {
            User._instance = new User()
        }
        return User._instance
    }
}


const u1 = User.getInstance()
const u2 = User.getInstance()

console.log(u1 === u2);

총결산

JS 구현 단례 모델에 대한 이 글은 여기까지 소개되었습니다. JS 단례 모델에 대한 더 많은 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보시기 바랍니다. 앞으로 많은 응원 부탁드립니다!