디자인 모델 - 단일 모델 (단일 모델 소개 실전 사례 및 vuex 의 간단 한 분석)
27206 단어 디자인 모드
매번 실례 화 될 때마다 새로운 대상 이 생 긴 다. 이것 은 틀림없이 단일 모드 가 아니다
class SingleCase{
log(){
console.log(' ')
}
}
const singl1 = new SingleCase()
const singl2 = new SingleCase()
console.log(singl1==singl2) // false
위의 코드 를 개조 합 시다.
class SingleCase{
log(){
console.log(' ')
}
static getInstance(){
if(!SingleCase.instance){
SingleCase.instance = new SingleCase
}
return SingleCase.instance
}
}
const singl1 = SingleCase.getInstance()
const singl2 = SingleCase.getInstance()
console.log(singl1==singl2) // true
패 킷 + 구조 방식 단일 쓰기
function SingleCaseBase() {
}
SingleCaseBase.prototype.log = function () {
console.log(' ')
}
SingleCase= (function() {
let instance = null
return function () {
if (!instance) {
instance = new SingleCaseBase()
}
return instance
}
})()
const singl1 = SingleCase()
const singl2 = SingleCase()
console.log(singl1==singl2) // true
단일 모드 는 어떻게 사용 합 니까?
간단 한 상태 관리 기 를 실현 하 다
class SingleState {
//
data={}
//
get(key){
return this.data[key]||''
}
//
set(key,value){
return this.data[key]=value
}
//
static getInstance() {
if (!SingleState.instance) {
SingleState.instance = new SingleState
}
return SingleState.instance
}
}
const state_1 = SingleState.getInstance()
state_1.set('hi','hello') // key = hi value = hello
const state_2 = SingleState.getInstance()
console.log(state_2.get('hi')) // hello
Vuex 는 단일 모드 를 사용 합 니 다. 사용 과정 에서 Vue. use (Vuex) 를 통 해 Vuex 플러그 인 을 설 치 했 습 니 다. Vuex 플러그 인 은 대상 입 니 다. 내부 에서 인 스 톨 방법 을 실 현 했 습 니 다. 이 방법 은 플러그 인 을 설치 할 때 호출 되 어 Store 를 Vue 인 스 턴 스 에 주입 합 니 다.즉, 설치 할 때마다 Vue 인 스 턴 스 에 Store 를 주입 하려 고 시도 한 다 는 것 이다.
localStorage 를 봉인 하 다
원 리 는 위의 코드 와 대체로 같다.물론 아래 의 패 키 징 은 상대 적 으로 간단 합 니 다. 위 챗 애플 릿 으로 패 키 징 할 수 있 는 Storage 저장 소 는 어떤 유형 입 니까? 그러면 꺼 내 는 것 입 니까? 어떤 유형 입 니까? 후속 적 인 시리즈 글 전략 모델 은 이에 대해 다시 패 키 징 할 것 입 니 다.
class Storage {
//
get(key){
return localStorage.getItem(key)
}
//
set(key,value){
return localStorage.setItem(key,value)
}
//
static getInstance() {
if (!Storage.instance) {
Storage.instance = new Storage
}
return Storage.instance
}
}
const state_1 = Storage.getInstance()
state_1.set('hi','hello')
전역 탄 틀 실현
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style>
#modal {
height: 200px;
width: 200px;
line-height: 200px;
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 1px solid black;
text-align: center;
}
style>
head>
<body>
<button id="open"> button>
<button id="close"> button>
body>
<script>
class ModelBase {
//
constructor() {
this.target = document.createElement('div')
this.target.innerHTML = ' Modal'
this.target.id = 'modal'
this.target.style.display = 'none'
document.body.appendChild(this.target)
}
initElement() {
}
//
open() {
this.target.style.display = 'block'
}
//
close() {
this.target.style.display = 'none'
}
}
// ，
Model = (function () {
let instance = null
return function () {
if (!instance) {
instance = new ModelBase()
}
return instance
}
})()
//
document.querySelector('#open').addEventListener('click', function () {
const model = new Model()
model.open()
console.log('open')
})
//
document.querySelector('#close').addEventListener('click', function () {
const model = new Model()
model.close()
console.log('close')
})
script>
html>
엔 딩
우리 가 new 를 몇 번 이나 만 들 었 든 지 간 에, 그것 은 너 에 게 처음으로 만 든 유일한 인 스 턴 스 를 되 돌려 줄 뿐이다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
디자인 모델 의 공장 모델, 단일 모델자바 는 23 가지 디자인 모델 (프로 그래 밍 사상/프로 그래 밍 방식) 이 있 습 니 다. 공장 모드 하나의 공장 류 를 만들어 같은 인 터 페 이 스 를 실현 한 일부 종 류 를 인 스 턴 스 로 만 드 는 것...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
