[js高手之路] 设计模式系列课程 - DOM迭代器(2)

2018-06-24 00:01:13来源：未知阅读 ()

如果你对jquery比较熟悉的话，应该用过 eq, first, last, get, prev, next, siblings等过滤器和方法。本文，我们就用迭代设计模式来封装实现，类似的功能

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7     <title>Document</title>
  8     <style>
  9         div,p{
 10             border:1px solid red;
 11             margin:10px;
 12             padding:10px;
 13         }
 14     </style>
 15     <script>
 16         ;(function (window, undefined) {
 17             var Iterator = function (el, container) {
 18                 var oContainer = container && document.querySelector(container) || document,
 19                     aNode = oContainer.querySelectorAll(el),
 20                     length = aNode.length,
 21                     index = 0,
 22                     splice = [].splice;
 23                 var isArray = function( obj ){
 24                     return Object.prototype.toString.call ( obj ) === '[object Array]';
 25                 };
 26                 return {
 27                     first : function () {
 28                         index = 0;
 29                         return aNode[index];
 30                     },
 31                     last : function () {
 32                         index = length - 1;
 33                         return aNode[index];
 34                     },
 35                     prev : function () {
 36                         if( --index >= 0 ) {
 37                             return aNode[index];
 38                         }else {
 39                             index = 0;
 40                             return null;
 41                         }
 42                     },
 43                     next : function () {
 44                         if( ++index < length ) {
 45                             return aNode[index];
 46                         }else {
 47                             index = length - 1;
 48                             return null;
 49                         }
 50                     },
 51                     get : function ( num ) {
 52                         index = num >= length ? length - 1 : num;
 53                         (index < 0) && (index = 0);
 54                         return aNode[index];
 55                     },
 56                     eachItem : function ( fn ) {
 57                         //G().eachItem( fn, xx, xx, xx );
 58                         //args 存储的是 除了第一个参数之外的所有参数
 59                         var args = splice.call( arguments, 1 );
 60                         for( var i = 0; i < length; i++ ){
 61                             fn.apply( aNode[i], args );
 62                         }
 63                     },
 64                     dealItem : function( n, fn ){
 65                         fn.apply( this.get( n ), splice.call( arguments, 2 ) );
 66                     },
 67                     exclusive : function( num, aFn, curFn ){
 68                         this.eachItem( aFn );
 69                         if( isArray( num ) ) {
 70                             for( var i = 0, len = num.length; i < len; i++  ){
 71                                 this.dealItem( num[i], curFn );
 72                             }
 73                         }else {
 74                             this.dealItem( num, curFn );
 75                         }
 76                     }
 77                 };
 78             };
 79             window.Iterator = Iterator;
 80         })(window, undefined);
 81         window.onload = function(){
 82             var oIter = Iterator( 'p', '#box' );
 83             // var oNode = oIter.first();
 84 
 85             // var oNode = oIter.get(2);
 86             // oNode.style.backgroundColor = 'green';
 87             // oNode = oIter.prev();
 88             // oNode.style.backgroundColor = 'green';
 89             // oNode = oIter.prev();
 90             // oNode = oIter.next();
 91             // oNode.style.backgroundColor = 'orange';
 92 
 93             // oIter.eachItem(function( c, s ){
 94             //     this.innerHTML = c;
 95             //     this.style.color = s;
 96             // }, '跟ghostwu学习设计模式', 'red' );
 97 
 98             // oIter.dealItem( 0, function( c, s ){
 99             //     console.log( c, s );
100             //     this.innerHTML = c;
101             //     this.style.color = s;
102             // }, '跟着ghostwu学习设计模式', 'red' );
103 
104             oIter.exclusive( [2,3], function(){
105                 this.innerHTML = '跟着ghostwu学习设计模式';
106                 this.style.color = 'red';
107             }, function(){
108                 this.innerHTML = '跟着ghostwu学习设计模式';
109                 this.style.color = 'green';
110             } );
111 
112         }
113     </script>
114 </head>
115 <body>
116     <div id="box">
117         <p>this is a test string</p>
118         <p>this is a test string</p>
119         <p>this is a test string</p>
120         <p>this is a test string</p>
121         <p>this is a test string</p>
122     </div>
123         <p>this is a test string</p>
124         <p>this is a test string</p>
125 </body>
126 </html>