[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, 表示下一个将要返回的 ...
随机推荐
- VMware Workstation 12 Pro 之安装林耐斯CentOS X64系统
VMware Workstation 12 Pro 之安装林耐斯CentOS X64系统... -------------- --------------------------- --------- ...
- vue-cli脚手架npm相关文件解读（5）vue-loader.conf.js
系列文章传送门: 1.build/webpack.base.conf.js 2.build/webpack.prod.conf.js 3.build/webpack.dev.conf.js 4.bui ...
- Nginx入门案例（Mac版）
Nginx(engine x)是一个轻量级.高性能的Web和反向代理服务器,也是一个IMAP.POP3和SMTP服务器,并且安装十分简单,配置文件非常简洁,启动特别容易,运行十分稳定,几乎可以做到7* ...
- [2017-08-07]ABP系列——QuickStartA:概述、思想、入门和HelloWorld
唔,说好的文章,欠了好久,先水一篇. 本系列目录:Abp介绍和经验分享-目录 概述 先表个态:对绝大多数人来说,ABP是成熟的,足以用到生产环境的. 最适合的:业务非常复杂且不追求极致性能的(这里并不 ...
- 函数作用域中的this问题
首先一起回顾下预解析和作用域吧: 预解析: 浏览器每读到一个script标签或function,先不执行任何代码,会先把整个代码快速的浏览一遍,然后从中 挑出 var 和 function两个关键字 ...
- webstom破解
链接:http://pan.baidu.com/s/1dFOpj1n 密码:rsfs
- mock server 前后端分离小结（转）
1.前台开发受限于后台开发的速度 2.后台提供给前台的接口缺字段,时常需要联调 基于Mock Server开发的好处: 对于前端来讲,可以独立于后端进行开发. 对于后端来讲,根据前端定义的接口进行开发 ...
- caffe cifar10试跑问题总结
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p. ...
- Linux平台 Oracle 12cR2 RAC安装Part3：DB安装
Linux平台 Oracle 12cR2 RAC安装Part3:DB安装 四.DB(Database)安装 4.1 解压DB的安装包 4.2 DB软件安装 4.3 ASMCA创建磁盘组 4.4 DBC ...
- 在centos6上实现编译安装lamp和wordpress,并编译xcache
author:JevonWei 版权声明:原创作品 软件环境: centos6.9 httpd-2.4.27.tar.bz2 apr-1.5.2.tar.bz2 apr-util-1.5.4.tar. ...