어떻게 Javascript로 단일 모드를 실현합니까
4881 단어 Javascript디자인 모델단일 모드
개요
단일 모드도 단일 모드라고 하는데 하나의 클래스가 하나의 실례만 있고 전역 접근점을 제공한다.
이 글을 읽기 전에 단례 모델의 개념에 대해 모호하거나 잘 모르겠지만 사실 일상적인 개발에서 단례 모델을 사용한 적이 있을 것이다.
JavaScript에는 클래스의 정의가 없습니다. 단례 모델의 특징은'유일한'과'전역 접근'입니다. 그러면 우리는 JavaScript의 전역 대상을 연상할 수 있습니다. ES6의let을 이용하여 중복 설명을 허용하지 않는 특성을 이용하여 이 두 가지 특징에 딱 맞습니다. 그렇습니다. 전역 대상은 가장 간단한 단례 모델입니다.
let obj = {
name:" ",
getName:function(){}
}그러나 우리는 이렇게 단례를 실현하는 것을 건의하지 않는다. 왜냐하면 전역 대상/전역 변수는 약간의 폐단이 있기 때문이다.
오염된 명칭 공간 (변수 이름 충돌) 유지 보수 시 관리하기 쉽지 않음 (잘못하면 덮어쓰기)
코드 구현
단순 단례 모드
분석: 하나의 실례만 있기 때문에 우리는if분지를 사용하여 판단하고 이미 존재하면 바로 되돌아오고 존재하지 않으면 새로운 실례를 만들어야 한다.
let Singleton = function(name){
this.name = name;
this.instance = null;
}
Singleton.prototype.getName = function(){
console.log(this.name);
}
Singleton.getInstance = function(name){
if(this.instace){
return this.instance;
}
return this.instance = new Singleton(name);
}
let winner = Singleton.getInstance("winner"); //winner
console.log(winner.getName());
let sunner = Singleton.getInstance("sunner"); //winner
console.log(sunner.getName())그러나 위의 코드는 여전히 문제가 존재한다. 왜냐하면 창설 대상의 조작과 판단 실례의 조작이 결합되어'단일 직책 원칙'에 부합되지 않기 때문이다.
개량판
사고방식: 하나의 폐쇄를 통해 실례를 판단하는 조작을 실현한다.
가방 닫기 경고: 가방 닫는 것을 이해하지 못하는 학생은 먼저 가방 닫는 것을 배우세요
let CreateSingleton = (function(){
let instance = null;
return function(name){
this.name = name;
if(instance){
return instance
}
return instance = this;
}
})()
CreateSingleton.prototype.getName = function(){
console.log(this.name);
}
let winner = new CreateSingleton("winner"); //winner
console.log(winner.getName());
let sunner = new CreateSingleton("sunner"); //winner
console.log(sunner.getName())에이전트 단례 모드
에이전트의 형식을 통해 창설 대상의 조작과 실례 판단의 조작을 결합 분리하여 더욱 작은 입도의 구분을 실현하고'단일 직책 원칙'에 부합한다.
let ProxyCreateSingleton = (function(){
let instance = null;
return function(name){
if(instance){
return instance
}
return instance = new Singlton(name);
}
})();
let Singlton = function(name){
this.name = name;
}
Singlton.prototype.getName = function(){
console.log(this.name);
}
let winner = new ProxyCreateSingleton("winner");
console.log(winner.getName());
let sunner = new ProxyCreateSingleton("sunner");
console.log(sunner.getName());불활성 단례 모드
우리는 자주 이런 장면을 볼 수 있다. 페이지가 여러 번 호출되면 모두 탄창 알림이 있는데 알림 내용이 다르다.
이때 우리는 즉시 단례 모델이라고 생각할 수 있다. 탄창은 단례 실례이고 제시 내용은 매개 변수 전달이다.우리는 타성 단례 모델로 그것을 실현할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="loginBtn"> </div>
</body>
<script>
let getSingleton = function(fn) {
var result;
return function() {
return result || (result = fn.apply(this, arguments)); // this
}
}
let createAlertMessage = function(html) {
var div = document.createElement('div');
div.innerHTML = html;
div.style.display = 'none';
document.body.appendChild(div);
return div;
}
let createSingleAlertMessage = getSingleton(createAlertMessage);
document.getElementById('loginBtn').onclick=function(){
let alertMessage = createSingleAlertMessage(' ');
alertMessage.style.display = 'block';
}
</script>
</html>이상은 자바스크립트로 어떻게 단일 모드를 실현하는지에 대한 상세한 내용입니다. 자바스크립트 단일 모드에 대한 더 많은 자료는 저희 다른 관련 글에 주목하세요!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
java,python,JavaScript 및 jquery 순환 문장의 차이2. 자바 순환 문장 조건 문장이 무엇이든지 간에 코드 블록은 최소한 한 번 실행되고do/while 순환을 사용할 수 있습니다.do/while 문법: 즉, 코드 블록을 먼저 집행한 다음에 조건이 성립되었는지 판단하고...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
