js 迭代器解说

这里要说的是迭代器，是一种思路而已，代码相对来不是最关键的，个人认为，最关键的部分是实现的思路

要求：

在一个网页中，将所有的 p 元素的内容进行替换，但是在特定的位置的 p 元素是要有差异的进行替换

涉及到两点：一个是范围（id=box），一个是替换对象(p元素)，还有一个是具体的替换内容（执行方法，即执行函数），差异性替换：选择是可以变更的

1. 首先创建一个迭代器 Iterator

2.写执行函数

3.把迭代器用闭包包起来，同时把迭代器挂在window 对象上，这样外部就可以调用了

4.外部调用

代码如下：

  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,
 10         p {
 11             border: 1px solid red;
 12             margin: 10px;
 13             padding: 10px;
 14         }
 15     </style>
 16     <script>
 17         ;
 18         (function(window, undefined) {
 19             var Iterator = function(el, container) {
 20                 var Ocontainer = container && document.querySelector(container) || document,
 21                     // 获取需要提换的元素的全部
 22                     oNode = Ocontainer.querySelectorAll(el),
 23                     // 获取需要提换的元素的全部的长度
 24                     alength = oNode.length,
 25                     // 设置初始索引为0
 26                     index = 0,
 27                     // 改写splice 函数，因为这里是类数组，不能直接使用splice,要伪装成数组才能使用，改写就是伪装的过程
 28                     splice = [].splice;
 29                 // 写一个方法判断一个对象是否是数组
 30                 var isArray = function(obj) {
 31                     return Object.prototype.toString.call(obj) === "[object Array]";
 32                 };
 33                 // return 中的内容是需要返回的部分，当调用Iteratror 函数时，外部就可以调用return中的内容了
 34                 return {
 35                     // 获取第一个对象(元素)的方法
 36                     first: function() {
 37                         index = 0;
 38                         return oNode[index];
 39                     },
 40                     // 获取最后一个对象(元素)的方法
 41                     last: function() {
 42                         index = alength - 1;
 43                         return oNode[index];
 44                     },
 45                     // 获取上一个对象(元素)的方法
 46                     prev: function() {
 47                         if (--index > 0) {
 48                             return oNode[index];
 49                         } else {
 50                             index = 0;
 51                             return null;
 52                         }
 53                     },
 54                     // 获取下一个对象(元素)的方法
 55                     next: function() {
 56                         if (++index < alength) {
 57                             return oNode[index];
 58                         } else {
 59                             index = alength - 1;
 60                             return null;
 61                         }
 62                     },
 63                     // 获取确定的(索引为num)一个对象(元素)的方法
 64                     get: function(num) {
 65                         // 这里是一个赋值语句，不过要先执行三元表达式
 66                         index = num >= alength ? alength - 1 : num;
 67                         // 这里是一个短路表达值，也是一个赋值语句
 68                         (index < 0) && (index = 0);
 69                         return oNode[index];
 70                     },
 71                     // 遍历没一个项目对象，然后对执行fn 方法
 72                     eachItem: function(fn) {
 73                         // 这句话的意思是：获取除了第一个参数之外的所有参数，把它们装在一个数组里
 74                         var args = splice.call(arguments, 1);
 75                         for (var i = 0; i < alength; i++) {
 76                             // 执行fn 函数调用， 把this的指向改变了， this指向oNode[i]
 77                             fn.apply(oNode[i], args);
 78                         };
 79                     },
 80                     // 特殊处理函数
 81                     dealItem: function(n, fn) {
 82                         // 函数实体是fn,
 83                         // 把this指向改变了， this指向this.get(n) 即需要变化的元素对象
 84                         fn.apply(this.get(n), splice.call(arguments, 2));
 85                     },
 86                     // 具体执行的控制函数，在 MVC 结构中，这个相当于controller(负责分配事情的) ,而eachFn,和dealFn则相当于Modal(负责处理事情的) 
 87                     exclusive: function(num, eachFn, dealFn) {
 88                         this.eachItem(eachFn);
 89                         if (isArray(num)) {
 90                             for (var i = 0, len = num.length; i < len; i++) {
 91                                 this.dealItem(num[i], dealFn);
 92                             }
 93                         } else {
 94                             this.dealItem(num, dealFn);
 95                         }
 96                     }
 97                 }
 98             };
 99             // 把Iterator 挂在window对象上，这样在外面才可以调用Iterator( 因为已经使用闭包包起来了，这是和外界唯一的交互接口)
100             window.Iterator = Iterator;
101         })(window, undefined);
102     </script>
103 </head>
104 <body>
105     <div id="box">
106         <p>this is a test string</p>
107         <p>this is a test string</p>
108         <p>this is a test string</p>
109         <p>this is a test string</p>
110         <p>this is a test string</p>
111         <p>this is a test string</p>
112         <p>this is a test string</p>
113         <p>this is a test string</p>
114     </div>
115     <p>this is a test string</p>
116     <p>this is a test string</p>
117 </body>
118 </html>

js 调用：

 1  <script>
 2         window.onload = function() {
 3             var oIter = Iterator('p', '#box');
 4             oIter.exclusive([1, 3], function() {
 5                 this.innerHTML = "这个是遍历的结果，在Id=box范围内每个元素都要替代";
 6                 this.style.color = "#abc";
 7             }, function() {
 8                 this.innerHTML = "这个元素是要有差异的项目";
 9                 this.style.color = "#730"
10             });
11         }
12 </script>

运行结果：

调用函数：last(),dealItem()

js调用代码：

<script>
        window.onload = function() {
            var oIter = Iterator('p', '#box');
            // 这里调用， 就涉及到 splice.call(arguments, 2) 参数调用了
            oIter.last().style.backgroundColor = 'blue';
            oIter.dealItem(2, function(bgC, txtC, txt) {
                this.style.backgroundColor = bgC;
                this.style.color = txtC;
                this.innerHTML = txt;
            }, 'red', 'white', '这里就是特殊处理的项目，涉及到arguments参数的调用了');
        }
</script>

运行结果：

posted on 2018-03-01 19:52 huanying2015 阅读(391) 评论(0) 编辑收藏举报

js 迭代器 解说

js 迭代器解说