[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, 表示下一个将要返回的 ...
随机推荐
- 【Spring 核心】装配bean（二） JavaConfig装配
前面介绍完了组件扫描和自动装配,这里再来看一下装配bean的另一种方式JavaConfig. 包路径: src/main/java com.bonc-|--config--|--CDPlayerCon ...
- JavaWeb（六）Listener监听器
监听器 监听器就是一个实现特定接口的普通java程序,这个程序专门用于监听另一个java对象的方法调用或属性改变,当被监听对象发生上述事件后,监听器某个方法将立即被执行. Servlet监听器 在Se ...
- 修改windows user 文件夹中的用户名
假设我们需要将帐户A改名为B.首先我们需要用另一个管理员帐户C登陆系统. 1．在控制面板-〉用户帐户中将帐户A改名为B. 2．打开C:/Users或"用户"文件夹,将文件夹A重命名 ...
- jquery的2.0.3版本源码系列(1)总体结构
为什么选择2.X版本,而不是1.X版本,因为2.X不兼容IE6/7/8,所以少了兼容代码,让我们更专注于jquery原理的代码. 一共有8830行. 1.1 匿名函数自执行 首先,匿名函数的作用是,把 ...
- 用PyCharm执行测试成功但无法生成HTMLTestRunner报告
问题:代码写的没问题,执行也成功了,但就是无法生成HTMLTestRunner的报告 其实这是编辑器搞得鬼,编辑器为了方便用户执行测试,都有一项功能,可以用编辑器来调用unittest或者nose来执 ...
- java中的抛出异常throws与throw
throws与throw throws是方法可能抛出异常的声明.(用在声明方法时,表示该方法可能要抛出异常)语法:[(修饰符)](返回值类型)(方法名)([参数列表])[throws(异常类)]{.. ...
- .NET技术基础总结 ----第一章
. 一..NET定义 很多人常说我是做.NET开发的,但是,NET到底是什么呢?是一个开发工具?还是一个平台?或者是一个软件环境? 其实,我觉得吧,他是一种概念.一种构想吧.微软的产品发布会上,主持人 ...
- java中super关键字
1.子类的构造函数如果要引用super的话,必须把super放在函数的首位,如果想用super继承父类构造的方法,但是没有放在第一行的话,那么在super之前的语句,肯定是为了满足自己想要完成某些行为 ...
- visual studio xamarin 离线安装文件以及 android 模拟器
介绍 为了使用vs开发android我也是煞费苦心,先是从网上各种搜刮文章,然后找各种各样的离线包(因为国内网络是下载不了C#/Xamain)的包的,还有各种各样的安装包,都已快接近奔溃的边缘.每次不 ...
- 从web图片裁剪出发：了解H5中的canvas
本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 本篇内容不针对canvas文档对每个api进行逐个的详解! 重说三,好了,现在进 ...