Skip to content

jquery_in_depth_6

Jump to bottom
paul edited this page May 17, 2017 · 4 revisions

유틸리티 함수와 지연 객체

유틸리티 함수는 jQuery 함수의 정적 메서드처럼 사용한다.

배열과 객체 관련 함수

함수 설명
$.grep() 배열의 내용을 콜백 함수를 이용해 필터링한다.
$.grep(arr, callback)
$.grep(arr, callback, invert)
$.makeArray() 객체를 배열로 변환한다.
$.makeArray(obj)
$.map() 배열 또는 객체의 내용에 대해 콜백 함수를 이용해 새로운 배열을 생성한다.
$.map(arr, callback)
$.amp(obj, callback)
$.inArray() 전달한 값이 배열 안에 존재한다면 인덱스 번호를 리턴한다.
$.inArray(val, arr)
$.inArray(val, arr, fromIndex)
$.uniqueSort() 배열 안에서 중복된 값을 제거하고 정렬한다.
jQuery 2.x까지는 $.unique() 함수를 사용했다.
$.uniqueSort(arr)

타입 관련 함수

함수 설명
$.isArray(obj) 객체가 배열인지 확인한다. 유사 배열은 false 리턴한다.
$.isFunction(obj) 객체가 함수인지를 확인한다.
$.isEmptyObject(obj) 객체가 속성을 하나도 포함하지 않은 빈 객체인지 확인한다.
$.isPlainObject(obj) 객체가 Plain Object인지를 확인한다.
Plain Object는 객체 리터럴 또는 Object 생성자 함수로 만들어진 객체를 의미한다.
$.isWindow(obj) 객체가 Window 객체인지를 확인한다.
$.isNumeric(value) 인자로 전달한 값이 숫자로 변환 가능한 형식인지를 확인한다.
$.isXMLDoc(obj) 인자로 전달한 객체가 XML 문서 형식인지를 확인한다.
$.type(obj) 객체 타입을 문자열로 리턴한다.
내장 객체(date, regexp,...) 타입도 리턴한다.

기타 함수

함수 설명
$.now() 현재 시간 정보를 1970.1.1(epoch)로 부터
현재까지 흐른 시간을 밀리초 단위로 표현한 값을 리턴한다.
$.trim() 전달한 문자열의 앞뒤 공백 문자를 제거한다.
$.noop() 비어있는 함수를 리턴한다.
아무것도 수행할 수 없는 함수이다.
$.noConflict() $ 식별자를 사용하지 않도록 한다.
이 함수를 호출하면 jQuery 식별자만 사용할 수 있다.
$.proxy() 특정한 함수에 바인딩 되는 this를 지정할 수 있는 기능을 제공한다.
리턴값은 this가 새롭게 바인딩된 함수이다.

What is the noop function in jQuery?

지연 객체(Deferred Object)

콜백함수는 처리가 얼마나 걸릴지 예측하기 힘들고, 처리가 성공인 경우와 실패인 경우에 각기 다른 처리가 요구되는 상황일 때 효과적이다. 이 콜백 함수는 편리하기도 하지만 때로는 비동기 콜백 함수의 중첩으로 인해 개발에 어려움을 겪는 경우도 발생한다. 이러한 콜백지옥 문제 해결을 위해 jQuery에서는 Promise 패턴을 구현한 지연 객체를 생성하는 Deferred() 메소드를 제공한다.

ES6 표준에는 Promise 객체가 추가되었다.
도대체 Promise는 어떻게 쓰는거야?

done(), fail(), always(), resolve(), reject() 사용

$(document).ready(function() {
	//지연 객체의 생성
	var d = $.Deferred();
	d.done(function() {
		$("#result").html("성공");
	}).fail(function() {
		$("#result").html("실패");
	}).always(function() {
		$("#result").append(", 항상 실행")
	});

	$("#success").click(function() {
		d.resolve();
	});

	$("#fail").click(function() {
		d.reject();
	});
});

다중 이벤트 콜백 등록

$(document).ready(function() {
	//지연 객체의 생성
	var d = $.Deferred();

    // always는 순서가 정해지지 않는다. (순서 없이 호출됨)
	d.always(function() {
		$("#result").append("항상 실행<br/ >")
	});
	d.done(function() {
		$("#result").append("첫번째 done!!<br />");
	});
	d.done(function() {
		$("#result").append("두번째 done!!<br />");
	})
	d.done(function() {
		$("#result").append("세번째 done!!<br />");
	})
	
	$("#success").click(function() {
		d.resolve();
	});
});

지연 객체의 결합 처리

when()을 사용하여 두개의 지연 객체를 결합하여 처리한다.

$(document).ready(function() {
	function job1(deferred) {
		console.log("job1 start!!");
		setTimeout(function() {
			deferred.resolve({ data : "job1" });
		}, 1000);
	}

	function job2(deferred) {
		console.log("job2 start!!");
		setTimeout(function() {
			deferred.resolve({ data : "job2" });
		}, 5000);
	}

	$("#start").click(function() {
		var j1 = $.Deferred(job1);
		var j2 = $.Deferred(job2);
		
		$.when(j1, j2).done(function(result1, result2) {
			console.log("결과1 : " + result1.data + ", timestamp: " + $.now());
			console.log("결과2 : " + result2.data + ", timestamp: " + $.now());
		});	
	});

});

지연 객체의 이벤트 통합 처리

resolve(), reject(), notify() 메서드 호출시 done, fail, progress 이벤트 핸들링을 then()을 사용하여 통합 처리한다.

<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>18-12</title>
<link rel="stylesheet" 
	href="https://code.jquery.com/ui/1.12.0/themes/humanity/jquery-ui.css" />
<style>
body { font-size: 70%; }
</style>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#progressbar").progressbar({ 
		value : 0, 
		max : 100
	});
	
	$("#dialog1").dialog({
		autoOpen: false,
		modal : true,
		buttons : {
			" 닫 기 " : function() {
				$(this).dialog("close");
				$("#progressbar").progressbar({ value:0 });
			}
		}
	});
	
	$("button").button();

	function longTimeJob(deferred) {
		var num = 0;
		(function() {
			num++;
			deferred.notify({ p: num });
			if (num < 100) {
				setTimeout(arguments.callee, 50);
			} else {
				deferred.resolve({ p: num });
			}
		})();
	}
	
	$("#long").click(function() {
		$("#long").button("disable");
		var d = $.Deferred(longTimeJob);
		
		d.progress(function(args) {
		    $( "#progressbar" ).progressbar({
		        value: args.p
		    });
		});
		
		d.done(function(args) {
			$("#long").button("enable");
			$("#dialog1").dialog("open");
		});
	});
  
    $("#long").click(function() {
		$("#long").button("disable");
		var d = $.Deferred(longTimeJob);
		
		d.then(
			function(args) {
				$("#long").button("enable");
				$("#dialog1").dialog("open");
			}, 
			$.noop(), 
			function(args) {
		    	$( "#progressbar" ).progressbar({
		       	 	value: args.p
		    	});
			}
		);
	});
});
</script>
</head>
<body>
	<button id="long">긴시간 작업</button>
	<hr />
	<div style="width:400px">
		<div id="progressbar"></div>
	</div>
	<div id="dialog1" title="작업 완료">
  		<p>
  			<span class="ui-icon ui-icon-circle-check" 
  			      style="float:left; margin:0 7px 20px 0;"></span>
  			처리 작업이 완료되었습니다!
  		</p>
	</div>
</body>
</html>

실습 예제

Clone this wiki locally