Question

I am creating a website that’s being localized through JavaScript, however… I have alot of pages and in each page there are alot of text inputs items, I am using this plugin

http://code.google.com/p/jquery-watermark/

to apply watermark on my inputs, now I just need guides for better performance.

1. Shall all watermarks be in one javascript file, or each page shall have it’s own watermarks in it’s own javascript file?

2. Shall i create one JavaScript file having all the system $(object).watermark() (I am choosing objects by classes), or each page with it’s own JavaScript file must contain the jQuery watermark line of code?

Answer 1

General: normally you would have page specific things in a page specific javascript.

Your Problem;
assuming your html looks something like this;

<input type='text' name='bla'></input>

You could rewrite it to read;

<input type='text' name='email' class='watermark' data-watertype='email'></input>

You could apply a single javascript snippet and inlcude it throughout the page;

    var texts={ "email":"Please enter a valid email address", .... },
        elems=jQuery("input.watermark"),
        elem,
        watermarkType;

    elems.each(function(i,elem){
        elem=jQuery(elem);
        watermarkType = texts[ elem.attr("data-watertype") ] || "";
        if (watermarkType.length!==0){
            //apply the watermark
            elem.watermark(watermarkType);
        }
    }
//this isn't tested but should work as expected!

thus resolving the need of having a specific javascript for each page to apply the watermarks