휠로 스크롤이 아닌 다른 무언가를 조작할 때

스크롤도 같이 돌아서 고생할 때가 많다.

스크롤 이벤트 무시 처리를 할 때

mouse enter leave로 이벤트를 땠다 붙였다 할때는 버그가 있다.

휠을 돌리는 중에 mouse enter leave evnet는 발생하지 않는다.

'javascript' 카테고리의 다른 글

pseudo code 이벤트 발생 시키기  (0) 2018.01.10
ajax의 자동 encoding  (0) 2017.12.28
ie, chrom] new Date 관련  (0) 2017.12.27
jquery outerHTML  (0) 2017.12.27
IE에서 inline style 자동 파싱 문제  (0) 2017.12.27

ie와 chrom 은 new Date().toLocaleString()

형식이 다르다. 그래서 편하게 substring 으로 똑같이 잘라쓰려고하면 서로 달라서 적용이 안된다.


브라우저별 함수를 만들어서 써도 되겠지만

이보다는

Date함수를 직접 튜닝하면 편하다.

Date.prototype.toLocaleString = function () {

return 필요한 날짜 포맷;

};


이렇게 하면 브라우저에 상관없이 같은 형식을 받을 수 있다.

getMonth()도 브라우저에서는 우리가 세는 달 -1 로 나와서 1월이 0 이다.


Date.prototype.getMonth= function () {

return this.getMonth() +1;

};

로 바꾸면 편하게 사용할 수 있다.


'javascript' 카테고리의 다른 글

ajax의 자동 encoding  (0) 2017.12.28
mousewheel 이벤트 버그  (0) 2017.12.28
jquery outerHTML  (0) 2017.12.27
IE에서 inline style 자동 파싱 문제  (0) 2017.12.27
Closure의 중요성  (0) 2017.07.08

$.html() 은 자식노드를 스트링으로 긁어온다.

불행히도 jquery에는 자기자신을 포함해서 긁어오는 함수가 없다.

하지만 domString의 outerHTML 효과를 내는 편법이 있다.

$("<div>").append($(target).clone()).html();

이렇게 하면 긁어오려고 html에 래퍼태그를 따로 씌울 필요가 없다.

'javascript' 카테고리의 다른 글

mousewheel 이벤트 버그  (0) 2017.12.28
ie, chrom] new Date 관련  (0) 2017.12.27
IE에서 inline style 자동 파싱 문제  (0) 2017.12.27
Closure의 중요성  (0) 2017.07.08
&& 와 || 는 if 문에서만 쓰이는 것이 아니다.  (0) 2017.06.18

붙여놓을 dom 포맷을 document안에 감쳐 놓고

outherHTML로 긁어와서 붙여 놓는 식으로 처리하면 편하다.

크롬에서는 잘 작동되는데

IE에서는 inline style 처리에서 문제가 발생했다.

크롬은 inline style에 잘못된 문자가 있어도 그대로 나두지만

ie에서는 잘못된 문자는 자체 파싱해서 다 날려 버린다.

따라서 ie에서는 inline style에 binding 변수들을 남겨 둘 수가 없다.

너무 깔끔하게 돔파싱을 하니 오히려 개발하는데 제약을 받는다.


'javascript' 카테고리의 다른 글

ie, chrom] new Date 관련  (0) 2017.12.27
jquery outerHTML  (0) 2017.12.27
Closure의 중요성  (0) 2017.07.08
&& 와 || 는 if 문에서만 쓰이는 것이 아니다.  (0) 2017.06.18
javascript call과 bind  (0) 2017.05.27

객체 만들고 이벤트를 걸고

이후 변동 되는 상황에 따라 Aop를 걸어서 이벤트 상황에 변동을 주려고 한다.

$("button").on("click", targetFn);

Aop.before("targetFn", advice, targetObj);


하지만 버튼을 눌러도 Aop적용이 되지 않는다.

함수를 바인딩 시킬 때는 Closure가 적용되어서 다른 객체가 된다.

Closure라는 이름이 왜 클로저인가 몰랐었는데

이렇게 원래 객체와 연결된 문을 닫아 버리기때문인 것 같다.


이벤트에 함수를 바인딩 시킬 때 이후 함수를 조작하고 싶다면

위와 같이 직접 바인딩 시키면 안된다.

$("button").on("click", function(){

targetFn();

});

위와 같이하면 이벤트 실행마다 현재 객체상태로 불러오게 된다.

'javascript' 카테고리의 다른 글

ie, chrom] new Date 관련  (0) 2017.12.27
jquery outerHTML  (0) 2017.12.27
IE에서 inline style 자동 파싱 문제  (0) 2017.12.27
&& 와 || 는 if 문에서만 쓰이는 것이 아니다.  (0) 2017.06.18
javascript call과 bind  (0) 2017.05.27

&& 는 and

|| 는 or

대부분 언어에서 기본적인 연산자로 쓰이지만

자바스크립트에서는 확장 시켜서 편하게 사용할 수 있다.

var obj = obj || { } ;

? 조건절의 축약판이다. obj가 없으면 { } 빈 object를 만들어 준다.

navigator.alert() || window.alert();

폰갭 앱을 만들 때 많이 사용했었다. 실제 앱에서는 활용되지 않겠지만
웹과 앱 동시에 테스트 할 때 사용했다. navigator.alert 가 없으면 window.alert 이 실행된다.
주의 할 점은 반드시 함수 실행이여야 한다.

beforeFunction() && afterFunctoin()

처럼 조건 프로시저를 만들 수도 있다.




'javascript' 카테고리의 다른 글

ie, chrom] new Date 관련  (0) 2017.12.27
jquery outerHTML  (0) 2017.12.27
IE에서 inline style 자동 파싱 문제  (0) 2017.12.27
Closure의 중요성  (0) 2017.07.08
javascript call과 bind  (0) 2017.05.27

call과 bind를 이해하려면 javascript의 this 스코프를 알아야 한다.


var q = document.querySelector 를 이렇게 짧게 쓰려고 한다면?

q("form")을 실행하는 순간 Uncaught TypeError : Illegal invocation at 라고 에러가 발생한다. 

왜 그럴까?
인자가 어떻게 전달되는지 알아야 한다.
"form"라는 인자는 querySelector에 this.form 비슷하게 전달된다.
docuement.querySelector("form")이라고 한다면
this 는 document를 가르키지만
q로 빠지는 순간 this는 window가 된다.
그래서 엉뚱한 "form"을 찾으려하니 에러가 발생한다.

이를 해결하기 위해서 this를 지정해 주는 함수가 call과 bind이다.
위의 문제를 해결하려고 하면
document.querySelector.bind(document) 라고 해주면
this가 window가 아니라 document가 되므로 정상적으로 q를 사용할 수 있다.

bind를 객체에 this를 주입하는 것이고
call은 this를 주입해서 함수를 실행 시킬 수 있다.
  var a = {
x : 1
  };
var obj = {
test : function(){console.log(this.x)}
};
  obj.test();
obj.test.call(a); 

결과 :

 undefined

 1

'javascript' 카테고리의 다른 글

ie, chrom] new Date 관련  (0) 2017.12.27
jquery outerHTML  (0) 2017.12.27
IE에서 inline style 자동 파싱 문제  (0) 2017.12.27
Closure의 중요성  (0) 2017.07.08
&& 와 || 는 if 문에서만 쓰이는 것이 아니다.  (0) 2017.06.18

+ Recent posts