안녕하세요 정말 오랜간만에 포스팅을 하는 것 같습니다.
ㅜㅜ 회사일이 너무 바쁘네요;; 주말에는 잠만 자구..
사실 이번 포스팅도 조금 억지 스러울 수 있는데요
당연히 포스팅한줄 알았지만
포스팅이 안되어있어서 포스팅하게 되었습니다.
JavaScript를 통한 싱글톤 인스턴스 생성인데요
Prototype의 경우
Instance = (function(){
function Instance(name){
this.eventObj = {
"key":"value"
}
}
// new를 하지 않으면 애초에 생성 불가
Instance.prototype.In = function(module,eventListener){
// this.eventObj 가능
console.log(this.eventObj);
}
Instance._In = function(module,eventListener){
// this.eventObj 불가능
console.log(this.eventObj); // undefined
console.log(eventObj); // ReferenceError : eventObj is not defined
}
return Instance;
})();
와 같이 this로 객체를 사용하기위해선 모두다 Prototype을 해주어야 합니다.
Instance = (function(){
function Instance(name){
this.eventObj = {
"key":"value"
}
}
Instance.prototype.In = function(module,eventListener){
// this.eventObj 가능
console.log(this.eventObj); // {key : "value" }
}
// _In 은 애초에 사용 불가
Instance._In = function(module,eventListener){
// this.eventObj 불가능
console.log(this.eventObj);
console.log(eventObj);
}
return new Instance;
})();
또한 단순히 Instance로 하여서
var test = new Instance() 로 한다고 하여도
협업을 한다고 가정 하였을 때 저는
A.js 에서 var test = new Instance(); 하였는데
다른 QA분이
B.js 에서 var test = new Instance(); 하게되면
중앙관리가 되지 않습니다. 그렇다보니 싱글톤 패턴을 사용하게 됩니다.(인스턴스는 1개)
이런 경우는 Prototype을 사용할 필요가 없습니다. 어차피 1개의 인스턴스만 사용될거니간요
테스트 해야 하는 케이스 중 2건 입니다.
//
onLoad
( 제품이 최초 실행되는 시점에 발생하는 onLoad 콜백 )
onBeforeLoad
( onLoad 전에 실행되는 onBeforeLoad 콜백 )
//
EventListener를 테스트해야 합니다. 해당의 리스너들은 호출이 되었을때 flag형태로 가지게 되는데
1번 호출 시 true
2번 이상 호출시 false 입니다.
해당에 대한 내용을 확인 할수 있도록 싱글톤 패턴을 사용합니다.
var flag = (function(){
'use strict'
var instance;
var topEventObj = {
"APP":{
},
"DOM":{
}
}
function _addEventProperties(obj){
if(typeof obj !=='object'){
return;
}
// 값 추가
Object.defineProperty(
topEventObj[obj.module],
obj.eventListener,{
value:true,
writable:true,
configurable:true,
enumerable:true
}
)
}
function In(module,eventListener){
if(typeof module ==='undefined' || typeof eventListener ==='undefined'){return;}
var obj = changeProperties(module,eventListener);
!!topEventObj[obj.module].hasOwnProperty(obj.eventListener) ?
(topEventObj[obj.module][obj.eventListener] = false) :
_addEventProperties(obj);
}
function Out(module,eventListener){
if(typeof module ==='undefined' || typeof eventListener ==='undefined'){return;}
var obj = changeProperties(module,eventListener);
return !!topEventObj[obj.module].hasOwnProperty(obj.eventListener) ?
topEventObj[obj.module][obj.eventListener] :
false;
}
function changeProperties(module,eventListener){
return {
module:module.toUpperCase(),
eventListener:eventListener.toUpperCase()
}
}
function initialize(){
return {
In:In,
Out:Out,
}
}
return {
getInstance:function(){
if(!instance){
instance = initialize();
}
return instance;
}
}
})().getInstance();
사용법은 다음과 같습니다.
JS-USE category 이기 때문에 JS에서
IIFE -> Singleton 과 JavaScript Object 에 대해서 다시 한번 설명하도록 하겠ㅅ브니다.
flag.In('app','onload');
flag.Out('app','onload'); // true
flag.In('app','onload');
flag.In('app','onload');
flag.Out('app','onload'); // false
().getInstance()를 통해서 생성과 동시에 flag에 인스턴스를 생성 하였습니다.
원래는 저부분이 빠지고
var test = flag.getInstnace(); 형태입니다.
이후에 var test2 = flag.getInstance로 하여도 이미 생성된 instance가 있기 때문에 새로 객체를 만들지 않습니다.
순서는 단순합니다.
In -> module과 eventListener를 파라미터로 받습니다.
값에 정합성을 위하여 모든 파라미터를 toUpperCase()를 적용합니다.
var topEventObj = {
"APP":{
},
"DOM":{
}
}
해당 객체를 가지고 테스트합니다.
** hasOwnProperty 를 통해서 해당 값이 있을경우는 해당 값을 false로 변경하고
** 없을 경우는 defineProperty 를 통해서 생성합니다.
포스팅을 뭔가 쉬지 않아야 한다는 느낌 때문에
억지로 쓴거 같긴한데 ㅜ
읽어 주셔서 감사합니다.