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, 表示下一个将要返回的 ...
随机推荐
- 使用Spring MockMVC对controller做单元测试(转)
https://www.cnblogs.com/ylty/p/6420738.html 1.对单一controller做测试. import org.junit.Before; import org. ...
- java 泛型 checkcast
我们来看一段代码 public class Test3 { public static void main(String args[]) throws IllegalAccessException, ...
- html地址--待更新
11.学习笔记: 视频直播技术:ijkplayer技术:jni技术: https://www.cnblogs.com/renhui/category/1011048.html: IM:环信, xmpp ...
- 使用fakeroot模拟root权限执行程序（转）
Hack #57: 使用fakeroot模拟root权限执行程序 fakeroot是什么 例如Debian在生成package的时候,编译完之后,不能立刻在当前环境执行make install,需要执 ...
- Linux CentOS更改文件的权限
chgrp (全称:change group) groupadd testgroup 添加用户组 chgrp testgroup test1 修改文件的所属用户组是testgroup. 如果test ...
- MapReduce Demo
功能:统计公司员工一个月内手机上网上行流量.下行流量及总流量. 测试数据如下: 13612345678 6000 1000 13612345678 2000 3000 13 ...
- Submline Text 3插件sublimeTmpl添加新模板
1.安装 一般安装Package Control 2.插件 添加模板 1).进入Preferences->Browse Packages->SublimeTmpl->template ...
- Sebastian Ruder : NLP 领域知名博主博士论文面向自然语言处理的神经网络迁移学习
Sebastian Ruder 博士的答辩 PPT<Neural Transfer Learning for Natural Language Processing>介绍了面向自然语言的迁 ...
- .Net 大型分布式基础服务架构横向演变概述(转)
一. 业务背景 构建具备高可用,高扩展性,高性能,能承载高并发,大流量的分布式电子商务平台,支持用户,订单,采购,物流,配送,财务等多个项目的协作,便于后续运营报表,分析,便于运维及监控. 二. 基础 ...
- 让MySql支持表情符号（MySQL中4字节utf8字符保存方法）
UTF-8编码有可能是两个.三个.四个字节.Emoji表情是4个字节,而MySQL的utf8编码最多3个字节,所以数据插不进去. 解决方案:将编码从utf8转换成utf8mb4. 1. 修改my.in ...