[js高手之路] 设计模式系列课程 - DOM迭代器(2)
如果你对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)的更多相关文章
- [js高手之路] 设计模式系列课程 - jQuery的extend插件机制
这里在之前的文章[js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数基础上增加一个extend浅拷贝,可以为对象方便的扩展属性和方法, jquery的插件扩展机制,大致就是这 ...
- [js高手之路]设计模式系列课程-发布者,订阅者重构购物车
发布者订阅者模式,是一种很常见的模式,比如: 一.买卖房子 生活中的买房,卖房,中介就构成了一个发布订阅者模式,买房的人,一般需要的是房源,价格,使用面积等信息,他充当了订阅者的角色 中介拿到卖主的房 ...
- [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表
所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理, ...
- [js高手之路] 设计模式系列课程 - jQuery的链式调用与灵活的构造函数
一.我们从一个简单的构造函数+原型程序开始 var G = function(){}; G.prototype = { length : 5, size : function(){ return th ...
- [js高手之路]设计模式系列课程-单例模式实现模态框
什么是单例呢? 单,就是一个的意思.例:就是实例化出来的对象,那合在一起就是保证一个构造函数只能new出一个实例,为什么要学习单例模式呢?或者说单例模式有哪些常见的应用场景.它的使用还是很广泛,比如: ...
- [js高手之路]设计模式系列课程-委托模式实战微博发布功能
在实际开发中,经常需要为Dom元素绑定事件,如果页面上有4个li元素,点击对应的li,弹出对应的li内容,怎么做呢?是不是很简单? 大多数人的做法都是:获取元素,绑定事件 <ul> < ...
- [js高手之路]设计模式系列课程-设计一个模块化扩展功能(define)和使用(use)库
模块化的诞生标志着javascript开发进入工业时代,近几年随着es6, require js( sea js ), node js崛起,特别是es6和node js自带模块加载功能,给大型程序开发 ...
- [js高手之路] 设计模式系列课程 - 迭代器(1)
迭代器是指通过一种形式依次遍历数组,对象,或者类数组结构中的每个元素. 常见的有jquery中的each方法, ES5自带的forEach方法. 下面我们就来自定义一个类似jquery或者ES5的迭代 ...
- [js高手之路] es6系列教程 - 迭代器与生成器详解
什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...
随机推荐
- java web开发时的绝对路径与相对路径
相对路径 不以/开头的路径为相对路径,使用相对路径时的路径为当前访问的文件的父目录,即如果现在访问文件的路径为http://localhost:8080/项目名/目录/文件,那么使用相对路径时路径前缀 ...
- 2017多校第10场 HDU 6171 Admiral 双向BFS或者A*搜索
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6171 题意: 给你一个高度为6的塔形数组,你每次只能将0与他上下相邻的某个数交换,问最少交换多少次可以 ...
- 通过 PHP 连接China Azure Blob 存储
问题说明 Azure Blob 存储是一种将非结构化数据作为对象/Blob存储在云中的服务.Blob存储可以存储任何类型的文本或二进制数据,例如文档.媒体文件或应用程序安装程序.Blob存储也称为对象 ...
- javaSE基础之 LinkedList的底层简单实现
这里贴上LinkedList底层的简单实现 package com.yck.mylinkedlist; public class Node { private Node previous; //上一结 ...
- mysql查看表结构2种方式对比
1.desc t_bookType; 2.show create table t_bookType; 相信大部分人还是喜欢第一种查看表结构方式.
- 系统引导器GRUB
系统引导器GRUB 理解/boot/grub/grub.conf 1 # grub.conf generated by anaconda 2 # 3 # Note that you do not ha ...
- https加密实现
author:JevonWei 版权声明:原创作品 在httpd安装完成的基础上实现https加密 安装mod_ssl软件包 yum -y install mod_ssl http -M 显示mod_ ...
- HTTP协议知多少-关于http1.x、http2、SPDY的相关知识
作为网站开发的基础协议,我们知道浏览器上都有输出http这四个字母,这意味着什么呢? 这就是最基础的HTTP协议. 逐浪君今天为各位大人准备了一些HTTP技术的知识,来和大家分享. 以下图为例: 这一 ...
- RAISERROR
RAISERROR 可以抛出一个错误,并被程序捕获,在存储过程经常使用: 是否进入Catch代码执行区域,在于错误严重等级设置 RAISERROR ('无效数据', 11 , 1) 第一个参数:自定义 ...
- angular之scope.$watch
某“大神”挖了个陨石坑,我于是乎似懂非懂的接手,玩了一个月angular.现在项目告一段落,暂别了繁重的重复性工作,可以开始回顾.认真的折腾下之前犹抱琵琶的angular. angular吸引人的特性 ...