Self-defining function 패턴
Self-defining function은 자바스크립트의 변수에 함수를 쉽게 재정의하고 덮어쓸수 있는 장점에서 나온 디자인 패턴이다.
이 패턴은 말 그대로 자신을 다시 정의하는 함수 패턴을 말한ㄷ.
자바스크립트로 개발하다보면 특정 함수를 호출하기 전에 초기화 작업을 수행해야하는 때가 많다. 이럴 때 최초 즉시 호출함수를 이용해서 Init-time branching 패턴 등으로 초기화 하는 방법도 있지만, 자주 호출되지 않거나 웹페이지 상에서 한번 호출되지 않는 함수는 초기화 단계를 무조건 실행하도록 하는 것은 자원을 추가로 소모하게 된다.
이럴 때 Self-defining function 패턴을 사용하면 초기화 단계들의 컴퓨팅 자원 소모를 분산할 수 있다.
초기화 단계를 분산함으로써 얻을 수 있는 이점은 바로 사용자 경험이 개선될수 있다는 점이다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>hello</title> <style> #commentWrapper { width: 200px; } .comment { width: 150px; display: inline-block; } .name { width: 40px; display: inline-block; } </style> </head> <body> <div id="commentWrapper"> <div> <div class="comment">Comment</div> <div class="name">Name</div> </div> </div> <form id="formComment"> <label>Comment: <input type="text" id="comment"/></label> <label>Name: <input type="text" id="name"/></label> <input type="submit"/> </form> <script> (function(){ var addComment = function(){ console.log("addComment"); var divCommentWrapper = document.getElementById("commentWrapper"), divCommentRow = document.createElement("div"), divComment = document.createElement("div"), divName = document.createElement("div"), inputComment = document.getElementById("comment"), inputName = document.getElementById("name"); divComment.className ="comment"; divName.className="name"; divCommentRow.appendChild(divComment); divCommentRow.appendChild(divName); addComment = function(){ divComment.innerHTML = inputComment.value; divName.innerHTML = inputName.value; divCommentWrapper.appendChild(divCommentRow.cloneNode(true)); inputComment.value =""; inputName.value =""; }; addComment(); }; document.getElementById("formComment").addEventListener("submit", function(){ addComment(); event.returnValue = false; return false; }); }()); </script> </body> </html> |
addComment() 함수가 처음 호출될 때 방명록에서 사용할 템플릿 등 필요한 내용들을 초기화하고 방명록을 추가할 DOM을 불러온다.
그리고 addComment() 함수 안에서 다시 한번 addComment()를 새로운 함수로 재정의하는데, 최초의 addComment() 함수에서 했던 DOM 템플릿 생성과 DOM 탐색한 결과를 그대로 이용하고, 변경이 필요한 부분만 수정한다.
이처럼 처음에 초기화 단계를 거치고 나면 이후에 같은 작업을 계쏙 반복하지 않아도 될때는 초기화 단계의 정보를 클로저에 보관하고 변경되는 내용만 변경되도록 Self-defining function 패턴을 이용하면 좋다.
Self-defining function 패턴의 장점은 외부에서 해당 함수를 호출할 때 보이는 변경 점은 없지만, 내부적으로 초기화 단계를 거치고 나서 이후의 처리 프로세스를 최적화할 수 있다는 점이다.
때에 따라서는 자동으로 생성되는 클로저를 활요해서 초기화 단계에서 생성되거나 수집한 데이터를 보관하고 있을 수 있으므로 일회성 처리를 수용하기에 좋은 패턴이다.
단점이라면 불필요한 클로저가 생성되고 데이터가 메모리에 계속 남아 있을 수 있다. 따라서 해당 변수를 한 번만 사용하고 사용 안할 것이라면 그냥 undefined로 초기화하는 것이 좋다.
출처-속깊은 자바스크립트 양성익 지음
'FRONT-END > JAVASCRIPT' 카테고리의 다른 글
| 자바스크립트 디자인 패턴 #8. Self-invoking constructor 패턴 (0) | 2018.01.03 |
|---|---|
| 자바스크립트 디자인 패턴 #7. Memoization 패턴 (0) | 2018.01.03 |
| 자바스크립트 디자인 패턴 #5. Init-time branching 패턴 (0) | 2018.01.03 |
| 자바스크립트 디자인 패턴 #4. Decorator 패턴 (0) | 2018.01.03 |
| 자바스크립트 디자인 패턴 #3. Proxy 패턴 (0) | 2018.01.02 |