블로그는 취미로

CSS 자바스크립트 처리를 위해 사용

behavior: expression

회사 모대리 작품

언제 다 만들었지 아직 조금 손을 보기 해야 한다지만...

당신이 진정한 챔피어~~~ㄴ

prototype.js에서는 Enumerations을 다루기 위한 Enumerable이라는 클래스를 제공하고 있고 Enumerable에 포함된 수많은 메서드가 있지만 그중에 each()는 단연 돋보인다. 기본적으로 Enumerable에서 each()가 대부분의 메서드의 로직의 기본이기도 하다. 나도 쓴지는 얼마 안됐는데 이거좀 최고다..ㅋ

다른 언어에 많이 있는 foreach같은 거랑 비슷한 메서드로 Iteration기능을 담당하고 있다. API를 보면 each()에 대한 정의가 다음과 같이 되어 있다.


솔직히 정의는 나중에 알고보면 아~ 그런가보다 하지 처음에 보면 이해하기가 어렵다. 사용법은 오나전 직관적이다. 배열이나 컬렉션등을 놓고 그냥 each로 루프를 돌려주면 된다.

var arr = ['11', '22', '33', '44', '55'];
arr.each(function(a) {
alert(a);
});

위에처럼 사용한다. 배열에 each로 확장해 주고 안쪽에 function을 넣어서 필요한 기능을 수행한다. 반드시 function이 들어가야 되는 것은 아니지만 대개의 경우는 function을 수행할 꺼라고 생각한다. function을 사용할 때 첫번째 파라미터로는 순회돌면서 현재의 엘리먼트가 튀어나온다. 위의 예에서는 alert로 11부터 55까지 5번의 alert() 발생한다.

var arr = ['11', '22', '33', '44', '55'];
arr.each(function(a, idx) {
alert(idx);
});

function에 2번째 파라미터를 사용하면 인덱스번호를 받을 수 있다. 여기서 인덱스는 대개의 배열처럼 0부터 시작한다. 위의 예에서는 0~4까지 5번의 alert()가 발생한다.

한눈에 보아도 for(i=0; i< length;i++)보다 훨씬 사용하기가 편하다. JSON배열도 마음것 순회할 수 있고 prototype.js에서는 컬렉션등이 Enumerable이랑 연계가 되기 때문에 배열처럼 생겼다 싶으면 그냥 다 each()를 사용해 주면 된다. HTML 엘리먼트의 객체들도 each를 이용해서 편리하게 사용할 수 있고 배열상수를 쉽게 만들수 있는 함수도 제공하고 있다. 내부에서는 다들 each()를 사용하기는 하지만 Enumerable이 제공하는 다른 메서드들과 같이 사용하면 복잡한 순회문 또는 이중,삼중으로 해주어야 하는 순회문을 상당히 직관적으로 간단히 작성할 수 있다.




순회를 할때는 필요한게 2가지 있는데 바로 순회 멈춤과 순회를 건너뛰는 기능이고 대부분의 언어에서는 break와 continue라는 명령어로 사용하고 있다. each()에서는 throw $break;와 return;을 사용해 주면 된다.
throw $break;를 사용하면 순회자체가 종료되고 return; 하면 다음 순회로 바로 건너뛴다. 1.5버전에서는 throw $continue;를 사용했었는데 이제는 사용하지 않고 그냥 return;을 사용하면 된다.





그리고 each()를 사용할 때 또 고려해야 될 문제중에 하나가 this에 대한 부분이다. 클래스를 만들어서 사용할 경우 멤버변수나 멤버함수의 경우에는 this지시자를 통해서 사용하는데 each()안에 들어가는 순간은 this가 해당 클래스가 아닌 each에서 순회도는 아이템을 가르키게 된다. 이럴땐 바인드를 사용하면 된다.

var arr = ['11', '22', '33', '44', '55'];
arr.each(function(a, idx) {
alert(idx);
}.bind(this));

이렇게 bind()를 사용하면 each()내에서 this가 바인드한 Object를 가르키게 된다. bind()를 꼭 this에다가 사용해야 하는 것은 아니다.

출처 : http://blog.outsider.ne.kr/232

[code js]
 /*--------------------------------------------------------------------------------*\
  *  JavaScript framework, version 2.0
  *
  *  Date : 2006. 08. 15.
  *  Copyright 2004-2007 by Vricks Studio. All right reserved.
  *  @author Jeff Yang routine@vricks.com
  *  자주 쓰이는 스트링 관련 prototype관련 정리
 \*--------------------------------------------------------------------------------*/
 
 /*---------------------------------------------------------------------------------*\
  *  String prototype
 \*---------------------------------------------------------------------------------*/
     //-----------------------------------------------------------------------------
     // 문자의 좌, 우 공백 제거
     // @return : String
     //-----------------------------------------------------------------------------
     String.prototype.trim = function() {
         return this.replace(/(^\s*)|(\s*$)/g, "");
     }
     //-----------------------------------------------------------------------------
     // 문자의 좌 공백 제거
     // @return : String
     //-----------------------------------------------------------------------------
     String.prototype.ltrim = function() {
         return this.replace(/(^\s*)/, "");
     }
     //-----------------------------------------------------------------------------
     // 문자의 우 공백 제거
     // @return : String
     //-----------------------------------------------------------------------------
     String.prototype.rtrim = function() {
         return this.replace(/(\s*$)/, "");   
     }
     //-----------------------------------------------------------------------------
     // 문자열의 byte 길이 반환
     // @return : int
     //-----------------------------------------------------------------------------
     String.prototype.byte = function() {
         var cnt = 0;
         for (var i = 0; i < this.length; i++) {
             if (this.charCodeAt(i) > 127)
                 cnt += 2;
             else
                 cnt++;
         }
         return cnt;
     }
     //-----------------------------------------------------------------------------
     // 정수형으로 변환
     // @return : String
     //-----------------------------------------------------------------------------
     String.prototype.int = function() {
         if(!isNaN(this)) {
             return parseInt(this);
         }
         else {
             return null;   
         }
     }
     //-----------------------------------------------------------------------------
     // 숫자만 가져 오기
     // @return : String
     //-----------------------------------------------------------------------------
     String.prototype.num = function() {
         return (this.trim().replace(/[^0-9]/g, ""));
     }
     //-----------------------------------------------------------------------------
     // 숫자에 3자리마다 , 를 찍어서 반환
     // @return : String
     //-----------------------------------------------------------------------------
     String.prototype.money = function() {
         var num = this.trim();
         while((/(-?[0-9]+)([0-9]{3})/).test(num)) {
             num = num.replace((/(-?[0-9]+)([0-9]{3})/), "$1,$2");
         }
         return num;
     }
     //-----------------------------------------------------------------------------
     // 숫자의 자리수(cnt)에 맞도록 반환
     // @return : String
     //-----------------------------------------------------------------------------
     String.prototype.digits = function(cnt) {
         var digit = "";
         if (this.length < cnt) {
             for(var i = 0; i < cnt - this.length; i++) {
                 digit += "0";
             }
         }
         return digit + this;
     }
     //-----------------------------------------------------------------------------
     // " -> &#34; ' -> &#39;로 바꾸어서 반환
     // @return : String
     //-----------------------------------------------------------------------------
     String.prototype.quota = function() {
         return this.replace(/"/g, "&#34;").replace(/'/g, "&#39;");
     }
     //-----------------------------------------------------------------------------
     // 파일 확장자만 가져오기
     // @return : String
     //-----------------------------------------------------------------------------
     String.prototype.ext = function() {
         return (this.indexOf(".") < 0) ? "" : this.substring(this.lastIndexOf(".") + 1, this.length);   
     }
     //-----------------------------------------------------------------------------
     // URL에서 파라메터 제거한 순수한 url 얻기
     // @return : String
     //-----------------------------------------------------------------------------   
     String.prototype.uri = function() {
         var arr = this.split("?");
         arr = arr[0].split("#");
         return arr[0];   
     }
 
 /*---------------------------------------------------------------------------------*\
  *  각종 체크 함수들
 \*---------------------------------------------------------------------------------*/
     //-----------------------------------------------------------------------------
     // 정규식에 쓰이는 특수문자를 찾아서 이스케이프 한다.
     // @return : String
     //-----------------------------------------------------------------------------
     String.prototype.meta = function() {
         var str = this;
         var result = ""
         for(var i = 0; i < str.length; i++) {
             if((/([\$\(\)\*\+\.\[\]\?\\\^\{\}\|]{1})/).test(str.charAt(i))) {
                 result += str.charAt(i).replace((/([\$\(\)\*\+\.\[\]\?\\\^\{\}\|]{1})/), \\$1);
             }
             else {
                 result += str.charAt(i);
             }
         }
         return result;
     }
     //-----------------------------------------------------------------------------
     // 정규식에 쓰이는 특수문자를 찾아서 이스케이프 한다.
     // @return : String
     //-----------------------------------------------------------------------------
     String.prototype.remove = function(pattern) {
         return (pattern == null) ? this : eval("this.replace(/[" + pattern.meta() + "]/g, \"\")");
     }
     //-----------------------------------------------------------------------------
     // 최소 최대 길이인지 검증
     // str.isLength(min [,max])
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isLength = function() {
         var min = arguments[0];
         var max = arguments[1] ? arguments[1] : null;
         var success = true;
         if(this.length < min) {
             success = false;
         }
         if(max && this.length > max) {
             success = false;
         }
         return success;
     }
     //-----------------------------------------------------------------------------
     // 최소 최대 바이트인지 검증
     // str.isByteLength(min [,max])
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isByteLength = function() {
         var min = arguments[0];
         var max = arguments[1] ? arguments[1] : null;
         var success = true;
         if(this.byte() < min) {
             success = false;
         }
         if(max && this.byte() > max) {
             success = false;
         }
         return success;
     }
     //-----------------------------------------------------------------------------
     // 공백이나 널인지 확인
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isBlank = function() {
         var str = this.trim();
         for(var i = 0; i < str.length; i++) {
             if ((str.charAt(i) != "\t") && (str.charAt(i) != "\n") && (str.charAt(i)!="\r")) {
                 return false;
             }
         }
         return true;
     }
     //-----------------------------------------------------------------------------
     // 숫자로 구성되어 있는지 학인
     // arguments[0] : 허용할 문자셋
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isNum = function() {
         return (/^[0-9]+$/).test(this.remove(arguments[0])) ? true : false;
     }
     //-----------------------------------------------------------------------------
     // 영어만 허용 - arguments[0] : 추가 허용할 문자들
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isEng = function() {
         return (/^[a-zA-Z]+$/).test(this.remove(arguments[0])) ? true : false;
     }
     //-----------------------------------------------------------------------------
     // 숫자와 영어만 허용 - arguments[0] : 추가 허용할 문자들
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isEngNum = function() {
         return (/^[0-9a-zA-Z]+$/).test(this.remove(arguments[0])) ? true : false;
     }
     //-----------------------------------------------------------------------------
     // 숫자와 영어만 허용 - arguments[0] : 추가 허용할 문자들
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isNumEng = function() {
         return this.isEngNum(arguments[0]);
     }
     //-----------------------------------------------------------------------------
     // 아이디 체크 영어와 숫자만 체크 첫글자는 영어로 시작 - arguments[0] : 추가 허용할 문자들
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isUserid = function() {
         return (/^[a-zA-z]{1}[0-9a-zA-Z]+$/).test(this.remove(arguments[0])) ? true : false;
     }
     //-----------------------------------------------------------------------------
     // 한글 체크 - arguments[0] : 추가 허용할 문자들
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isKor = function() {
         return (/^[가-힣]+$/).test(this.remove(arguments[0])) ? true : false;
     }
     //-----------------------------------------------------------------------------
     // 주민번호 체크 - arguments[0] : 주민번호 구분자
     // XXXXXX-XXXXXXX
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isJumin = function() {
         var arg = arguments[0] ? arguments[0] : "";
         var jumin = eval("this.match(/[0-9]{2}[01]{1}[0-9]{1}[0123]{1}[0-9]{1}" + arg + "[1234]{1}[0-9]{6}$/)");
         if(jumin == null) {
             return false;
         }
         else {
             jumin = jumin.toString().num().toString();
         }
         // 생년월일 체크
         var birthYY = (parseInt(jumin.charAt(6)) == (1 ||2)) ? "19" : "20";
         birthYY += jumin.substr(0, 2);
         var birthMM = jumin.substr(2, 2) - 1;
         var birthDD = jumin.substr(4, 2);
         var birthDay = new Date(birthYY, birthMM, birthDD);
         if(birthDay.getYear() % 100 != jumin.substr(0,2) || birthDay.getMonth() != birthMM || birthDay.getDate() != birthDD) {
             return false;
         }       
         var sum = 0;
         var num = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5]
         var last = parseInt(jumin.charAt(12));
         for(var i = 0; i < 12; i++) {
             sum += parseInt(jumin.charAt(i)) * num[i];
         }
         return ((11 - sum % 11) % 10 == last) ? true : false;
     }
     //-----------------------------------------------------------------------------
     // 외국인 등록번호 체크 - arguments[0] : 등록번호 구분자
     // XXXXXX-XXXXXXX
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isForeign = function() {
         var arg = arguments[0] ? arguments[0] : "";
         var jumin = eval("this.match(/[0-9]{2}[01]{1}[0-9]{1}[0123]{1}[0-9]{1}" + arg + "[5678]{1}[0-9]{1}[02468]{1}[0-9]{2}[6789]{1}[0-9]{1}$/)");
         if(jumin == null) {
             return false;
         }
         else {
             jumin = jumin.toString().num().toString();
         }
         // 생년월일 체크
         var birthYY = (parseInt(jumin.charAt(6)) == (5 || 6)) ? "19" : "20";
         birthYY += jumin.substr(0, 2);
         var birthMM = jumin.substr(2, 2) - 1;
         var birthDD = jumin.substr(4, 2);
         var birthDay = new Date(birthYY, birthMM, birthDD);
         if(birthDay.getYear() % 100 != jumin.substr(0,2) || birthDay.getMonth() != birthMM || birthDay.getDate() != birthDD) {
             return false;
         }
         if((parseInt(jumin.charAt(7)) * 10 + parseInt(jumin.charAt(8))) % 2 != 0) {
             return false;
         }
         var sum = 0;
         var num = [2, 3, 4, 5, 6, 7, 8, 9, 2, 3, 4, 5]
         var last = parseInt(jumin.charAt(12));
         for(var i = 0; i < 12; i++) {
             sum += parseInt(jumin.charAt(i)) * num[i];
         }
         return (((11 - sum % 11) % 10) + 2 == last) ? true : false;
     }   
     //-----------------------------------------------------------------------------
     // 사업자번호 체크 - arguments[0] : 등록번호 구분자
     // XX-XXX-XXXXX
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isBiznum = function() {
         var arg = arguments[0] ? arguments[0] : "";
         var biznum = eval("this.match(/[0-9]{3}" + arg + "[0-9]{2}" + arg + "[0-9]{5}$/)");
         if(biznum == null) {
             return false;
         }
         else {
             biznum = biznum.toString().num().toString();
         }
         var sum = parseInt(biznum.charAt(0));
         var num = [0, 3, 7, 1, 3, 7, 1, 3];
         for(var i = 1; i < 8; i++) sum += (parseInt(biznum.charAt(i)) * num[i]) % 10;
         sum += Math.floor(parseInt(parseInt(biznum.charAt(8))) * 5 / 10);
         sum += (parseInt(biznum.charAt(8)) * 5) % 10 + parseInt(biznum.charAt(9));
         return (sum % 10 == 0) ? true : false;
     }
     //-----------------------------------------------------------------------------
     // 법인 등록번호 체크 - arguments[0] : 등록번호 구분자
     // XXXXXX-XXXXXXX
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isCorpnum = function() {
         var arg = arguments[0] ? arguments[0] : "";
         var corpnum = eval("this.match(/[0-9]{6}" + arg + "[0-9]{7}$/)");
         if(corpnum == null) {
             return false;
         }
         else {
             corpnum = corpnum.toString().num().toString();
         }
         var sum = 0;
         var num = [1, 2, 1, 2, 1, 2, 1, 2, 1, 2, 1, 2]
         var last = parseInt(corpnum.charAt(12));
         for(var i = 0; i < 12; i++) {
             sum += parseInt(corpnum.charAt(i)) * num[i];
         }
         return ((10 - sum % 10) % 10 == last) ? true : false;
     }
     //-----------------------------------------------------------------------------
     // 이메일의 유효성을 체크
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isEmail = function() {
         return (/\w+([-+.]\w+)*@\w+([-.]\w+)*\.[a-zA-Z]{2,4}$/).test(this.trim());
     }
     //-----------------------------------------------------------------------------
     // 전화번호 체크 - arguments[0] : 전화번호 구분자
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isPhone = function() {
         var arg = arguments[0] ? arguments[0] : "";
         return eval("(/(02|0[3-9]{1}[0-9]{1})" + arg + "[1-9]{1}[0-9]{2,3}" + arg + "[0-9]{4}$/).test(this)");
     }
     //-----------------------------------------------------------------------------
     // 핸드폰번호 체크 - arguments[0] : 핸드폰 구분자
     // @return : boolean
     //-----------------------------------------------------------------------------
     String.prototype.isMobile = function() {
         var arg = arguments[0] ? arguments[0] : "";
         return eval("(/01[016789]" + arg + "[1-9]{1}[0-9]{2,3}" + arg + "[0-9]{4}$/).test(this)");
     }
[/code]

출처 : http://rlog.tistory.com/category/Programming?page=2