Learning JavaScript design patterns: iterator patterns and javascript Design Patterns

Learning JavaScript design patterns: iterator patterns and javascript Design Patterns

• The iterator mode provides a method to access each element of an aggregate object sequentially without exposing the internal representation of the object.
  

Array. prototype. forEach in JavaScript

1. iterator in jQuery

$. Each ([1, 2, 3], function (I, n) {console. log ("Current Subscript:" + I + "Current element:" + n );});

2. Implement your own iterator

Var each = function (ary, callback) {for (var I = 0, l = ary. length; I <l; I ++) {callback. call (ary [I], I, ary [I]) ;}}; each ([1, 2, 3], function (I, n) {console. log ("Current Subscript:" + I + "Current element:" + n );});

Note: parameters different from those of Array. prototype. forEach !!!

[1, 2, 3]. forEach (function (n, I, curAry) {console. log ("the current subscript is:" + I + "the current element is:" + n + "the current array is:" + curAry );})

3. Internal iterator and external iterator

(1) Internal iterator:The iteration rule has been defined. It takes over the entire iteration process, and only one initial call is required. The preceding custom each is an internal iterator!
(2) External iterator:The next element of the requested iteration must be displayed.
Example: Determine whether two arrays are equal

Example 1: Internal iterator

// Internal iterator var each = function (ary, callback) {for (var I = 0, l = ary. length; I <l; I ++) {callback. call (ary [I], I, ary [I]) ;}}; // comparison function var compareAry = function (ary1, ary2) {if (ary1.length! = Ary2.length) {throw new Error ("not equal"); // return console. log ("not equal");} // contains each (ary1, function (I, n) {if (n! = Ary2 [I]) {// return console. log ("not equal"); // return can only be returned outside the each method, subsequent console. log ("Equal") will continue to be executed, so throw new Error ("not equal") ;}} must be used here; console. log ("Equal");} compareAry ([1, 2, 3], [1, 2, 4]);

Example 2: External iterator

// External Iterator var Iterator = function (obj) {var current = 0, next = function () {current ++ ;}, isDone = function () {return current> = obj. length ;}, getCurrentItem = function () {return obj [current] ;}; return {next: next, isDone: isDone, getCurrentItem: getCurrentItem };}; // comparison function var compareAry = function (iterator1, iterator2) {while (! Iterator1.isDone ()&&! Iterator2.isDone () {if (iterator1.getCurrentItem ()! = Iterator2.getCurrentItem () {throw new Error ("not equal");} iterator1.next (); iterator2.next ();} console. log ("Equal");} compareAry (new Iterator ([1, 2, 3]), new Iterator ([1, 2, 4]);

Iv. Terminate the iterator

var each = function(ary, callback) {  for(var i = 0, l = ary.length; i < l; i++) {    if(callback.call(ary[i], i, ary[i]) === false) {      break;    }  }}each([1, 2, 4, 1], function(i, n) {  if(n > 3) {    return false;  }  console.log(n);});

V. Application (implemented)

File Upload: Obtain the Upload Component Objects Based on Different browsers.
Comparison between JavaScript design mode and responsibility chain mode

Var iteratorUploadObj = function () {for (var I = 0, fn; fn = arguments [I]; I ++) {var uploadObj = fn (); if (uploadObj! = False) {return uploadObj ;}}; var uploadObj = iteratorUploadObj (getActiveUploadObj, getFlashUploadObj, getFormUploadObj); function getActiveUploadObj () {try {return new ActiveObject ("TXFTNActiveX. FTNUpload "); // IE upload control} catch (e) {return false ;}} function getFlashUploadObj () {if (supportFlash (). f = 1) {var str = '<object type = "application/x-shockwave-flash"> </object>'; return $ (str ). appendTo ($ ("body");} return false;} function getFormUploadObj () {var str = '<input name = "file" type = "file" class = "ui-file"/>'; return $ (str ). appendTo ($ ("body") ;}// whether flashfunction supportFlash () {var hasFlash = 0; // whether flash var flash version = 0 is installed; // flash version if (document. all) {var swf = new ActiveXObject ('shockwaveflash. shockwaveFlash '); if (swf) {hasFlash = 1; VSwf = swf. getVariable ("$ version"); flashVersion = parseInt (VSwf. split ("") [1]. split (",") [0]) ;}} else {if (navigator. plugins & navigator. plugins. length> 0) {var swf = navigator. plugins ["Shockwave Flash"]; if (swf) {hasFlash = 1; var words = swf. description. split (""); for (var I = 0; I <words. length; ++ I) {if (isNaN (parseInt (words [I]) continue; flashVersion = parseInt (words [I]) ;}}} return {f: hasFlash, v: flashVersion };}

I hope this article will help you learn about javascript programming.

Articles you may be interested in:

• A deep understanding of the JavaScript series (35): a detailed explanation of the design pattern iterator Pattern