jquery에서 each,on의 실현

6610 단어 JavaScriptoneachEvery
여러분은 jquery의 each 방법에 대해 이미 익숙해졌을 것입니다. 그러면 우리는 어떻게 원생의 js로 jquery의 each를 실현해야 합니까? 먼저 jquery의 each 사용법을 살펴보겠습니다.
	<body>
		<div class='test'>t1</div>
		<div class='test'>t2</div>
		<div class='test'>t3</div>
	</body>

  
   $(".test").each(function(){
    console.log($(this).text())
  });  //t1,t2,t3

 
each의 실현을 이해하려면 먼저 jquery의 선택기를 보십시오:
 console.log($(".test"));

실행 결과:
jQuery.fn.init[3]
0:div.test
1:div.test
2:div.test
context:document
length:3
prevObject:jQuery.fn.init[1]
selector:".test"
__proto__:Object[0]

보시다시피 jquery 선택기는 그룹과 유사한 대상을 되돌려줍니다. 그러나 그룹은 아닙니다.
console.log($(".test") instanceof Array);//false

 
마찬가지로 원생 js가 되돌아오는dom 집합을 살펴보자.
  console.log(document.getElementsByClassName('test'));

실행 결과:
[div.test, div.test, div.test]
0:div.test
1:div.test
2:div.test
length:3
__proto__:HTMLCollection

번호와 length 속성이 있지만, jquery 선택기와 마찬가지로, 되돌아오는 것은 그룹이 아닙니다.
 console.log(document.getElementsByClassName('test') instanceof Array);//false

비록 Array 대상이 아니지만, 우리는 여전히 each 방법을 Array에 쓴 다음call을 통해 호출할 수 있다. 이것은 슬라이스에 관한 글에서 구체적으로 말한 적이 있다.
    /**
        *    jquery  each
        * @param callback<function(e,index)>       
                                               e           
                                             index<int>     
*/
   

Array.prototype.each = function(callback){
	 
	 
	  Array.prototype.every.call(this, function(e, index) {
				  
				    return callback(e, index)!==false;
				   
			});
}

여기에 every 방법을 사용했습니다. 그럼 다음 js의 every 방법을 말씀드리겠습니다. every 방법은 Array 대상에 속합니다.
  var ages = [32, 33, 16, 40];
 
  console.log(ages.every(function(age,index){
           /*
              every()          ，
              age    Array       
              index  Array       
           */
  	    return age >= 18;
   }
   )); //false,false,false
 
every () 방법은 그룹의 모든 요소가 지정한 조건에 부합되는지 검사하는 데 사용됩니다. (함수를 통해 제공됩니다.)
every() 메서드는 지정된 함수를 사용하여 배열의 모든 요소를 체크합니다.
만약 수조에서 원소가 만족하지 않는 것을 검출하면 전체 표현식은false를 되돌려주고 나머지 원소는 다시 검출하지 않습니다
모든 요소가 조건을 충족하면 true를 반환합니다
주의:every () 는 빈 그룹을 검사하지 않습니다.
주의:every () 는 원시 그룹을 바꾸지 않습니다.
이제 이 each 방법을 테스트해 보도록 하겠습니다.
Array.prototype.each.call(document.getElementsByClassName('test'),function(e){
     console.log(e.innerText);
});//t1,t2,t3

이왕 each를 실현한 이상 jquery종의val(), html() 등 방법도 자연히 쉽게 실현할 수 있다. 예를 들어 html()
  
    /**
        *    jquery  html
        * @param   value      
   */  

Array.prototype.html = function(value){
	   
	 Array.prototype.each.call(this,function(e){
	 	 
	 	  e.innerHTML = value;
	 	
	 })
	 
}

 
테스트:
Array.prototype.html.call(document.getElementsByClassName('test'),'BBB');

실행 결과:
<body>
		<div class='test'>BBB</div>
		<div class='test'>BBB</div>
		<div class='test'>BBB</div>
	</body>

우리는 심지어 jquery의 on을 실현할 수 있다
	<body>
		<div class='test'>t1</div>
		<div class='test'>t2</div>
		<div class='test'>t3</div>
		
	 <div class='test2'>
		<div class='test'>t1</div>
		<div class='test'>t2</div>
		<div class='test'>t3</div>
		
	    <div class='test3'>t4</div>
		<div class='test3'>t5</div>
		<div class='test3'>t6</div>
		
	</div>
	
	
	</body>

  
/*
 *              
 */
Array.prototype.contains = function ( needle ) {
  for (i in this) {
    if (this[i] == needle) return true;
  }
  return false;
}



    /**
        *    jquery  on
        * @param event     
        *        selector    ，     class
        *        callback<function(e)>            
                                        e       dom
   */  
   
   
Array.prototype.on = function(event, selector, callback){
	   
	 Array.prototype.each.call(this,function(e){
	  
	  e.addEventListener(event, function(event) {
	  	   var cls =   selector.replace('.','');
	  	   
	  	   if(Array.prototype.contains.call(e.getElementsByClassName(cls),event.target)){
	  	   	    callback(event.target);
	  	   	 
	  	   }
          
        });   
	 	
	 })
	 
}

테스트:
  
Array.prototype.on.call(document.getElementsByClassName('test2'),'click','test',function(e){
	 e.innerText = 'BBB';
});

실행 결과:
 
class='test2'중class='test'의dom를 클릭하면 html이
  
<body>
		<div class='test'>t1</div>
		<div class='test'>t2</div>
		<div class='test'>t3</div>
		
	 <div class='test2'>
		<div class='test'>BBB</div>
		<div class='test'>BBB</div>
		<div class='test'>BBB</div>
		
	    <div class='test3'>t4</div>
		<div class='test3'>t5</div>
		<div class='test3'>t6</div>
		
	</div>
	
	
	</body>

 
 
class_01: 기본 선택기 |zend 실험실 jquery 시리즈 강좌
javascript와 jQuery 대비 페이드

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage