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

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         div,p{

             border:1px solid red;

             margin:10px;

             padding:10px;

         }

     </style>

     <script>

         ;(function (window, undefined) {

             var Iterator = function (el, container) {

                 var oContainer = container && document.querySelector(container) || document,

                     aNode = oContainer.querySelectorAll(el),

                     length = aNode.length,

                     index = 0,

                     splice = [].splice;

                 var isArray = function( obj ){

                     return Object.prototype.toString.call ( obj ) === '[object Array]';

                 };

                 return {

                     first : function () {

                         index = 0;

                         return aNode[index];

                     },

                     last : function () {

                         index = length - 1;

                         return aNode[index];

                     },

                     prev : function () {

                         if( --index >= 0 ) {

                             return aNode[index];

                         }else {

                             index = 0;

                             return null;

                         }

                     },

                     next : function () {

                         if( ++index < length ) {

                             return aNode[index];

                         }else {

                             index = length - 1;

                             return null;

                         }

                     },

                     get : function ( num ) {

                         index = num >= length ? length - 1 : num;

                         (index < 0) && (index = 0);

                         return aNode[index];

                     },

                     eachItem : function ( fn ) {

                         //G().eachItem( fn, xx, xx, xx );

                         //args 存储的是 除了第一个参数之外的所有参数

                         var args = splice.call( arguments, 1 );

                         for( var i = 0; i < length; i++ ){

                             fn.apply( aNode[i], args );

                         }

                     },

                     dealItem : function( n, fn ){

                         fn.apply( this.get( n ), splice.call( arguments, 2 ) );

                     },

                     exclusive : function( num, aFn, curFn ){

                         this.eachItem( aFn );

                         if( isArray( num ) ) {

                             for( var i = 0, len = num.length; i < len; i++  ){

                                 this.dealItem( num[i], curFn );

                             }

                         }else {

                             this.dealItem( num, curFn );

                         }

                     }

                 };

             };

             window.Iterator = Iterator;

         })(window, undefined);

         window.onload = function(){

             var oIter = Iterator( 'p', '#box' );

             // var oNode = oIter.first();

             // var oNode = oIter.get(2);

             // oNode.style.backgroundColor = 'green';

             // oNode = oIter.prev();

             // oNode.style.backgroundColor = 'green';

             // oNode = oIter.prev();

             // oNode = oIter.next();

             // oNode.style.backgroundColor = 'orange';

             // oIter.eachItem(function( c, s ){

             //     this.innerHTML = c;

             //     this.style.color = s;

             // }, '跟ghostwu学习设计模式', 'red' );

             // oIter.dealItem( 0, function( c, s ){

             //     console.log( c, s );

             //     this.innerHTML = c;

             //     this.style.color = s;

             // }, '跟着ghostwu学习设计模式', 'red' );

             oIter.exclusive( [2,3], function(){

                 this.innerHTML = '跟着ghostwu学习设计模式';

                 this.style.color = 'red';

             }, function(){

                 this.innerHTML = '跟着ghostwu学习设计模式';

                 this.style.color = 'green';

             } );

         }

     </script>

 </head>

 <body>

     <div id="box">

         <p>this is a test string</p>

         <p>this is a test string</p>

         <p>this is a test string</p>

         <p>this is a test string</p>

         <p>this is a test string</p>

     </div>

         <p>this is a test string</p>

         <p>this is a test string</p>

 </body>

 </html>

[js高手之路] 设计模式系列课程 - DOM迭代器(2)的更多相关文章

  1. [js高手之路] 设计模式系列课程 - jQuery的extend插件机制

    这里在之前的文章[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数基础上增加一个extend浅拷贝,可以为对象方便的扩展属性和方法, jquery的插件扩展机制,大致就是这 ...

  2. [js高手之路]设计模式系列课程-发布者,订阅者重构购物车

    发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...

  3. [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表

    所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理, ...

  4. [js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数

    一.我们从一个简单的构造函数+原型程序开始 var G = function(){}; G.prototype = { length : 5, size : function(){ return th ...

  5. [js高手之路]设计模式系列课程-单例模式实现模态框

    什么是单例呢? 单,就是一个的意思.例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如: ...

  6. [js高手之路]设计模式系列课程-委托模式实战微博发布功能

    在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单? 大多数人的做法都是:获取元素,绑定事件 <ul> < ...

  7. [js高手之路]设计模式系列课程-设计一个模块化扩展功能(define)和使用(use)库

    模块化的诞生标志着javascript开发进入工业时代,近几年随着es6, require js( sea js ), node js崛起,特别是es6和node js自带模块加载功能,给大型程序开发 ...

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

    迭代器是指通过一种形式依次遍历数组,对象,或者类数组结构中的每个元素. 常见的有jquery中的each方法, ES5自带的forEach方法. 下面我们就来自定义一个类似jquery或者ES5的迭代 ...

  9. [js高手之路] es6系列教程 - 迭代器与生成器详解

    什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...

随机推荐

  1. java异常之后代码执行测试

    1.程序代码: public static void main(String[] args) { int[] a = {1,2,3}; for(int i=0;i<4;i++){ System. ...

  2. Cookie常用操作以及属性

    概述 最近项目要用到cookie存储部分用户信息;研究了一下做一下分享 Cookie 是服务器保存在浏览器的一小段文本信息,每个 Cookie 的大小一般不能超过4KB.浏览器每次向服务器发出请求,就 ...

  3. JMockit使用总结

    Jmockit可以做什么 使用JMockit API来mock被依赖的代码,从而进行隔离测试. 类级别整体mock和部分方法重写 实例级别整体mock和部分mock mock静态方法.私有变量.局部方 ...

  4. .NET Core2.0 MVC中使用EF访问数据

    使用环境:Win7+VS2017 一.新建一个.NET Core2.0的MVC项目 二.使用Nuget添加EF的依赖 输入命令:Install-Package Microsoft.EntityFram ...

  5. jdbc预编译

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp20 JAVA_JDBC预编译 相关知识点 什么是预编译语句? 预编译语句P ...

  6. protobuf和thrift对比

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt383 数据类型 protobuf thrift protobuf thrif ...

  7. 49、html基础认识&常用标签（1）

    从今天期我们进入前端的学习,先学习html,没有任何需要逻辑需要烧脑,只需要记忆.练习.练习.练习. 一.HTML初识 1.web服务本质 import socket def main(): sock ...

  8. 交换机端口呈现err-disable的原因

    导致交换机端口呈现err-disable状态的原因有很多,为方便大家查询,特归纳如下:   1. duplex mismatch (A is correct) 2. port-channel misc ...

  9. # 团队作业8——第二次项目冲刺（Beta阶段）--5.27 seventh day

    团队作业8--第二次项目冲刺(Beta阶段)--5.27 seventh day Day six: 会议照片 项目进展 Beta冲刺的最后一天,以下是今天具体任务安排: 队员 昨天已完成的任务 今日计 ...

  10. 201521123034《Java程序设计》第六周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...