programmer: 9월 2014

https://github.com/es-shims/es5-shim/blob/v4.0.3/es5-shim.js

<script type="text/javascript">
Wrapper = (function (NativeDate) {
// Date.length === 7
function Wrapper(Y, M, D, h, m, s, ms) {
var length = arguments.length;
console.log(this);
console.log(NativeDate);
console.log(this instanceof NativeDate);
if (this instanceof NativeDate) {
var date = length === 1 && String(Y) === Y ? // isString(Y)
// We explicitly pass it through parse:
new NativeDate(Date.parse(Y)) :
// We have to manually make calls depending on argument
// length here
length >= 7 ? new NativeDate(Y, M, D, h, m, s, ms) :
length >= 6 ? new NativeDate(Y, M, D, h, m, s) :
length >= 5 ? new NativeDate(Y, M, D, h, m) :
length >= 4 ? new NativeDate(Y, M, D, h) :
length >= 3 ? new NativeDate(Y, M, D) :
length >= 2 ? new NativeDate(Y, M) :
length >= 1 ? new NativeDate(Y) :
new NativeDate();
// Prevent mixups with unfixed Date object
date.constructor = Wrapper;
console.log('there');
return date;
}
console.log('here');
return NativeDate.apply(this, arguments);
}

Wrapper.prototype = NativeDate.prototype;
Wrapper.prototype.constructor = Wrapper;

// Upgrade Date.parse to handle simplified ISO 8601 strings
Wrapper.parse = function parse(string) {
return NativeDate.parse.apply(this, arguments);
};
return Wrapper;
})(Date);
</script>

아래 예제는 jquery 같은 라이블러리에서 어떻게 이벤트를 wrapping 하는지에 대한
가장 기초적인 예제이다.

순수 자바 스크립트를 사용할 경우에 이벤트에 연관된 인스턴스를 event.srcElement 에서
끄내서 써야 된다.

var test1 = document.getElementById('test1');
test1.onclick = function(event) {
      console.log(arguments);
      console.log(event.srcElement);
};

위와같은 경우 불편하다!
그럼 jquery 와 같이 제공해줄려면 어떻게 해야될까?
뤱퍼를 만들어서 해당 인스턴스를 만들고 해당 이벤트 호출시
이벤트 객체와 this 를 같이 넘겨주면 된다.

그럼 어떻게 구현해야 될까?
답은 클로저이다 클로저의 경우 정의 시점에 넘어간 파라미터를 scope chain 을 통해
참조 할수 있음으로 정의 시점과 실행 시점을 분리할수 있다
또한 내가 원하는 argement 를 실행 시점에 넘겨 줌으로 jquery 와 같은 뤱핑을 할수 있다.

var test3 = new DhtmlObject('test3');
위와 같이 DhtmlObject을 생성할 경우 해당 element 를 가져와서 이미정의된 브라우저
(여기서는) 클릭 펑션에 associateObjWithEvent 를 실행해서 할당한다.
associateObjWithEvent 의 경우 최초 아규먼트를 받아 자신의 activation obj에 할당하고
inner function 을 리턴한다.(이벤트 처리 펑션) inner function 의 scope chain 에는 outer
function 의 scope 가 들어가 있기 때문에 outerfunction 이 리턴된 후 에도 outer function 의 아규먼트에 접근 가능 하며 실제 실행될때는 리턴된 inner function 이 실행된다.

http://jibbering.com/faq/notes/closures/#clSto
상세 설명은 위의 글을 참고 바란다.

<html>
<head lang="en">

<title></title>
<script>

function associateObjWithEvent(obj, methodName){
return (function(e){
e = e|| window.event;

return obj[methodName](e, this);
});
}

function DhtmlObject(elementId){
var el = document.getElementById(elementId);
if(el){
el.onclick = associateObjWithEvent(this,'doOnClick');
el.onmouseover = associateObjWithEvent(this, "doMouseOver");
el.onmouseout = associateObjWithEvent(this, "doMouseOut");
}
}

DhtmlObject.prototype.doOnClick = function(event, element){
alert(event);
}
</script>

</head>
<body>
<button id="test1">testButton1</button>
<button id="test2">testButton2</button>
<button id="test3">testButton3</button>
<button id="test4">testButton4</button>

<script>
var test1 = document.getElementById('test1');
test1.onclick = function(event) {
console.log(arguments);
console.log(event.srcElement);
};

var test2 = document.getElementById('test2');
test2.onclick = function(event) {
console.log(arguments);
console.log(event.srcElement);
};

var test3 = new DhtmlObject('test3');
test3.doOnClick = function(event, element){
console.log(arguments);
console.log(element);
}

var test4 = new DhtmlObject('test4');
test4.doOnClick = function(event, element){
console.log(arguments);
console.log(element);
}

</script>
</body>
</html>

programmer

2014년 9월 18일 목요일

ie8 date wrapping (iso date parse problem)

2014년 9월 16일 화요일

javascript event wrapper