1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>迭代器模式</title> 6 </head> 7 <body> 8 9 <script> 10 /** 11 * 迭代器模式 12 * 13 * 定义： 14 * 提供一种方法顺序访问一个聚合对象中各个元素，而又不需要暴露该对象的内部表示。 15 * 16 * 本质： 17 * 控制访问聚合对象中的元素 18 * 19 * 所谓聚合是指一组对象的组合结构。 20 * 21 * 一.功能 22 * 迭代器模式的功能主要在于提供对聚合对象的迭代访问。迭代器就围绕着这个“访问”做文章，延伸出很多的功能。比如： 23 * 1.以不同的方式遍历聚合对象，比如向前，向后等。 24 * 2.对同一个聚合同时进行多个遍历。 25 * 3.以不同的遍历策略来遍历聚合，比如是否需要过滤等。 26 * 4.多态迭代，含义是：为不同的聚合结构提供统一的迭代接口，也就是说通过一个迭代接口可以访问不同的聚合结构，这就叫做多态迭代。事实上，标准的迭代模式实现基本上都是支持多态迭代的 27 * 28 * 二，关键思想 29 * 聚合对象的类型很多，如果对聚合对象的迭代访问跟聚合对象本身融合在一起的话，会严重影响到聚合对象的可扩展性和可维护性。 30 * 因此迭代器模式的关键思想就是把对聚合对象的遍历和访问从聚合对象中分离出来，放入单独的迭代器中。这样聚合对象会变得简单一些，而且迭代器和聚合对象可以独立地变化和发展，会大大加强系统的灵活性。 31 * 32 * 三，内部迭代器和外部迭代器 33 * 所谓内部迭代器，指的是由迭代器自己来控制迭代下一个元素的步骤，客户端无法干预。因此，如果想要在迭代的过程中完成工作的话，客户端就需要把操作传递给迭代器。迭代器在迭代的时候会在每个元素上执行这个操作，即回调。 34 * 所谓外部迭代，指的是客户端来控制迭代下一个元素的步骤，客户端必须显式地调用next来迭代下一个元素。 35 * 总体来说外部迭代器比内部迭代器更灵活一些。 36 */ 37 38 // 示例代码 39 40 (function(){ 41 /** 42 * 迭代器实现对象，示意的是聚合对象为数组的迭代器 43 * 不同聚合对象相应的迭代器实现是不一样的 44 * @param {Array} aggregate [聚合对象] 45 */ 46 var Iterator = function(aggregate){ 47 this.aggregate = aggregate; 48 // 当前索引位置 49 this.index = -1; 50 }; 51 Iterator.prototype = { 52 first: function(){ 53 this.index = 0; 54 }, 55 next: function(){ 56 if(this.index < this.aggregate.size()) { 57 this.index++; 58 } 59 }, 60 isDone: function(){ 61 return this.index === this.aggregate.size(); 62 }, 63 currentItem: function(){ 64 return this.aggregate.get(this.index); 65 } 66 }; 67 68 var Aggregate = function(ss){ 69 this.ss = ss; 70 }; 71 Aggregate.prototype = { 72 createIterator: function(){ 73 return new Iterator(this); 74 }, 75 get: function(index){ 76 var retObj = null; 77 if(index < this.ss.length) { 78 retObj = this.ss[index]; 79 } 80 81 return retObj; 82 }, 83 size: function(){ 84 return this.ss.length; 85 } 86 }; 87 88 new function(){ 89 var names = [‘张三‘, ‘李四‘, ‘王五‘]; 90 var aggregate = new Aggregate(names); 91 var it = aggregate.createIterator(); 92 var obj; 93 94 it.first(); 95 while(!it.isDone()) { 96 obj = it.currentItem(); 97 console.log(‘the obj === ‘ + obj); 98 it.next(); 99 } 100 }(); 101 102 }()); 103 104 (function(){ 105 // 实现实例 106 107 // 工资表数据的整合 108 /* 109 项目的客户方收购了一家小公司，这家小公司有自己的工资系统，现在需要整合到客户方已有的工资系统中。 110 两方的工资系统数据结构可能不同，但用来描述工资的数据模型是差不多的。 111 */ 112 113 var Iterator = function(aggregate){ 114 this.aggregate = aggregate; 115 this.index = -1; 116 }; 117 Iterator.prototype = { 118 first: function(){ 119 this.index = 0; 120 }, 121 next: function(){ 122 if(this.index < this.aggregate.size()) { 123 this.index++; 124 } 125 }, 126 isDone: function(){ 127 return this.index === this.aggregate.size(); 128 }, 129 currentItem: function(){ 130 return this.aggregate.get(this.index); 131 } 132 }; 133 134 135 // 工资描述模型对象 136 var PayModel = function(){ 137 // 支付工资的人员 138 this.userName; 139 // 支付的工资数额 140 this.pay; 141 }; 142 PayModel.prototype = { 143 getUserName: function(){ 144 return this.userName; 145 }, 146 setUserName: function(userName){ 147 this.userName = userName; 148 }, 149 getPay: function(){ 150 return this.pay; 151 }, 152 setPay: function(pay){ 153 this.pay = pay; 154 }, 155 toString: function(){ 156 return ‘userName = ‘ + this.userName + ‘, pay = ‘ + this.pay; 157 } 158 }; 159 160 // 客户方已有的工资管理对象 161 var PayManager = function(){ 162 this.list = []; 163 }; 164 PayManager.prototype = { 165 createIterator: function(){ 166 return new iterator(this); 167 }, 168 get: function(index){ 169 var ret = null; 170 if(index < this.list.length) { 171 ret = this.list[index]; 172 } 173 174 return ret; 175 }, 176 size: function(){ 177 return this.list.length; 178 }, 179 180 // 计算工资，其实应该有很多参数，为了演示从简 181 calcPay: function(){ 182 var pm1 = new PayModel(); 183 pm1.setPay(3800); 184 pm1.setUserName(‘张三‘); 185 186 var pm2 = new PayModel(); 187 pm2.setPay(5800); 188 pm2.setUserName(‘李四‘); 189 190 this.list.push(pm1); 191 this.list.push(pm2); 192 } 193 }; 194 195 // 被客户方收购的那个公司的工资管理类 196 var SalaryManager = function(){ 197 this.pms = []; 198 }; 199 SalaryManager.prototype = { 200 // 获取工资列表 201 getPays: function(){ 202 return this.pms; 203 }, 204 // 计算工资 205 calcSalary: function(){ 206 var pm1 = new PayModel(); 207 pm1.setPay(2200); 208 pm1.setUserName(‘王五‘); 209 210 var pm2 = new PayModel(); 211 pm2.setPay(3600); 212 pm2.setUserName(‘赵六‘); 213 214 this.pms.push(pm1); 215 this.pms.push(pm2); 216 } 217 }; 218 219 new function(){ 220 var payManager = new PayManager(); 221 payManager.calcPay(); 222 var it = payManager.createIterator(); 223 console.log(‘集团工资列表：‘); 224 var pm; 225 it.first(); 226 while(!it.isDone()){ 227 pm = it.currentItem(); 228 console.log(‘ths obj === ‘ + pm); 229 it.next(); 230 } 231 232 var salaryManager = new SalaryManager(); 233 salaryManager.calcSalary(); 234 var pms = salaryManager.getPays(); 235 console.log(‘新收购的公司工资列表：‘); 236 for(var i = 0; i < pms.length; i++) { 237 console.log(pms[i]); 238 } 239 }(); 240 241 }()); 242 243 (function(){ 244 // 带迭代策略的迭代器示例 245 /* 246 在实现过滤功能的迭代器中，又有两种常见的需要过滤的情况，一种是对数据进行整条过滤，比如只能查看自己部门的数据；另外一种情况是数据进行部分过滤，比如某些人不能查看工资数据。 247 带迭代策略的迭代器实现的一个基本思路，就是先把聚合对象的聚合数据获取到，并存储到迭代器中，这样迭代器就可以按照不同的策略来迭代数据了。 248 */ 249 var Iterator = function(aggregate){ 250 this.pms = []; 251 this.index = 0; 252 253 // 在这里先对聚合对象的数据进行过滤 254 var tempCol = []; 255 var i; 256 for(i in aggregate) { 257 if(!aggregate.hasOwnProperty(i)) continue; 258 259 if(aggregate[i].getPay() < 3000) { 260 tempCol.push(aggregate[i]); 261 } 262 } 263 264 this.pms = []; 265 for(i = 0; i < tempCol.length; i++) { 266 this.pms[i] = tempCol[i]; 267 } 268 }; 269 Iterator.prototype = { 270 hasNext: function(){ 271 return this.index <= (this.pms.length - 1); 272 }, 273 next: function(){ 274 var ret = null; 275 if(this.hasNext()) { 276 ret = this.pms[this.index++]; 277 } 278 279 // 在这里对要返回的数据进行过滤，比如不让查看工资数据 280 if(ret) ret.setPay(0.0); 281 282 return ret; 283 }, 284 remove: function(){} 285 }; 286 287 /* 288 谁定义遍历算法的问题 289 290 在迭代器模式的实现中，常见的有两个地方可以来定义遍历算法，一个是聚合对象本身，另外一个就是迭代器负责遍历算法。 291 292 在聚合对象本身定义遍历算法，通常会在遍历过程中，用迭代器来存储当前迭代的状态这种迭代器被称为游标，因为它仅用来指示当前的位置。 293 294 在迭代器中定义遍历算法，会比在相同的聚合上使用不同的迭代器算法容易，同事也易于在不同的聚合上重用相同的算法。比如上面带策略的迭代器示例，迭代器把需要迭代的数据从聚合对象中取出并存放到自己的对象中，然后再迭代自己的数据，除了刚开始创建迭代器的时候需要访问聚合对象外，真正的迭代过程已经跟聚合对象无关了。 295 296 297 迭代器健壮程度如何 298 在遍历一个聚合的同时更改这个聚合可能是危险的。如果在遍历的时候增加或删除该聚合元素，可能会导致两次访问同一个元素或者遗漏掉某个元素。一个简单的解决办法是拷贝该聚合，并对该拷贝实施遍历，但一般来说代价太高。 299 300 一个健壮的迭代器保证插入和删除不会干扰遍历，且不需要拷贝该聚合。有许多方法来实现健壮的迭代器。其中大多数需要向这个聚合注册该迭代器。当插入或删除时，该聚合要么调整迭代器的内部状态，要么在内部的维护额外的信息以保证正确的遍历。 301 302 空迭代器 303 一个空迭代器是一个退化的迭代器，它有助于处理边界条件。一个NullIterator总是已经完成了遍历。例如：叶节点元素返回NullIterator的一个实例。 304 305 */ 306 307 /* 308 双向迭代器 309 310 可以同时向前和向后遍历数据的迭代器。 311 */ 312 313 }()); 314 315 /** 316 * 迭代器模式的优点 317 * 318 * 1.更好的封装性 319 * 2.迭代器模式可以让你访问一个聚合对象的内容，而无需暴露该聚合对象的内部表示，从而提高聚合对象的封装性。 320 * 3.可以以不同的遍历方式来遍历一个聚合。 321 * 4.使用迭代器模式，使得聚合对象的内容和具体的迭代算法分离开。这样就可以通过使用不同的迭代器的实例，不同的遍历方式来遍历一个聚合对象了。 322 * 5.迭代器简化了聚合的接口。 323 * 6.简化客户端调用 324 * 7.同一个聚合上可以有多个遍历。 325 * 8.每个迭代器保持它自己的遍历状态。 326 * 327 * 328 * 何时选用迭代器模式 329 * 330 * 1.如果你希望提供访问一个聚合对象的内容，但是又不想暴露它的内部表示的时候。 331 * 2.如果你希望有多种遍历方式可以访问聚合对象，可以使用迭代器模式。 332 * 3.如果你希望为遍历不同的聚合对象提供一个统一的接口。 333 * 334 * 335 * 相关模式 336 * 337 * 迭代器模式和组合模式 338 * 339 * 这两个模式可以组合使用。 340 * 组合模式是一种递归的对象结构，在枚举某个组合对象的子对象的时候，通常会使用迭代器模式。 341 * 342 * 迭代器模式和工厂方法模式 343 * 344 * 这两个模式可以组合使用。 345 * 在聚合对象创建迭代器的时候，通常会采用工厂方法模式来实例化相应的迭代器对象。 346 * 347 * 备忘模式 348 * 可使用memento来捕获一个迭代的状态。迭代器在其内部存储memento 349 */ 350 351 // 翻页迭代 352 (function(){ 353 354 // 顺序翻页迭代其示例 355 356 // 工资描述模型对象 357 var PayModel = function(){ 358 // 支付工资的人员 359 this.userName; 360 // 支付的工资数额 361 this.pay; 362 }; 363 PayModel.prototype = { 364 getUserName: function(){ 365 return this.userName; 366 }, 367 setUserName: function(userName){ 368 this.userName = userName; 369 }, 370 getPay: function(){ 371 return this.pay; 372 }, 373 setPay: function(pay){ 374 this.pay = pay; 375 }, 376 toString: function(){ 377 return ‘userName = ‘ + this.userName + ‘, pay = ‘ + this.pay; 378 } 379 }; 380 381 var SalaryManager = function(){ 382 this.pms = []; 383 }; 384 SalaryManager.prototype = { 385 getPays: function(){ 386 return this.pms; 387 }, 388 calcSalary: function(){ 389 var pm1 = new PayModel(); 390 pm1.setPay(2200); 391 pm1.setUserName(‘王五‘); 392 393 var pm2 = new PayModel(); 394 pm2.setPay(3600); 395 pm2.setUserName(‘赵六‘); 396 397 var pm3 = new PayModel(); 398 pm3.setPay(2200); 399 pm3.setUserName(‘王五二号‘); 400 401 var pm4 = new PayModel(); 402 pm4.setPay(3600); 403 pm4.setUserName(‘赵六二号‘); 404 405 var pm5 = new PayModel(); 406 pm5.setPay(2200); 407 pm5.setUserName(‘王五三号‘); 408 409 this.pms.push(pm1); 410 this.pms.push(pm2); 411 this.pms.push(pm3); 412 this.pms.push(pm4); 413 this.pms.push(pm5); 414 }, 415 // Factory Method 416 createIterator: function(type){ 417 if(type === ‘random‘) { 418 return new RandomIterator(this); 419 } 420 return new Iterator(this); 421 } 422 }; 423 424 // 双向迭代器 425 var Iterator = function(aggregate){ 426 this.pms = aggregate.getPays(); 427 this.index = 0; 428 }; 429 Iterator.prototype = { 430 hasNext: function(){ 431 return this.index <= (this.pms.length - 1); 432 }, 433 hasPrevious: function(){ 434 return this.index > 0; 435 }, 436 // 返回当前索引到num的集合 437 next: function(num){ 438 var col = []; 439 var count = 0; 440 while(this.hasNext() && count++ < num) { 441 col.push(this.pms[this.index++]); 442 } 443 444 return col; 445 }, 446 // 把索引退回去num个，然后再取值。 447 // 事实上有可能有多退回去的数据 448 previous: function(num){ 449 var col = []; 450 var count = 0; 451 this.index = num; 452 while(this.hasPrevious() && count++ < num) { 453 col.push(this.pms[this.index++]); 454 } 455 456 return col; 457 } 458 }; 459 460 new function(){ 461 var salaryManager = new SalaryManager(); 462 salaryManager.calcSalary(); 463 var it = salaryManager.createIterator(); 464 465 // 获取第一页，每页显示两条 466 var col = it.next(2); 467 console.log(‘第一页数据：‘); 468 print(col); 469 470 var col2 = it.next(2); 471 console.log(‘第二页数据：‘); 472 print(col2); 473 474 var col3 = it.previous(2); 475 console.log(‘第三页数据：‘); 476 print(col3); 477 478 function print(col){ 479 for(var i =0; i < col.length; i++) { 480 console.log(col[i]); 481 } 482 } 483 }(); 484 485 // 随机翻页迭代器示例 486 487 var RandomIterator = function(aggregate){ 488 this.pms = aggregate.getPays(); 489 this.index = 0; 490 }; 491 RandomIterator.prototype = { 492 hasNext: function(){ 493 return this.index <= (this.pms.length - 1); 494 }, 495 hasPrevious: function(){ 496 return this.index > 0; 497 }, 498 getPage: function(pageNum, pageShow){ 499 var col = []; 500 // 需要在这里先计算需要获取的数据的开始条数和结束条数 501 var start = (pageNum - 1) * pageShow; 502 var end = start + pageShow - 1; 503 504 if(start < 0) start = 0; 505 506 if(end > this.pms.length - 1) end = this.pms.length - 1; 507 508 this.index = 0; 509 while(this.hasNext() && this.index <= end) { 510 if(this.index >= start) col.push(this.pms[this.index]); 511 this.index++; 512 } 513 514 return col; 515 } 516 }; 517 518 new function(){ 519 var salaryManager = new SalaryManager(); 520 salaryManager.calcSalary(); 521 var it = salaryManager.createIterator(‘random‘); 522 523 // 获取第一页，每页显示两条 524 var col = it.getPage(1, 2); 525 console.log(‘第一页数据：‘); 526 print(col); 527 528 var col2 = it.getPage(2, 2); 529 console.log(‘第二页数据：‘); 530 print(col2); 531 532 var col3 = it.getPage(1, 2); 533 console.log(‘再次获取第一页数据：‘); 534 print(col3); 535 536 var col4 = it.getPage(3, 2); 537 console.log(‘第三页数据：‘); 538 print(col4); 539 540 function print(col){ 541 for(var i =0; i < col.length; i++) { 542 console.log(col[i]); 543 } 544 } 545 546 }(); 547 }()); 548 549 (function(){ 550 /** 551 * ECMAScript 6的Iterator--------------Generators 552 * 553 * 迭代器模式是很常用的设计模式，但是实现起来，很多东西是程序化的；当迭代规则比较复杂时，维护迭代器内的状态，是比较麻烦的。 于是有了generator，何为generator，这里 说的很明确: Generators: a better way to build Iterators.就是实现迭代器的更好的方式，借助 yield 关键字,可以更优雅的实现fib数列。 554 */ 555 556 // 最简单的yield用法 557 // 创建一个generatorFunction 558 function* Hello() { 559 yield 1; 560 yield 2; 561 } 562 563 /** 564 * function* Hello() { // 我习惯用大驼峰命名因为这就好比generator的构造函数 yield 1; yield 2; } 565 arguments: null 566 caller: null 567 length: 0 568 name: "Hello" 569 prototype: GeneratorFunctionPrototype 570 __proto__: GeneratorFunctionPrototype 571 constructor: function GeneratorFunctionPrototype() { [native code] } 572 next: function next() { [native code] } 573 throw: function throw() { [native code] } 574 __proto__: Object 575 __proto__: function GeneratorFunctionPrototype() { [native code] } 576 < function scope > 577 */ 578 579 var hello = Hello(); // hello 是一个generator 580 var a = hello.next(); // a: Object {value: 1, done: false} 581 var b = hello.next(); // b: Object {value: 2, done: false} 582 var c = hello.next(); // c: Object {value: undefined, done: true} 583 hello.next(); // Error: Generator has already finished 584 585 /* 586 以看到hello的原型链中总是有一个next函数, 每次运行都返回yield后面的值, 只是不是单纯的yield后面的值, 而是放在一个对象的value键中, 同时我们注意到对象中还有另一个键done, Hello函数中有两个yield, 因此前两个done的值为false, 表示我还没有结束呐!, 最后一个done为true, 表示我已经结束了! 如果继续运行hello.next()则会报错Uncaught Error: Generator has already finished 587 588 很明显的说yield就是相当于是另一种return, return使用时函数就结束了, 而使用yield的时候, 函数会卡在那个yield的地方, 等待下一个next 589 */ 590 591 // fib示例 592 593 // before 594 function fib(){ 595 return { 596 state :0, 597 cur :0, 598 prev1:-1, 599 prev2:-1, 600 hasNext:function(){ 601 return true; 602 }, 603 //fib数列，第一个是0，第二个是1，后面就是统一的迭代公式了 604 next:function(){ 605 if(this.state == 0){ 606 this.cur = 0; 607 this.state = 1; 608 }else if(this.state == 1){ 609 this.cur = 1; 610 this.prev2 = 0; 611 this.state = 2; 612 }else{ 613 this.prev1 = this.prev2; 614 this.prev2 = this.cur; 615 this.cur = this.prev1 + this.prev2; 616 } 617 return this.cur; 618 } 619 //ignore reset funciton 620 } 621 } 622 //这是无限序列，所以改造了一下，只生成8个数 623 var fibIter = fib(); 624 for(var i = 0; i < 8; i++){ 625 console.log(fibIter.next()); 626 if(fibIter.hasNext()) 627 continue; 628 } 629 630 // after 631 function* fib2(){ 632 yield 0; // 状态0，第一次调用next，返回0，并改变状态 633 yield 1; // 状态1，第二次调用next，返回1，并改变状态 634 635 var p1 = 0; 636 var p2 = 1; 637 var cur = p1 + p2; 638 639 while(true) { 640 yield cur; // 状态2，后面调用next，返回相应的几个，状态不再改变 641 642 p1 = p2; 643 p2 = cur; 644 cur = p1 + p2; 645 } 646 } 647 648 var fibIter2 = fib2(); 649 for(var i = 0; i < 8; i++){ 650 console.log(fibIter2.next().value); 651 } 652 /* 653 0 1 1 2 3 5 8 13 654 */ 655 656 657 // http://www.html-js.com/article/1716 658 659 (function(){ 660 // 对从1到100的数组，先取出其中的所有偶数，然后再取出所有其中的前10个， 661 // 然后再计算其平方，然后转成数组。 662 function* wrap(arr){ 663 for(var i = 0;i<arr.length;i++){ 664 yield arr[i]; // ---（1）---- 665 } 666 } 667 668 function iter(arr){ 669 return new Iterator(arr); 670 } 671 672 function Iterator(arr){ 673 this.gen = wrap(arr); 674 } 675 676 Iterator.prototype = { 677 where: function where(f){ 678 var gen = whereImple(this.gen, f); 679 this.gen = gen; 680 return this; 681 }, 682 map: function map(f){ 683 var gen = mapImpl(this.gen, f); 684 this.gen = gen; 685 return this; 686 }, 687 toArray: function toArray(){ 688 var arr = []; 689 var _g; 690 var gen = this.gen; 691 while (true){ 692 _g = gen.next(); 693 if(_g.done) break; 694 arr.push(_g.value); 695 } 696 return arr; 697 } 698 }; 699 700 function* mapImpl(gen,f){ 701 var _g; 702 while(true){ 703 _g = gen.next(); 704 if(_g.done) break; 705 yield f(_g.value); 706 } 707 } 708 709 function* whereImple(gen,f){ 710 var index = 0, _g, value; 711 while(true){ 712 _g = gen.next(); 713 if(_g.done) break; 714 value = _g.value; 715 if(f(value,index++)){ 716 yield value; 717 } 718 } 719 } 720 721 var _1to10 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 722 var arr =iter(_1to10) 723 .where(function(v){return v % 2 == 0}) 724 .map(function(v){return v * v}) 725 .toArray(); 726 console.log(arr); // [4, 16, 36, 64, 100] 727 }()); 728 729 // http://bg.biedalian.com/2013/12/21/harmony-generator.html 730 731 // 代替回调金字塔 732 733 function delay(time) { 734 return function(fn) { 735 setTimeout(function() { 736 fn(null, time); // null 表示没有错误.. 737 }, time) 738 } 739 } 740 741 function co(GenFunc) { 742 return function(cb) { 743 var gen = GenFunc(); 744 void function next(err, args) { 745 if (err) { 746 cb(err); 747 } else { 748 if (gen.next) { 749 var ret = gen.next(args); 750 if (ret.done) { 751 cb && cb(null, args); 752 } else { 753 ret.value(next); 754 } 755 } 756 } 757 }(); 758 } 759 } 760 761 co(function* () { 762 var a; 763 a = yield delay(200); // 200 764 a = yield delay(a + 100); // 300 765 a = yield delay(a + 100); // 400 766 })(function(err, data) { 767 if (!err) { 768 console.log(data); // print 400 769 } 770 }) 771 772 }()); 773 774 (function(){ 775 // http://www.dofactory.com/javascript-iterator-pattern.aspx 776 777 var Iterator = function(items) { 778 this.index = 0; 779 this.items = items; 780 }; 781 782 Iterator.prototype = { 783 first: function() { 784 this.reset(); 785 return this.next(); 786 }, 787 next: function() { 788 return this.items[this.index++]; 789 }, 790 hasNext: function() { 791 return this.index <= this.items.length; 792 }, 793 reset: function() { 794 this.index = 0; 795 }, 796 each: function(callback) { 797 for (var item = this.first(); this.hasNext(); item = this.next()) { 798 callback(item); 799 } 800 } 801 }; 802 803 // log helper 804 var log = (function() { 805 var log = ""; 806 return { 807 add: function(msg) { log += msg + "\n"; }, 808 show: function() { console.log(log); log = ""; } 809 } 810 })(); 811 812 813 new function run() { 814 815 var items = ["one", 2, "circle", true, "Applepie"]; 816 var iter = new Iterator(items); 817 818 // using for loop 819 820 for (var item = iter.first(); iter.hasNext(); item = iter.next()) { 821 log.add(item); 822 } 823 824 log.add(""); 825 826 // using Iterator‘s each method 827 828 iter.each(function(item) { 829 log.add(item); 830 }); 831 832 log.show(); 833 }(); 834 }()); 835 836 (function(){ 837 /* Title: Iterator 838 Description: implements a specialized language 839 */ 840 841 var agg = (function () { 842 843 var index = 0, 844 data = [1, 2, 3, 4, 5], 845 length = data.length; 846 847 return { 848 849 next:function () { 850 var element; 851 if (!this.hasNext()) { 852 return null; 853 } 854 element = data[index]; 855 index = index + 2; 856 return element; 857 }, 858 859 hasNext:function () { 860 return index < length; 861 }, 862 863 rewind:function () { 864 index = 0; 865 }, 866 867 current:function () { 868 return data[index]; 869 } 870 871 }; 872 }()); 873 874 var element; 875 while (element - agg.next()) { 876 // do something with the element 877 console.log(element); 878 } 879 880 while (agg.hasNext()) { 881 // do something with the next element... 882 console.log(agg.next()); 883 } 884 885 // this loop logs 1, then 3, then 5 886 while (agg.hasNext()) { 887 console.log(agg.next()); 888 } 889 890 // go back 891 agg.rewind(); 892 console.log(agg.current()); // 1 893 894 // reference 895 // http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/#iteratorpatternjquery 896 // http://shop.oreilly.com/product/9780596806767.do?sortby=publicationDate 897 }()); 898 899 (function(){ 900 var CafeMenu = function(){ 901 Menu.apply(this); 902 this.nPosition = -1; 903 this.aMenuItems = []; 904 this.createIterator = function(){ 905 return new CafeMenuIterator(this.aMenuItems); 906 }; 907 this.addItem("Express", "Coffee from machine", false, 0.99); 908 this.addItem("Long with water", "Coffee with a lot of water", false, 1.20); 909 this.addItem("On the rocks", "Coffee with ice", false, 2.00); 910 }; 911 CafeMenu.prototype.addItem = function(sName, sDescription, bVegetarian, nPrice){ 912 var oMenuItem = new MenuItem(sName, sDescription, bVegetarian, nPrice); 913 this.aMenuItems.push(oMenuItem); 914 }; 915 CafeMenu.prototype.getMenuItems = function(){ 916 return this.aMenuItems; 917 }; 918 919 var CafeMenuIterator = function(aMenuItems){ 920 this.aMenuItems = aMenuItems; 921 Iterator.apply(this); 922 this.nPosition = -1; 923 this.nLength = this.aMenuItems.length; 924 this.hasNext = function(){ 925 return (this.nPosition + 1) < this.nLength; 926 }; 927 this.next = function(){ 928 this.nPosition = this.nPosition + 1; 929 return this.aMenuItems[this.nPosition]; 930 }; 931 }; 932 933 var DinnerMenu = function(){ 934 Menu.apply(this); 935 this.oMenuItems = {}; 936 this.createIterator = function(){ 937 return new DinnerMenuIterator(this.oMenuItems); 938 }; 939 this.addItem("Vegetarian BLT", "(Fakin‘) Bacon with lettuce and tomato on whole wheat", true, 2.99); 940 this.addItem("BLT", "Bacon with lettuce and tomato on whole wheat", false, 2.99); 941 this.addItem("Soup of the day", "Soup of the day, with a side of potato salad", false, 3.29); 942 this.addItem("Hotdog", "A hotdog with saurkraut, relish, onions, topped with cheese", false, 3.05); 943 }; 944 DinnerMenu.MAX_ITEMS = 6; 945 DinnerMenu.prototype.addItem = function(sName, sDescription, bVegetarian, nPrice){ 946 if(this.length === DinnerMenu.MAX_ITEMS){ 947 throw new Error("Sorry menu is full! Can‘t add item to menu"); 948 } 949 this.oMenuItems[sName] = new MenuItem(sName, sDescription, bVegetarian, nPrice); 950 this.length = this.length + 1; 951 }; 952 DinnerMenu.prototype.getMenuItems = function(){ 953 return this.oMenuItems; 954 }; 955 956 var DinnerMenuIterator = function(oMenuItems){ 957 this.oMenuItems = oMenuItems; 958 Iterator.apply(this); 959 this.nPosition = -1; 960 this.nLength = 0; 961 this.hasNext = function(){ 962 return (this.nPosition + 1) < this.nLength; 963 }; 964 this.next = function(){ 965 this.nPosition = this.nPosition + 1; 966 return this.oMenuItems[this.aKeys[this.nPosition]]; 967 }; 968 this._getKeys = function(){ 969 var aKeys = []; 970 var sKey = ‘‘; 971 for(sKey in this.oMenuItems){ 972 if(this.oMenuItems.hasOwnProperty(sKey)){ 973 aKeys.push(sKey); 974 this.nLength = this.nLength + 1; 975 } 976 } 977 return aKeys; 978 }; 979 this.aKeys = this._getKeys(); 980 }; 981 982 var Iterator = function(){ 983 this.hasNext = function(){ 984 throw new Error("This method must be overwritten!"); 985 }; 986 this.next = function(){ 987 throw new Error("This method must be overwritten!"); 988 }; 989 this.remove = function(){ 990 throw new Error("This method must be overwritten!"); 991 }; 992 }; 993 994 var Mattress = function(aMenus){ 995 this.aMenus = aMenus; 996 }; 997 Mattress.prototype._printMenu = function(oIterator){ 998 var oMenuItem = null; 999 while(oIterator.hasNext()){ 1000 oMenuItem = oIterator.next(); 1001 console.log(oMenuItem.getName() + ": " + oMenuItem.getDescription() + ", " + oMenuItem.getPrice() + "eur."); 1002 } 1003 }; 1004 Mattress.prototype.printMenu = function(){ 1005 var nMenu = 0; 1006 var nLenMenus = this.aMenus.length; 1007 var oMenu = null; 1008 var oIterator = null; 1009 1010 for(; nMenu < nLenMenus;) 1011 { 1012 oMenu = this.aMenus[nMenu]; 1013 oIterator = oMenu.createIterator(); 1014 this._printMenu(oIterator); 1015 nMenu = nMenu + 1; 1016 } 1017 }; 1018 1019 var Menu = function(){ 1020 this.createIterator = function(){ 1021 throw new Error("This method must be overwritten!"); 1022 }; 1023 }; 1024 1025 var MenuItem = function(sName, sDescription, bVegetarian, nPrice){ 1026 this.sName = sName; 1027 this.sDescription = sDescription; 1028 this.bVegetarian = bVegetarian; 1029 this.nPrice = nPrice; 1030 }; 1031 MenuItem.prototype.getName = function(){ 1032 return this.sName; 1033 }; 1034 MenuItem.prototype.getDescription = function(){ 1035 return this.sDescription; 1036 }; 1037 MenuItem.prototype.getPrice = function(){ 1038 return this.nPrice; 1039 }; 1040 MenuItem.prototype.isVegetarian = function(){ 1041 return this.bVegetarian; 1042 }; 1043 1044 var PancakeHouseMenu = function(){ 1045 Menu.apply(this); 1046 this.nPosition = -1; 1047 this.aMenuItems = []; 1048 this.createIterator = function(){ 1049 return new PancakeHouseMenuIterator(this.aMenuItems); 1050 }; 1051 this.addItem("K&B‘s Pancake Breakfast", "Pancakes with scrambled eggs, and toast", true, 2.99); 1052 this.addItem("Regular Pancake Breakfast", "Pancakes with fried eggs, sausage", false, 2.99); 1053 this.addItem("Blueberry Pancakes", "Pancakes made with fresh blueberries", true, 3.49); 1054 this.addItem("Waffles", "Waffles, with your choice of blueberries or strawberries", true, 3.59); 1055 }; 1056 PancakeHouseMenu.prototype.addItem = function(sName, sDescription, bVegetarian, nPrice){ 1057 var oMenuItem = new MenuItem(sName, sDescription, bVegetarian, nPrice); 1058 this.aMenuItems.push(oMenuItem); 1059 }; 1060 PancakeHouseMenu.prototype.getMenuItems = function(){ 1061 return this.aMenuItems; 1062 }; 1063 1064 var PancakeHouseMenuIterator = function(aMenuItems){ 1065 this.aMenuItems = aMenuItems; 1066 Iterator.apply(this); 1067 this.nPosition = -1; 1068 this.nLength = this.aMenuItems.length; 1069 this.hasNext = function(){ 1070 return (this.nPosition + 1) < this.nLength; 1071 }; 1072 this.next = function(){ 1073 this.nPosition = this.nPosition + 1; 1074 return this.aMenuItems[this.nPosition]; 1075 }; 1076 }; 1077 1078 var oMattress = new Mattress([new PancakeHouseMenu(), new DinnerMenu(), new CafeMenu()]); 1079 console.log("---------------------------------------------"); 1080 oMattress.printMenu(); 1081 console.log("---------------------------------------------"); 1082 1083 }()); 1084 1085 </script> 1086 </body> 1087 </html>