深入理解JavaScript系列真钱捕鱼:设计模式之迭代器模式详解_javascript技巧_脚本之家

介绍

深远领会JavaScript系列(35):设计形式之迭代器情势详整

 那篇随笔首要介绍了深刻精通JavaScript类别(35):设计方式之迭代器形式精解,迭代器形式(Iterator卡塔尔国:提供少年老成种办法顺序一个聚焦对象中各种要素,而又不揭穿该目的内部表示,供给的爱人能够参见下

 

 

介绍

迭代器形式(Iterator卡塔尔国:提供风姿浪漫种办法顺序一个会合对象中种种要素,而又不拆穿该目的内部表示。

迭代器的多少个特色是:

1.访谈一个会集对象的剧情而没有必要暴光它的中间表示。
2.为遍历不一样的集纳布局提供三个合并的接口,从而协理相同的算法在分歧的集结构造上开展操作。
3.遍历的同一时候变交取代器所在的聚集结构大概会造成难题(举例C#的foreach里不相同意修改item)。

正文

貌似的迭代,大家起码要有2个方法,hasNext(State of Qatar和Next(State of Qatar,那样才做到位遍历全部指标,大家先提交多少个例证:

代码如下:

var agg = (function () {
var index = 0,
data = [1, 2, 3, 4, 5],
length = data.length;

 

return {
next: function () {
var element;
if (!this.hasNext()) {
return null;
}
element = data[index];
index = index + 2;
return element;
},

hasNext: function () {
return index < length;
},

rewind: function () {
index = 0;
},

current: function () {
return data[index];
}

};
} ());

运用方法和日常C#里的格局是同样的:

代码如下:

// 迭代的结果是:1,3,5
while (agg.hasNext()) {
console.log(agg.next());
}
本来,你也得以透过额外的措施来重新设置数据,然后再持续此外操作:

代码如下:

// 重置
agg.rewind();
console.log(agg.current()); // 1

 

jQuery应用例子

jQuery里三个不行资深的迭代器正是$.each方法,通过each咱们能够流传额外的function,然后来对具备的item项举办迭代操作,举个例子:

代码如下:

$.each(['dudu', 'dudu', '酸酸乳大姐', '那些MM'], function (index, value) {
console.log(index + ': ' + value);
});
//或者
$('li').each(function (index) {
console.log(index + ': ' + $(this).text());
});

 

总结

迭代器的利用情形是:对于集结内部结果平时变化各异,大家不想拆穿其内部布局的话,但又响让客商代码透明底访谈当中的因素,这种场合下大家能够动用迭代器形式。

那篇小说首要介绍了浓烈明白JavaScript连串(35):设计情势之迭代器形式详细明白,迭...

事件代理(伊芙nt Delegation),又称之为事件委托。是 JavaScript 中常用绑定事件的常用技艺。

迭代器形式:提供风流罗曼蒂克种格局顺序七个会面对象中相继要素,而又不暴光该目的内部表示。

连锁小说

有关搜索:

明日看甚

寻找能力库

回来首页

  • 隐性调用php程序的办法
  • ASP.NET中母版页和shtml实例入门
  • 浅谈JavaScript中的Math.atan(卡塔尔国方法的运用
  • JavaScript中反正弦函数Math.asin(卡塔尔国的使用简单介绍
  • JavaScript中的acos(State of Qatar方法运用详细明白
  • 介绍JavaScript中Math.abs(卡塔尔国方法的行使

相关频道: HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前端代码  正则表达式  Flex教程  WEB前端教程  

 

1.做客贰个集合对象的源委而不需求暴光它的里边表示。2.为遍历差别的集合布局提供叁个群集的接口,进而扶植相像的算法在不一样的聚众布局上海展览中心开操作。3.遍历的同一时间校订迭代器所在的成团构造大概会产生难题(比方C#的foreach里差异意改良item)。

帮客户量

以偏概全,“事件代理”就是把本来要求绑定的风云委托给父成分,让父成分担当事件监听的地点。

正文

 

貌似的迭代,大家足足要有2个主意,hasNext,那样才做到位遍历全体指标,大家先交付二个例证:复制代码 代码如下:var agg = { var index = 0, data = [1, 2, 3, 4, 5], length = data.length;

 

return { next: function () { var element; if { return null; } element = data[index]; index = index + 2; return element; },

 

hasNext: function () { return index < length; },

何以要这么做吗?

rewind: function () { index = 0; },

 

current: function () { return data[index]; }

鲜明,DOM操作是可怜消耗品质的。所以再次的平地风波绑定大概是性质剑客。而事件代理的核心理想,就是通过尽量少的绑定,去监听尽量多的风浪。

};} ;使用格局和日常C#里的法子是同等的:复制代码 代码如下:// 迭代的结果是:1,3,5while { console.log;}当然,你也足以通过额外的主意来重新初始化数据,然后再持续别的操作:复制代码 代码如下:// 重新复苏设置agg.rewind(卡塔尔国;console.log; // 1

 

jQuery应用例子

 

jQuery里四个那二个出名的迭代器正是$.each方法,通过each我们能够流传额外的function,然后来对负有的item项实行迭代操作,举个例子:复制代码 代码如下:$.each(['dudu', 'dudu', '冠益乳四妹', '那一个MM'], function { console.log;});//或者$.each { console.log(index + ': ' + $;

 

总结

上边将会用 Zepto 为大家演示怎么落实事件代理。

迭代器的接纳意况是:对于会集内部结果平常变化各异,大家不想暴光其内部布局的话,但又响让顾客代码透明底访问在这之中的要素,这种气象下大家得以采用迭代器格局。

 

啊?Zepto是什么?

 

Zepto is a minimalist JavaScript library for modern browsers with a largely jQuery-compatible API. If you use jQuery, you already know how to use Zepto.

 

是因为API是合营 jQuery 的,熟练jQuery的童鞋使用 Zepto 大概没有供给学习费用。演示代码实际上也能在 jQuery 上平常运营。而当前 Zepto 的适用处景更加多是在移动端,贰个离家旧版IE的世界。

 

 

 

那怎么一向用jQuery?

 

因为下文子禽简要深入分析源码,但jQuery里面为了协作旧版IE做了好些个妥洽,源码非常不直观。而 Zepto 是面向今世浏览器设计的,所用到的API绝大好多都合乎W3C标准,深入分析起来更为直观。

 

 

 

以那么些HTML布局为例:

 

<ul class="list">

    <li class="list_items">000</li>

    <li class="list_items">111 <a href="javascript:void(0);">link</a></li>

    <li class="list_items">222 <i>italic</i></li>

    <li>333</li>

</ul>

 

 

相像情状下,会这么绑定事件:

 

$('.list_items').on('click', function (e) {

    console.log(e.target.tagName);

    console.log(this.tagName);

});

Deom>>

 

 

 

开发浏览器的 Console 看一下,会开采每多个 .list_items 成分都被绑定了click事件,何况绑定的目的是 li.list_items 。如下图:

 

 

 

这意味着,Zepto的骨子里是遍历了装有 .list_items 成分,并风流倜傥后生可畏绑定 click 事件。

 

福寿齐天思路和底下这段原生 JavaScript 代码肖似:

 

[].forEach.call(document.querySelectorAll('.list_items'), function (elem) {

  elem.addEventListener('click', function (e) {

    console.log(e.target.tagName);

    console.log(this.tagName);

  }, false);

});

这么的做法,当碰着数量超长的列表(ul卡塔尔和表格(table卡塔尔时品质费用比超大。

 

返回列表