javascript 클래스와 jquery prototype 클래스


javascript 클래스와 jquery 클래스(jquery Chaning prototype)을 사용하여


js Class 로는 부트스트랩의 프로그레스 핸들러를


jquery Class 로는 애니메이션 텍스트 핸들러를 만들어 보면서 oop를 비교하고


나름?.. 유용한 핸들러를 만들어 보았다.




   javascript 클래스 : ProgressClass


public으로 클래스이름과 바의 최소 너비와 값을 설정하고 지정된 생성자를 실행한다.


부트스트랩의 프로그레스바와 수치를 움직이며, 하단에 기술될 제이쿼리 클래스와 별개로 독립적으로 실행할때에는


$(this.tgClass).AnimateText({num: $num, prevValueEnable:true, unit: "%"}); 부분을 주석처리하고


//this.tgClass.innerHTML = $num+"%"; 으로 주석 처리된 부분을 해제하여 사용한다.

/************************************************************************ 
*
* @ProgressClass "2016.10.26. 허정진";
*
*************************************************************************/
var ProgressClass = function($tgID){

	//private
	var name = "ProgressClass";
	
	//public
	this.name = name;
	this.minWidth = 3;
	this.minInt = 0;
	this.tgID = $tgID;
	this.tgClass;
	
	//constructor
	this.constructor.classLength++;
	this.constructor();
}

ProgressClass.prototype = (function(){
	return{
		constructor: function(){
			if( ! this.tgID ){
				throw new Error( "["+this.name+"] : 전달된 인자가 없습니다." );
				return false;
			}

			this.tgClass = document.getElementById( this.tgID ).getElementsByClassName('progress-bar')[0];
		},
		init : function(){
			this.tgClass.setAttribute("aria-valuenow", 0);
			this.tgClass.style.minWidth = this.minWidth + "em";
			this.tgClass.style.width = "0%";
			this.tgClass.innerHTML = "0%";
		},
		setValue : function( $num ){
			if( typeof $num == "undefined" ) throw new Error( "["+this.name+"] : setValue 전달된 인자가 없습니다." );
			this.tgClass.setAttribute("aria-valuenow", $num);
			this.tgClass.style.width = $num+"%";
			//this.tgClass.innerHTML = $num+"%";
			$(this.tgClass).AnimateText({num: $num, prevValueEnable:true, unit: "%"});
		}
	}
})();


클래스 사용법은


var p = new ProgressClass("progress_1"); 

p.init();

var randNum = Math.floor( Math.random() * 100 );

p.setValue( randNum );


정도로 사용.




   jquery 클래스 : AnimateText


제이쿼리 클래스는 obj로 미리 지정된 값들을 기본으로 사용하며, 주석에 표기된 옵션을 조건으로 동작한다.

(function($){
	$.fn.AnimateText = function(options){
		
		var ver = "2016.10.26. 허정진";

		var obj = {
			num : 100, //기본값
			duration : 2000, //시간
			easing : "swing", // 움직이는 형태 : swing, easeOutBounce, easeOutExpo
			unit : "", //단위
			prevValueEnable : false, //엘리먼트에 표시된 수치에서 표현될지, 0에서 시작할지 옵션
			useFixedValue : false //애니메이션이 끝나고 이 값으로 고정합니다.
		};

		$.extend(obj, options);

		var tg = $(this);
		var div_id = tg.prop('id') || tg.attr('id');
		
		var prevNum = 0;
		if( obj.prevValueEnable == true ){
			prevNum = parseInt( tg.text(), 10);
		}

		$({someValue: prevNum}).stop().animate({someValue: obj.num}, {
			duration : obj.duration,
			easing : obj.easing, 
			step : function() { // called on every step
				// Update the element's text with rounded-up value:
				tg.text( Math.round(this.someValue) + obj.unit );
			},
			complete:function(){
				
				var num = Number(obj.num);
				var reg = /^[-|+]?\d+$/; //is_integer? (정수인지 음수부호를 포함하여 검사)
				if( reg.test(num) == false ) num = num.toFixed(2);
				
				if( !obj.useFixedValue ){
					tg.text( num + obj.unit );
				}else{
					tg.text( obj.useFixedValue );
				}
				
			}
		});//end. animate
	} //AnimateText (jquery prototype)
})(jQuery); //enc. closer

클래스 사용은

$("#ani_num").AnimateText({num: randNum, prevValueEnable:true, useFixedValue: 100});

정도로 사용. 

prevValueEnable이 true 이면 엘리먼트에 표기된 값에서 수치를 움직이고, false일 경우 0에서 시작한다.

useFixedValue가 정의되어 있으면 애니메이션을 끝내고 항상 100으로 표기한다.

unit 은 단위이며, easing은 주석참조.


   결과 보기



   전체 코드 보기


<!DOCTYPE html>
<html lang='ko'>
<head>
	<meta charset="utf-8">
	
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-Script-Type" content="text/javascript">
	<meta http-equiv="Content-Style-Type" content="text/css">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">

	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<meta name="format-detection" content="telephone=no" />

	<meta name="description" content="serpiko's HTML5 Template ver 1.00" />
	<meta name="author" content="serpiko@hanmail.net ( http://serpiko.tistory.com )" />
	
	<title>Document</title>

	<!-- css -->

	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<!-- Optional theme -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

	<style>
		* {
			box-sizing: border-box;
			-moz-box-sizing: border-box;
			-webkit-box-sizing: border-box;
		}
		body{padding:10px;}
		.progress{width:200px;}
	</style>
</head>

<body>
	<div class="progress" id='progress_1'>
	  <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%;min-width: 2em;" data-toggle="tooltip" data-placement="bottom" title="ip address, percent">
		45%
	  </div>
	</div>

	<span id='ani_num'>20</span>

	<!-- script -->
	<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
	<!-- Latest compiled and minified JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<div id="wrap">
		


	</div>

	<script>
		$(document).ready(function(){
		//////////////////////////////
			
			(function($){
				$.fn.AnimateText = function(options){
					
					var ver = "2016.10.26. 허정진";

					var obj = {
						num : 100, //기본값
						duration : 2000, //시간
						easing : "swing", // 움직이는 형태 : swing, easeOutBounce, easeOutExpo
						unit : "", //단위
						prevValueEnable : false, //엘리먼트에 표시된 수치에서 표현될지, 0에서 시작할지 옵션
						useFixedValue : false //애니메이션이 끝나고 이 값으로 고정합니다.
					};

					$.extend(obj, options);

					var tg = $(this);
					var div_id = tg.prop('id') || tg.attr('id');
					
					var prevNum = 0;
					if( obj.prevValueEnable == true ){
						prevNum = parseInt( tg.text(), 10);
					}

					$({someValue: prevNum}).stop().animate({someValue: obj.num}, {
						duration : obj.duration,
						easing : obj.easing, 
						step : function() { // called on every step
							// Update the element's text with rounded-up value:
							tg.text( Math.round(this.someValue) + obj.unit );
						},
						complete:function(){
							
							var num = Number(obj.num);
							var reg = /^[-|+]?\d+$/; //is_integer? (정수인지 음수부호를 포함하여 검사)
							if( reg.test(num) == false ) num = num.toFixed(2);
							
							if( !obj.useFixedValue ){
								tg.text( num + obj.unit );
							}else{
								tg.text( obj.useFixedValue );
							}
							
						}
					});//end. animate
				} //AnimateText (jquery prototype)
			})(jQuery); //enc. closer

			
			$("[data-toggle='tooltip']").tooltip();


			/************************************************************************ 
			*
			* @ProgressClass "2016.10.26. 허정진";
			*
			*************************************************************************/
			var ProgressClass = function($tgID){

				//private
				var name = "ProgressClass";
				
				//public
				this.name = name;
				this.minWidth = 3;
				this.minInt = 0;
				this.tgID = $tgID;
				this.tgClass;
				
				//constructor
				this.constructor.classLength++;
				this.constructor();
			}
			
			ProgressClass.prototype = (function(){
				return{
					constructor: function(){
						if( ! this.tgID ){
							throw new Error( "["+this.name+"] : 전달된 인자가 없습니다." );
							return false;
						}

						this.tgClass = document.getElementById( this.tgID ).getElementsByClassName('progress-bar')[0];
					},
					init : function(){
						this.tgClass.setAttribute("aria-valuenow", 0);
						this.tgClass.style.minWidth = this.minWidth + "em";
						this.tgClass.style.width = "0%";
						this.tgClass.innerHTML = "0%";
					},
					setValue : function( $num ){
						if( typeof $num == "undefined" ) throw new Error( "["+this.name+"] : setValue 전달된 인자가 없습니다." );
						this.tgClass.setAttribute("aria-valuenow", $num);
						this.tgClass.style.width = $num+"%";
						//this.tgClass.innerHTML = $num+"%";
						$(this.tgClass).AnimateText({num: $num, prevValueEnable:true, unit: "%"});
					}
				}
			})();
			

			var p = new ProgressClass("progress_1");
			p.init();
			setInterval(function(){

				var randNum = Math.floor( Math.random() * 100 );

				
				p.setValue( randNum );

				$("#ani_num").AnimateText({num: randNum, prevValueEnable:true, useFixedValue: 100});

			},3000);

		//////////////////////////////
		});	//end. rdy
	</script>
</body>
</html>





Posted by SAP (Study And Programming) by serpiko

댓글을 달아 주세요