프락시 패턴에서 살펴봤던 래퍼 기능을 데커레이터 패턴과 함께 사용하면, 해당 함수가 호출되기 전에 여러 가지 함수가 호출될 수 있도록 응용할 수 있습니다. 이렇게 응용할 수 있는 상황은 각 함수의 모니터링 기능을 넣고자 할 때입니다.
구현
함수 호출 전 시각과 이후의 시각을 출력하여 각 함수의 처리 시간을 유추할 수 있도록 합니다.
<html>
<head>
</head>
<body>
<script type="application/javascript">
(function(){
let monitorTool,
car,
wrapperFunction;
monitorTool = (function () {
let functionSequence = [];
return {
decorate: function (name, func) {
functionSequence.push({
name: name,
func: func
});
},
monitor: function (func) {
let length = functionSequence.length;
for (i = 0; i < length; i++) {
functionSequence[i].func.apply(this, arguments);
}
}
};d
}());
monitorTool.decorate("before", function (func) {
console.log(func.name + " function has started at " + Date.now());
});
monitorTool.decorate("decorated", function (func) {
func.apply(this, Array.prototype.slice(arguments, 1));
});
monitorTool.decorate("after", function (func) {
console.log(func.name + " function has finished at " + Date.now());
});
wrapperFunction = monitorTool.monitor;
car = {
beep: function beep() {
console.log("BEEP");
},
brake: function brake() {
console.log("STOP!");
},
accelerator: function accelerator() {
console.log("GO");
},
};
function wrap(func, wrapper) {
return function() {
let args = [func].concat(Array.prototype.slice.call(arguments));
return wrapper.apply(this, args);
};
}
function wrapObject(obj, wrapper) {
let prop;
for(prop in obj) {
if (obj.hasOwnProperty(prop) && typeof obj[prop] === "function") {
obj[prop] = wrap(obj[prop], wrapper);
}
}
}
wrapObject(car, wrapperFunction);
console.log("A. car.acceletor() monitor");
car.accelerator();
console.log("\nB. car.beep() monitor");
car.beep();
console.log("\nC. car.brake() monitor");
car.brake();
}());
</script>
</body>
</html>
결과
실행 결과를 보면 각 함수에서 호출이 시작되고 끝나는 데 걸리는 시간을 알 수 있습니다. 이러한 모니터링 도구를 변형하여 사용자의 사용 패턴이나 각 자바스크립트 함수의 호출 시간을 기록하여 컴퓨팅 자원을 분산하거나 병목을 분산하여 사용자 경험을 높일 수 있는 자료로 활용할 수 있습니다.
이전글
2021/02/10 - [Study Note/Javascript] - javascript #디자인패턴 - 폼 검증을 위한 데커레이터 패턴
javascript #폼 검증을 위한 데커레이터 패턴 적용
데커레이터 패턴 프락시 패턴은 호출되는 객체가 아닌 별도의 중간자 역할을 수행하는 프락시 객체가 추가 기능을 수행하는 패턴이라고 한다면, 데커레이터(decorator) 패턴은 호출 대상이 되는
simuing.tistory.com
2021/02/10 - [Study Note/Javascript] - javascript #디자인패턴 - 객체 기반 데커레이터 패턴
javascript #디자인패턴 - 객체 기반 데커레이터 패턴
하나의 객체에 여러 가지 기능들을 추가함으로써 기존의 객체에 추가로 꾸며진 객체를 만들어낼 수 있습니다. 데커레이터 패턴을 이용해 각기 다른 부품으로 이루어진 컴퓨터의 가격을 알아봅
simuing.tistory.com
참고도서 : 속깊은 자바스크립트
'Study Note > Javascript' 카테고리의 다른 글
| javascript #디자인패턴 - Self-defining function 패턴 (0) | 2021.02.12 |
|---|---|
| javascript #디자인패턴 - Init-time branching 패턴 (0) | 2021.02.10 |
| javascript #디자인패턴 - 객체 기반 데커레이터 패턴(decorator pattern) (0) | 2021.02.10 |
| javascript #디자인패턴 - 폼 검증을 위한 데커레이터 패턴(decorator pattern) (0) | 2021.02.10 |
| javascript #함수 호출 시 call(), apply() 로 this 설정 (0) | 2021.01.19 |
댓글