[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, 表示下一个将要返回的 ...
随机推荐
- mysql排序
MySQL里desc和asc的意思 desc是descend 降序意思 asc 是ascend 升序意思 sql = "select 表内容名 from 数据库 ...
- 菜单栏—View（视图）菜单
- Mysql数据库索引
今天,我们来讲讲Mysql数据库的索引的一些东西,想必大家都知道索引能干吗?必然是查找数据表的时候,查找的速度快啊,尤其是那些几百万行的数据库,不建立索引,你是想考验用户的耐心吗?Mysql有多种存储 ...
- 基于.netstandard的权限控制组件
基于.netstandard的权限控制组件 Intro 由于项目需要,需要在 基于 Asp.net mvc 的 Web 项目框架中做权限的控制,于是才有了这个权限控制组件. 项目基于 .NETStan ...
- jquery 的 each 方法中 return 的坑
jquery 的 each 方法中 return 的坑 Chapter 0 在项目中使用 jquery 的 each 方法时想在 each 的循环中返回一个布尔类型的值于是掉进一个坑中... Chap ...
- edittext基本用法总结.md
光标的有关问题 edittext.setSelection(2); //记住一个不能越界的bug edittext.setCursorVisible(false); //设置光标显示,不能设置光标颜色 ...
- 一款代码扫描工具 火线！！！！ fireline
1. 在火线官网进行火线相关文件的下载,下载后的文件为fireline.jar 2.运行fireline.jar文件前请先确认系统环境中已安装Java JDK. java-version 查看 3 ...
- BeautifulSoup练习第一节
一.pip install beautilfulsoup4 二.主要使用html.parser这个python标准库 三.打印首页博客的时间.打印摘要 # coding:utf-8from bs4 i ...
- Redis介绍和环境安装
-------------------Redis环境安装------------------- 1.安装 1.卸载软件 sudo apt-get remove redis-se ...
- Keepalive之nginx调度架构
author:JevonWei 版权声明:原创作品 单主模式Keepalive之Nginx调度 实验目的:实现Nginx调度的高可用,当一台Nginx调度器故障时,启用备用的Nginx调度,在架构中, ...