Redirect within a javascript file

There often comes a time when you are working on a large project and find a need to refactor javascript resources. Unfortunately, if those assets are accessed by 3rd parties or other code you cannot easily update, you might find yourself stuck.

If you have access to the Tier1 (HTTP server such as ApacheHTTPd) you can often do this within the httpd.conf, or an .htaccess file update. If not, you can always do a simple function within the old javascript file itself, such as the one below.

Put this in the old javascript file location, it is in a closure to prevent the variables from “leaking” into the global namespace.


/* MOVED */
(function(){
"use strict";
var u='/js/newfile.js';
var t=document.createElement('script');t.type='text/javascript';t.src=u;
var s=document.getElementsByTagName('script')[0];s.parentNode.insertBefore(t,s);
})();

Javascript “this” keyword

The “this” keyword is an indispensable, yet often mis-understood, concept in JavaScript object-oriented programming. When used in a JavaScript constructor function, “this” refers to the specific instance of the Object. Through the “this” keyword, properties and methods can be assigned object, also known as a class.

For example:

function Square(intSideLength)
{
this.sideLength = intSideLength;
}

In the preceding example the “this” keyword is used to assign the variable “sideLength” as a property of the Square class.
The “this” keyword is also frequently passed as a parameter on JavaScript events, such as when a checkbox is clicked. In such an instance, “this” refers to the current object, the checkbox.

REFERENCES:

JQuery equivalent to Element.identify(el)

Migrating between various javascript frameworks can often prove difficult, especially when developers become comfortable with the specific features of one library. Here is a feature that I’ve seen used in PrototypeJS that does not exist in jQuery, but can easily be added with a new function.

PrototypeJS provides an identify(el);function … Element.identify(el);. This is powerful in the sense that it returns the ‘id’ of an element, or automatically generates and assigns one when it is empty.

For jQuery the following can be added to emulate the functionality.

jQuery.fn.identify = function(prefix) {
var i = 0;
return this.each(function() {
if($(this).attr('id')) return;
do {
i++;
var id = prefix + '_' + i;
} while(document.getElementById(id) != null);
$(this).attr('id', id);
});
};

(function($) {// Compliant with jquery.noConflict()
$('span').identify('test');
})(jQuery);

JavaScript function overloading

JavaScript, while mostly object-oriented, does not support function overloading like Java and other common OO languages. To my less knowledgeable audience, overloading is use of the same function name with a different number of arguments or types.

NOTE: there are various ways to implement this sort of functionality using various frameworks, but legacy code can be full of these issues!

In the following code, they share the same name, the second function will always be executed as it is defined last!


<script type="text/javascript">
function doSomething(arg1, arg2){
alert('2 args');
}
function doSomething(arg1){
alert('1 arg');
}
</script>