Javascript snippets

유용한 javascript 예제와 팁

URL 파라메터 받아오기(get PARAM)

$.params = function(paramname){
var value = new RegExp('[\?&]' + param
name + '=([^&#]*)').exec(window.location.href);
return value[1];

Jquery 셀렉터 성능(JQUERY SELECTOR Performance)
cssSelector는 id 나 element와 함께 쓰지 않고 단독으로 사용한다.

var obj = document.getElementById("childDiv");
xxx = obj.getElementsByClassName("txtClass");


이벤트 처리

preventDefault() : 이벤트의 기본 행동을 막는다.
If this method is called, the default action of the event will not be triggered.
stopPropagation() : 상위 핸들러로 이벤트를 넘기지 않도록 막는다.
Prevents the event from bubbling up the DOM tree,
preventing any parent handlers from being notified of the event.

prepend() - 앞쪽에 내용을 붙인다.(to attach content as a prefix.)
append() - 뒷쪽에 내용을 붙인다. (to attach content as a suffix.)

배열 요소에서 데이터를 받고 싶을 땐 $()로 한번 더 감싼다.

두번 submit되는 문제(prevent submit twice)
onclick이벤트 보다는 onsubmit 이벤트를 사용한다.


// jQuery plugin to prevent double submission of forms
jQuery.fn.preventDoubleSubmission = function() {
var $form = $(this);
if ($'submitted') === true) {
// Previously submitted - don't submit again
} else {
// Mark it so that the next submit can be ignored
$'submitted', true);
// Keep chainability
return this;


Object to String
Parse JSON response

JSON.parse()사용시 오류 : Uncaught SyntaxError: Unexpected token o
데이터형이 올바르지 않아서 나는 오류이다.
Looks like jQuery takes a guess about the datatype.
It does the JSON parsing even though you're not calling getJSON()--
then when you try to call JSON.parse() on an object, you're getting the error.

원하는 레벨의 로그를 콘솔 메시지로 보낸다.
켜고 끄는 것이 편리하다.
log.enableAll() and log.disableAll() methods.
* log.trace(msg)
* log.debug(msg)
* log.warn(msg)
* log.error(msg)

JavaScript 디버깅

chrome dev tool -> Settings -> General -> Disable cache
Timeline을 이용하면 어떤 코드가 어플리케이션에 부하를 주는지 찾아준다.
메모리 누수가 발생한다면 찾아 개선한다.
Profiles도구에서 Heap Snapshot을 두 개 만들어 comparison view로 비교하면 성능 저하 원인을 찾기 편하다.


Tags : , , , , ,

  • 재미있게 읽으셨나요?
    광고를 클릭해주시면,
    블로그 운영에 큰 도움이 됩니다!