Javascript: Better Code / Better Design help

I've been trying to read and understand a bit more about better code and design with Javascript, and really the lack of tutorials explicitly describing about the benifts / uses of creating code in a different way than what a majority of the online code has.

I came across the following code (below) and realized about assigning functions to variables, however am still trying to understand the benifit / how to use this to my advantage.

Is this prototyping, using closure, or just a neat stylized way of doing something instead of doing it in the normal sense of:

Function doThis(el, type, fn){ ... }

My main question is why would you use this method below, and what are the benifits to it?

Thank you in advance your your help and patience.

var addEvent = function() {
  if (window.addEventListener) {
    return function(el, type, fn) {
      el.addEventListener(type, fn, false);
    };
  } else if (window.attachEvent) {
    return function(el, type, fn) {
      var f = function() {
        fn.call(el, window.event);
      };
      el.attachEvent('on' + type, f)开发者_如何学C;
    };
  }
}();

Source: Javascript Tutorial

It looks like a speed optimization over simply defining the function.

Imagine you had

Function addEvent(el, type, fn){
   if (window.addEventListener) {
      el.addEventListener(type, fn, false);
   } else if (window.attachEvent) {
      var f = function() {
         fn.call(el, window.event);
       };
      el.attachEvent('on' + type, f);
   }
}

This is a cross-browser function to add an event that works the same as the example you posted. The difference comes when you have thousands of addEvent calls.

In the example you posted, the function is "simplified" and "materialized" for each browser type at start time (notice the "();" at the end)

you will get either

var addEvent = function(el, type, fn) {
  el.addEventListener(type, fn, false);
};

or

var addEvent= function(el, type, fn) {
  var f = function() {
    fn.call(el, window.event);
  };
  el.attachEvent('on' + type, f);
};

depending on the browser. The choice will never be re-evaluated afterwards (it would be useless since the browser will not change during execution ;-) . Hence the function is avoiding 1 or 2 tests everytime the addEvent function is called ! This can make a difference for such an heavy usage function like addEvent.

I hope this will help you,

Jerome Wagner

Generally you assign functions to variables when you are creating a class in Javascript.

function MyObject() {
 this.WhoAmI = function()
    {
       return "I don't know";
    };

} 

You could also assign a function to a variable when you're going to be using that function a bunch in another function but don't want to expose that function to all of your other code on the site.

You can also pass a function as a parameter to another function. Basically a delegate in C#.

It's a neat way of writing functions. It's not closure per say, any more than a normal function is. What really starts to get cool about this way of declaring functions is it becomes easier to write object oriented javascript. Take this example:

var COMMON = {};
COMMON.Util = {};
COMMON.Util.Sort = function(aArray,fCompare){...};

The listed function also shows another cool aspect of javascript, functions can be passed/returned, which leads to some cool programming techniques.

The code you posted is logically identical to :

var addEvent;
if (window.addEventListener) {
  addEvent = function(el, type, fn) {
    el.addEventListener(type, fn, false);
  };
} else if (window.attachEvent) {
  addEvent = function(el, type, fn) {
    var f = function() {
      fn.call(el, window.event);
    };
    el.attachEvent('on' + type, f);
  };
}

But there are advantages:

• Purists will argue that assigning multiple times is ugly at best
• If there are variables within a function, their scope is contained, thereby leaving the global namespace cleaner.
• probably other....

This is not...

• A Closure -- that is when you access a variable that is out-of-scope but the details are handled by the environment
• Prototyping -- that is when you are adding functions or to the base class of an object

A Javascript function that return a function can be useful. For instance, if you want the behavior of your code to change based on your runtime context, you can implement that rather cleanly by having one function generate the other function on the fly.

That said, like a lot of clever code techniques, it makes it tough for others to learn what you're doing. So maintenance becomes troublesome, and you can create some incredibly hard-to-debug problems too. I prefer the former pattern to the latter, unless there is a really unique reason to do so.

Not sure if I answered your question, but it felt good to me....