js 迭代器 解说
这里要说的是迭代器，是一种思路而已，代码相对来不是最关键的，个人认为，最关键的部分是实现的思路
要求：
在一个网页中，将所有的 p 元素的内容进行替换，但是在特定的位置的 p 元素是要有差异的进行替换
涉及到两点：一个是范围（id=box），一个是替换对象(p元素)，还有一个是具体的替换内容（执行方法，即执行函数），差异性替换：选择是可以变更的
1. 首先创建一个迭代器 Iterator
2.写执行函数
3.把迭代器用闭包包起来，同时把迭代器挂在window 对象上，这样外部就可以调用了
4.外部调用
代码如下：
<!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,
// 获取需要提换的元素的全部
oNode = Ocontainer.querySelectorAll(el),
// 获取需要提换的元素的全部的长度
alength = oNode.length,
// 设置初始索引为0
index = 0,
// 改写splice 函数，因为这里是类数组，不能直接使用splice,要伪装成数组才能使用，改写就是伪装的过程
splice = [].splice;
// 写一个方法判断一个对象是否是数组
var isArray = function(obj) {
return Object.prototype.toString.call(obj) === "[object Array]";
};
// return 中的内容是需要返回的部分，当调用Iteratror 函数时，外部就可以调用return中的内容了
return {
// 获取第一个对象(元素)的方法
first: function() {
index = 0;
return oNode[index];
},
// 获取最后一个对象(元素)的方法
last: function() {
index = alength - 1;
return oNode[index];
},
// 获取上一个对象(元素)的方法
prev: function() {
if (--index > 0) {
return oNode[index];
} else {
index = 0;
return null;
}
},
// 获取下一个对象(元素)的方法
next: function() {
if (++index < alength) {
return oNode[index];
} else {
index = alength - 1;
return null;
}
},
// 获取确定的(索引为num)一个对象(元素)的方法
get: function(num) {
// 这里是一个赋值语句，不过要先执行三元表达式
index = num >= alength ? alength - 1 : num;
// 这里是一个短路表达值，也是一个赋值语句
(index < 0) && (index = 0);
return oNode[index];
},
// 遍历没一个项目对象，然后对执行fn 方法
eachItem: function(fn) {
// 这句话的意思是：获取除了第一个参数之外的所有参数，把它们装在一个数组里
var args = splice.call(arguments, 1);
for (var i = 0; i < alength; i++) {
// 执行fn 函数调用， 把this的指向改变了， this指向oNode[i]
fn.apply(oNode[i], args);
};
},
// 特殊处理函数
dealItem: function(n, fn) {
// 函数实体是fn,
// 把this指向改变了， this指向this.get(n) 即需要变化的元素对象
fn.apply(this.get(n), splice.call(arguments, 2));
},
// 具体执行的控制函数，在 MVC 结构中，这个相当于controller(负责分配事情的) ,而eachFn,和dealFn则相当于Modal(负责处理事情的)
exclusive: function(num, eachFn, dealFn) {
this.eachItem(eachFn);
if (isArray(num)) {
for (var i = 0, len = num.length; i < len; i++) {
this.dealItem(num[i], dealFn);
}
} else {
this.dealItem(num, dealFn);
}
}
}
};
// 把Iterator 挂在window对象上，这样在外面才可以调用Iterator( 因为已经使用闭包包起来了，这是和外界唯一的交互接口)
window.Iterator = Iterator;
})(window, undefined);
</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>
<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 调用：
<script>
window.onload = function() {
var oIter = Iterator('p', '#box');
oIter.exclusive([1, 3], function() {
this.innerHTML = "这个是遍历的结果，在Id=box范围内每个元素都要替代";
this.style.color = "#abc";
}, function() {
this.innerHTML = "这个元素是要有差异的项目";
this.style.color = "#730"
});
}
</script>
运行结果：
调用函数：last(),dealItem()
js调用代码：
<script>
window.onload = function() {
var oIter = Iterator('p', '#box');
// 这里调用， 就涉及到 splice.call(arguments, 2) 参数调用了
oIter.last().style.backgroundColor = 'blue';
oIter.dealItem(2, function(bgC, txtC, txt) {
this.style.backgroundColor = bgC;
this.style.color = txtC;
this.innerHTML = txt;
}, 'red', 'white', '这里就是特殊处理的项目，涉及到arguments参数的调用了');
}
</script>
运行结果：
js 迭代器 解说的更多相关文章
- js迭代器模式
在迭代器模式中,通常有一个包含某种数据的集合的对象.该数据可能储存在一个复杂数据结构内部,而要提供一种简单 的方法能够访问数据结构中的每个元素. 实现如下: //迭代器模式 var agg = (fu ...
- PDF.js 详情解说
pdf.js资源下载 点我下载 自定义默认加载的pdf资源 在web/view.js中我们可以通过DEFAULT_URL设置默认加载的pdf.通过上面代码我们也可以看出来可以通过后缀名来指定加载的pd ...
- Vue模板逻辑
前面的话 上一篇介绍了Vue的模板内容,而对于一般的模板引擎来说,除了模板内容,还包括模板逻辑.常用的模板逻辑包括条件和循环.本文将详细介绍Vue模板逻辑 条件渲染 在Vue中,实现条件逻辑依靠条件指 ...
- ch7-列表渲染(v-for key 数组更新检测 显示过滤/排序结果)
1 说明 我们用 v-for 指令根据一组数组的选项列表进行渲染. v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名. ...
- 编译nodejs及其源代码研究
本文将从 源代码 研究nodejs 的原理.本质,探讨nodejs的应用场景,以及高性能开发实践指南. 文件夹: 第一节:编译node.js 第二节:源代码分析 进入主题:下面是在win7 64 下进 ...
- JS常用的设计模式(12)—— 迭代器模式
迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该方法中的内部表示. js中我们经常会封装一个each函数用来实现迭代器. array的迭代器: forEach = functio ...
- js数组的内部实现,迭代器,生成器和内包
js内部实现 在js以外的很多语言中,数组将会隐式占用一段连续的内存空间.这种隐式的内部实现,使得高效的内存使用及高速的元素方法称为可能,而 在javascript中,数组实体是一个对象,所以通常的实 ...
- js设计模式--迭代器模式
迭代器模式: 迭代器模式提供一种方法顺序访问一个聚合对象中各个元素,而又不需要暴露该方法中的内部表示.js中我们经常会封装一个each函数用来实现迭代器. 理解的意思:提供一个方法,去把对象的每一项按 ...
- [js高手之路] es6系列教程 - 迭代器与生成器详解
什么是迭代器? 迭代器是一种特殊对象,这种对象具有以下特点: 1,所有对象都有一个next方法 2,每次调用next方法,都会返回一个对象,该对象包含两个属性,一个是value, 表示下一个将要返回的 ...
随机推荐
- js中获取事件对象的方法小结
原文地址:http://jingyan.baidu.com/article/d8072ac4594d6cec95cefdac.html 事件对象 的获取很简单,很久前我们就知道IE中事件对象是作为全局 ...
- 安卓权威编程指南 - 第五章学习笔记(两个Activity)
学习安卓编程权威指南第五章的时候自己写了个简单的Demo来加深理解两个Activity互相传递数据的问题,然后将自己的学习笔记贴上来,如有错误还请指正. IntentActivityDemo学习笔记 ...
- Linux开机自动挂载windows网络共享
yum install samba-client yum install cifs.utils yum install samba-common 命令: mount -v -t cifs // ...
- Mysql 之多实例 安装以及配置
MySQL多实例 1.什么是MySQL多实例 简单地说,Mysql多实例就是在一台服务器上同时开启多个不同的服务端口(3306.3307),同时运行多个Mysql服务进程,这些服务进程通过不同的soc ...
- Change default network name (ens33) to old “eth0” on Ubuntu 18.04 / Ubuntu 16.04
Change default network name (ens33) to old “eth0” on Ubuntu 18.04 / Ubuntu 16.04 By Raj Last updated ...
- mono搭建脚本整理
一.介绍 mono项目致力于能够使得开发人员在Linux用C#开发程序. 该项目的目标是创建一系列符合标准ECMA (Ecma-334和Ecma-335)的.Net 工具, 包括C #编译器和共同语言 ...
- 18 LVM逻辑卷管理
根据上一节的内容,我们知道md这个内核模块可以用来做软RAID的管理.同时RAID实现了两个功能:1.提高了磁盘的读写能力:2.对于数据进行了冗余备份: 但是,如果是管理员手动误删的数据,则一样无法找 ...
- DIV左、中、右三列布局的各类情况说明
一.中间定宽.左.右侧百分比自适应: 1.HTML代码: <div id="left"> <div id="innerLeft"> &l ...
- python requests 发起http POST 请求
python requests 发起http POST 请求,带参数,带请求头: #!/usr/bin/env python # -*- coding: utf-8 -*- import reques ...
- python3.5安装Numpy、mayploylib、opencv等额外库
安装Python很简单,但是安装额外的扩展库就好麻烦,没有了第三方库的Python就是一个鸡肋~~ 我们现在安装NumPy库 1. 首先这里假设你已经安装了Python了,不会的去看我的另一篇博文( ...