HTML 문자열만으로 이름을 모르는 함수객체에 객체Parameter 전달하여 호출하기

이번 포스트의 제목을 어떻게 정해야 할지 무척 고민이 됩니다.
제목이 무척 길어진 만큼 말하고자 하는 내용이 무엇인지 설명하기 힘듭니다.
누구든 분명 웹 프로그래밍(client tier)을 하면서 필요할 것 같아서 시간을 쪼개어 포스팅 해봅니다.
말하고자 하는 주제를 이해하기 위해 상상력을 좀 동원해 주시기 바랍니다.

요즘들어 javascript 라이브러리를 검색해서 사용하는 것은 일반화 된것 같습니다.
그런데, 본인이 직접 만들어서 사용하는 라이브러리와의 차이점은 쓰고자 하는 기능은 다 있는데,
정작 사용할 수 없게 만드는 요소가 간혹 생긴다는 것입니다.

예를 들어 이런 함수가 있는  라이브러리를 생각해 보죠.
makeElement(domId, htmlStr)
domId와 html 문자열을 전달하면 해당 Element에 전달된 Html 문자열에 맞는 내용을 표시해 주는
함수입니다.
(설명을 위해 예를 든것이니까, 이런 라이브러리를 왜쓰냐고 의아함은 잠시 접어두시길 바라면서..)

계속 예를 들어 보죠.
저는 버튼을 생성하고 버튼이 클릭되면 제가 만든 어떤 함수가 호출되길 바라는 문자열을 이 함수의 두번째 인자로 전달 하려고 합니다.
그리고 그 버튼이 클릭될때 호출될 함수에 제가 만든 어떤 객체도 전달할 거구요.

여기에 화면에 표시하고 싶은 HTML문자열과 함수호출에 전달하고 싶은 객체를 코드로 표시 했습니다.
처음 얘기한 makeElement라는 함수를 호출도 했습니다.
 var obj = {url:"www.tistory.com", name:"Tistory, 수많은 사람들의 상상력"}; var htmlStr = "<button onclick='myFunction(obj)'>"+obj.name+"</button>"; makeElement("myDiv", htmlStr);
버튼 Element를 표시하는 HTML문자열을 구성하고 있구요,
onclick 이벤트를 이용해서 미리 만들어 놓은 myFunction이라는 함수를 호출하게 했구요,
바로 윗줄에서 생성한 obj라는 객체도 전달하도록 구성했습니다.

여기에 미리 만든 myFunction이라는 함수가 있는데, 바로 버튼이 클릭되면 호출되길 바라는 함수입니다.
var myFunction = function(obj){ alert("obj.url : "+ obj.url + "\n\n obj.title : "+obj.name); }
이 함수는 어떤 Object를 인수로 받아 그  Object의 id와 name이라는 속성을 접근해서 사용하는 것입니다.


과연, 위의 코드대로 실행하면 원하는 결과가 나타 날까요?
당연히 obj가 정의 되지 않았다는 오류를 발생시키게 됩니다.
문제는 이뿐만이 아닙니다.
위와 같이 myFunction이라는 함수 이름을 알고 있을때는 문제가 되지 않지만,
함수 호출을 한번 추가 하여, myFunction함수를 객체 인수로 전달 받았을때는
onclick이벤트에 기재할 이름조차 모를 수 있습니다.
window.onload = function(){ var obj = {url:"www.tistory.com", name:"Tistory, 수많은 사람들의 상상력"}; makeHTML(myFunction, obj); } var makeHTML = function(funcObj, paramObj){ var htmlStr = "<button onclick='funcObj(paramObj)'>" +paramObj.name+"</button>"; makeElement("myDiv", htmlStr); }

이렇게 말이죠.
문제가 여기까지 오게 되면 click 이벤트가 발생하여도 함수를 찾을 수 없다는 오류만 발생할 뿐 원하는 함수의 호출은 불가능 합니다.


이와 같이 문자열로 HTML 문장을 만들어 원하는 함수와 인수(특히, 객체)를 전달하는 경우
 그 해결 방법을 이야기 하려고 합니다.

var makeHTML =function(funcObj, paramObj){ var tempFunction = function(){ funcObj.call(this, paramObj); } eval("buttonClick = "+tempFunction); var htmlStr = "<button onclick='buttonClick()'>"+ paramObj.name +"</button>"; makeElement("myDiv", htmlStr); }

이 함수는 함수 객체와 그 함수에 전달하고자 하는 파라미터 객체를 이용해서
가상의 내부 함수를 정의 한 후에 그 가상의 함수에 적절한 이름을 지정해서 문자열의 onClick이벤트에 기재합니다.

결국, 정리한 사용법은 이렇게 되겠지요.
var makeHTML =function(funcObj, paramObj){ var tempFunction = function(){ funcObj.call(this, paramObj); } eval("buttonClick = "+tempFunction); var htmlStr="<button onclick='buttonClick()'>"+ paramObj.name +"</button>"; makeElement("myDiv", htmlStr); } window.onload= function(){ var obj = {url:"www.tistory.com", name:"Tistory, 수많은 사람들의 상상력"}; makeHTML(myFunction, obj); }