ES6 를 이용 하여 단일 모델 과 그 응용 에 대한 상세 한 설명 을 실현 합 니 다.
전통 적 인 개발 엔지니어 의 눈 에는 하나의 사례 만 있 고 실현 하 는 방법 은 보통 인 스 턴 스 의 존재 여 부 를 판단 하 는 것 이다.존재 하지 않 으 면 만 들 고 되 돌아 오 는 것 이다.그러면 하나의 인 스 턴 스 대상 만 확보 할 수 있다.JavaScript 에 서 는 하나의 네 임 스페이스 공급 자로 서 전체 네 임 스페이스 에서 유일한 접근 점 을 제공 합 니 다.
단일 모드 의 정 의 는 하나의 인 스 턴 스 만 있 고 전체 방문 점 을 제공 하 는 것 입 니 다.
단일 모드 는 적당 할 때 대상 을 만 들 고 유일한 하 나 를 만 들 수 있 습 니 다.
코드 가 생활 에 가 까 워 서 재미 있어 요.예 를 들 어 한 사이트 의 로그 인,로그 인 을 클릭 하면 로그 인 탄 상자 가 나타 나 고 다시 클릭 하 더 라 도 같은 탄 상자 가 나타 나 지 않 습 니 다.또 하나의 음악 재생 프로그램 이 있 습 니 다.만약 에 사용자 가 음악 을 열 고 음악 을 열 려 면 이전의 재생 인터페이스 가 자동 으로 닫 히 고 현재 의 재생 인터페이스 로 전환 합 니 다.이것들 은 모두 단일 모델 의 응용 장면 이다.
하나의 사례 모델 을 실현 하려 면 하나의 전형 적 인 방식 은 하나의 클래스 를 만 드 는 것 입 니 다.클래스 에서 또 하나의 방법 으로 이러한 인 스 턴 스 대상 을 만 들 수 있 고 또 하나의 태그 가 있 습 니 다.인 스 턴 스 대상 을 만 들 었 는 지 기록 하 는 것 입 니 다.대상 이 이미 존재 한다 면,첫 번 째 실례 화 대상 의 인용 을 되 돌려 줍 니 다.
단일 모드 의 실현
es5 실현 방식
var Singleton = function(name) {
this.name = name;
// ，
this.instance = null;
}
// ，
Singleton.getInstance = function(name) {
//
if(!this.instance) {
this.instance = new Singleton(name);
}
// ，
return this.instance;
}우 리 는 이 대상 에 대해 두 번 의 실례 화 를 시도 하여 두 번 의 실례 화 결과 가 같은 대상 을 가리 키 는 지 관찰 하려 고 한다.
var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
//
console.log(a === b);es6 실현 방식
싱글 톤 클래스 를 만 듭 니 다.class 키워드 와 정적 함 수 는 모두 es6 에서 새로 추 가 된 것 입 니 다.
class Singleton {
constructor(name) {
this.name = name;
this.instance = null;
}
// ，
static getInstance(name) {
if(!this.instance) {
this.instance = new Singleton(name);
}
return this.instance;
}
}우 리 는 생활 속 에서 흔히 볼 수 있 는 장면 으로 단일 모델 의 응용 을 설명 한다.
임의의 사이트 에서 로그 인 단 추 를 누 르 면 있 고 하나의 로그 인 상자 만 팝 업 됩 니 다.나중에 로그 인 단 추 를 누 르 더 라 도 하나의 탄 상자 가 더 이상 팝 업 되 지 않 습 니 다.이것 이 바로 단일 모델 의 전형 적 인 응용 이다.이제 우 리 는 그것 을 실현 한다.단일 모드 의 전 시 를 중시 하기 위해 서,우 리 는 로그 인 상 자 를 간소화 합 시다.😜
페이지 에 단 추 를 설정 합 니 다.
<button id="loginBtn"> </button>
const btn = document.getElementById('loginBtn');
btn.addEventListener('click', function() {
loginLayer.getInstance();
}, false);
init() {
var div = document.createElement('div');
div.classList.add('login-layer');
div.innerHTML = " ";
document.body.appendChild(div);
}원본 코드:
class loginLayer {
constructor() {
//
this.instance = null;
this.init();
}
init() {
var div = document.createElement('div');
div.classList.add('login-layer');
div.innerHTML = " ";
document.body.appendChild(div);
}
//
static getInstance() {
// ，
if(!this.instance) {
this.instance = new loginLayer();
}
return this.instance;
}
}
.login-layer {
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, .6);
text-align: center;
line-height: 200px;
display: inline-block;
}
<!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> </title>
<style>
.login-layer {
width: 200px;
height: 200px;
background-color: rgba(0, 0, 0, .6);
text-align: center;
line-height: 200px;
display: inline-block;
}
</style>
</head>
<body>
<button id="loginBtn"> </button>
<script>
const btn = document.getElementById('loginBtn');
btn.addEventListener('click', function() {
loginLayer.getInstance();
}, false);
class loginLayer {
constructor() {
this.instance = null;
this.init();
}
init() {
var div = document.createElement('div');
div.classList.add('login-layer');
div.innerHTML = " ";
document.body.appendChild(div);
}
static getInstance() {
if(!this.instance) {
this.instance = new loginLayer();
}
return this.instance;
}
}
</script>
</body>
</html>이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 참고 학습 가치 가 있 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JavaScript로 카드 놀이를 넘기는 애니메이션을 만들려고했습니다.카드를 넘기는 애니메이션을 만들어 보았습니다. 폴더 구성은 다음과 같습니다. 코드는 다음과 같습니다. card_turning.html 다음은 JavaScript 코드입니다. cardTurning.js 결과는, 이런 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
