Faster way of passing a param to call functions.

This pattern of functions as objects runs significantly faster than a switch statement doing the same thing on IE (40%) and marginally faster on Chrome (15%) and Firefox (3%) however safari actually comes in faster with optimisations on switch statements by 1.8%.

For SharePoint at least this is worth considering as a pattern for any large switch statement you may use.

var opt = "example";

var funcCalls = {
"Add":addToFunction = function(options) {
alert("Zero " + options);
},
"Add1":addToFunction1 = function(options) {
alert("One " + options);
},
"Add2":addToFunction2 = function(options) {
alert("Two " + options);
},
"Add3":addToFunction3 = function(options) {
alert("Three " + options);
}
};

myCall = "Add1";
funcCalls[myCall].call(this, opt);

Advertisements

Node.nodeType – Don’t use for backwards compatability!

Just a note the following, Node.nodeType isn’t in IE8 or below so if you are targeting those browsers make sure to use the number instead of the textual format.

The node type values:
Node.ELEMENT_NODE == 1
Node.ATTRIBUTE_NODE == 2
Node.TEXT_NODE == 3
Node.CDATA_SECTION_NODE == 4
Node.ENTITY_REFERENCE_NODE == 5
Node.ENTITY_NODE == 6
Node.PROCESSING_INSTRUCTION_NODE == 7
Node.COMMENT_NODE == 8
Node.DOCUMENT_NODE == 9
Node.DOCUMENT_TYPE_NODE == 10
Node.DOCUMENT_FRAGMENT_NODE == 11
Node.NOTATION_NODE == 12

example:
this.nodeType == 3
not
this.nodeType == Node.TEXT_NODE
Will check the node type you have loaded to see if it is one that holds text.

example 2:
this.nodeType == 11
not
this.nodeType == DOCUMENT_FRAGMENT_NODE
This will check to see if the node holds other nodes, ie is a DOM fragment.

Good hunting dom manipulators!

[code snippet] Populate a table from an array (JQuery)

Ever returned a massive array from json? Want to pre render the table to reduce dom manipulation and just populate the data?

Well this can be used for tables and with a modification a table made from DIVs (If you really don’t want to use tables for what they are used for!)

Basically I got asked how do you do this using JQuery, it really makes it simple doesn’t it.

A simple nested loop, if you can beat it for performance please post I want to know!

var newarray = [["One","Two","Three"],
                ["One 2nd","Two 2nd","Three 2nd"],
                ["One 3rd","Two 3rd","Three 3rd"]];
$('#foo tr').each(
    function(i) {$(this).find('td').each(
        function(j) {
            $(this).html(newarray[i][j]);
        });
    });

Nothing is iffy with IIFE in javascript

IIFE – Immediately Invoked Function Expression (Pronounced: “Iffy”)
Okay now we know what IIFE stands for what is an IIFE and how do we use it?

(function() { })();

You might of seen one before, what it does it scope everything inside itself and when the document loads the () it is executed.

A lot of JavaScript libraries use them but very few people actually use them when writing smaller JavaScript functions.

This might sound a little confusing at first but look at it this way.

function myfunction() {
}
myfunction();

Is the same in operation as:

(function() {
})();

Although the IIFE is also marginally faster, but so marginally you would have to run it millions of times to notice the difference.

So what can we do with an IIFE that is cool?

Well lets look at JQuery, I have not long opened the black box that is JQuery, since it’s release for the first time since oh I don’t know 1.3? and it has changed quite significantly. But it still uses IIFEs!

At the start you will notice the opening goes a little like this:

(function(window,document,undefined) {

and at the end like:

})(this,document);

But why does it do this. Well you have just made a localised version of the window and the document for a start, while not immensely a speed advantage, it means you have your reference to these objects already set, so you don’t need to do:

var mydocument = document;

It’s a shortcut, beautiful and simple.

So what is undefined doing there? Well JQuery initialises itself with undefined incase some clever so and so does something like:

undefined = true;

This would really mess things up when you are checking to see if something is undefined right? The problem is that this is totally valid syntax and while it might not happen, it could throw some weird things in JQuery so it makes its own localised version so no one can tamper with it.

Great we have just seen an IIFE used as a constructor of sorts for JQuery, they can be used in all sorts of ways, like looped calls:

(function myloop() {

// Code to loop here

// Loop this after 1 second more has passed
setTimeout(myloop, 1000);
})();

The beauty of this code is that it will only loop when the code has executed compared to just using set timeout to call a function that does the code to loop, this means you don’t have to worry about the code execution time, it will run 1 second after it has finished running, beautiful and safe.

I have seen other uses of IIFE for example creating false classes, you just need to imagine what you can do and give it a go.

[update]
I have just stumbled across this: Decoding Self Invoking Anonymous Functions