About function context

In our app, we don’t need to provide any API for other libraries to use. So we dont need global variable at all.

How to make the app zero global variables?

From 1 global variable to 0.

(function(){
  var hello = "world";
  this.name = "Thomas";
})();

1 global variable: name.

(function(){
  var hello = "world";
  this.name = "Thomas";
}).call(this);

1 global variable: name.

var scope = {};
(function(){
  var hello = "world";
  this.name = "Thomas";
}).call(scope);

1 global variable: scope.

(function(){
  var scope = {};
  (function(){
    var hello = "world";
    this.name = "Thomas";
  }).call(scope);
})();

Now, 0 global variables.

The same can apply to our TwentyFive app.

We have a global variable tf that works as a glue among different components. We can wrap all the code into a self-invoked-anonymous-function. And then executed all the components anonymous function by our desired context. For detail, please check the example code on this topic. And you can try the demo here although you will find no different on the visual part.

What’s next? We’re going to take a look at “TouchStart and TouchEnd event”.