Backbone/index.html at master · dkreitschmann/Backbone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<!doctype html>
<html lang="en">
  <head>
      <meta charset="utf-8">
      <title></title>
      <meta name="description" content="">
      <script src="js/jquery-1.8.3.min.js"></script>
  </head>
  <body>
    <div id="todo">
      <ul>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
        <li><a href="#">link</a></li>
      </ul>
    </div>
    <script>

      // This doesn't work like you might think, because the value of `i` never
      // gets locked in. Instead, every link, when clicked (well after the loop
      // has finished executing), alerts the total number of elements, because
      // that's what the value of `i` actually is at that point.

      /*var elems = document.getElementsByTagName( 'a' );

      for ( var i = 0; i < elems.length; i++ ) {

        elems[ i ].addEventListener( 'click', function(e){
          e.preventDefault();
          alert( 'I am link #' + i );
        }, 'false' );

      }*/

      // This works, because inside the IIFE, the value of `i` is locked in as
      // `lockedInIndex`. After the loop has finished executing, even though the
      // value of `i` is the total number of elements, inside the IIFE the value
      // of `lockedInIndex` is whatever the value passed into it (`i`) was when
      // the function expression was invoked, so when a link is clicked, the
      // correct value is alerted.

      /*var elems = document.getElementsByTagName( 'a' );

      for ( var i = 0; i < elems.length; i++ ) {

        (function( lockedInIndex ){

          elems[ i ].addEventListener( 'click', function(e){
            e.preventDefault();
            alert( 'I am link #' + lockedInIndex );
          }, 'false' );

        })( i );

      }*/

      // You could also use an IIFE like this, encompassing (and returning) only
      // the click handler function, and not the entire `addEventListener`
      // assignment. Either way, while both examples lock in the value using an
      // IIFE, I find the previous example to be more readable.

      /*var elems = document.getElementsByTagName( 'a' );

      for ( var i = 0; i < elems.length; i++ ) {

        elems[ i ].addEventListener( 'click', (function( lockedInIndex ){
          return function(e){
            e.preventDefault();
            alert( 'I am link #' + lockedInIndex );
          };
        })( i ), 'false' );

      }*/

      /*
      function wrapElements(a) {
        var result = [];
        for (var i = 0, n = a.length; i < n; i++) {
          result[i] = function() { return a[i]; };
        }
        return result;
      }
      var wrapped = wrapElements([10, 20, 30, 40, 50]);
      var f = wrapped[0];
      alert(f()); // undefined


      function wrapElements(a)
      {
        var result = [];

        for (var i = 0, n = a.length; i < n; i++)
        {
          (function(j) {
            result[i] = function() { return a[j]; };
          })(i);
        }
        return result;
      }

      var wrapped = wrapElements([10, 20, 30, 40, 50]);
      var f = wrapped[0];
      alert(f()); // undefined

      */
      function f() { return "global"; }

      function test(x)
      {
        var result = [];

        if (x) {
          function f() { return "local"; }
          result.push(f());
        }

        result.push(f());
        return result;
      }

      alert(test(true)); // ["local", "local"]
      alert(test(false)); // ["local"]

    </script>

</body>
</html>