javascript & jquery optimization question

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.

Shall all watermarks be in one javascript file, or each page shall have it's own watermarks in it's own javascript file?
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?

Ahmed Nuaman · Accepted Answer · 2011-06-28 11:36:26Z

1

TBH I wouldn't do it this way. I would apply the watermarks (or placeholders as they're known) in the HTML, like so:

<input type="text" placeholder="Hello mum!" />

And I would then use jQuery and Moderizer to determine if the current browser supports placeholders or not. If it does, you don't need to worry as the hard work's been done. If it doesn't, you can use a script like this:

if ( !Modernizr.input.placeholder )
{
    $( '[placeholder]' ).focus( function()
    {
        var i   = $( this );

        if ( i.val() === i.attr( 'placeholder' ) )
        {
            i.val( '' );
        }
    }).blur( function()
    {
        var i   = $( this );

        if ( i.val() === '' )
        {
            i.val( i.attr( 'placeholder' ) );
        }
    }).blur();
}

This script essentially checks to see if the user has clicked into the input or not. If they have, it removes the placeholder as text. If they leave the input and they've left text in there, it doesn't change anything. However, if the input is empty, it then fills it with the placeholder.

I hope that helps.

answered Jun 28, 2011 at 11:36

Ahmed Nuaman

13.4k16 gold badges58 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user510336 Over a year ago

the problem is not how to do the watermark thing , I've already done it...the question is only performance question , shall i use one generic javascript file for all my pages or one file for each page?

japrescott · Accepted Answer · 2011-06-28 11:49:11Z

0

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

answered Jun 28, 2011 at 11:49

japrescott

5,0633 gold badges29 silver badges38 bronze badges

9 Comments

user510336 Over a year ago

the problem is not how to do the watermark thing , I've already done it...the question is only performance question , shall i use one generic javascript file for all my pages or one file for each page? –

user510336 Over a year ago

the problem is not how to do the watermark thing , I've already done it...the question is only performance question , shall i use one generic javascript file for all my pages or one file for each page?

japrescott Over a year ago

?!then, I don't understand what your question is. As I said on the top of my post; "normally you would have page specific things in a page specific javascript" And I showed you a way, how you can handle ALL Watermarks accross ALL your pages with one single small file (which itself has to be on every page) Performance wise, having one single javascript file per page is the smartest way to go, while contatenating all javascript files into one single file (but only for javascript used on every page -> (will be cached by the user) ) and only add other really page specific jsfiles "by hand".Helped?

Ahmed Nuaman Over a year ago

I don't think it's wise to ever have any content kept in your JS files. You mentioned that these were localised, therefore I'd store the data in an XML or JSON document, that way your code is reusable and you won't have to edit lots of JS files for a small update.

japrescott Over a year ago

@Ahmed, you are absolutely correct, but I'm not going to program a whole i18n site to demonstrate the idea :) wrapped in a closure/module "var mystuff={}" you could load a language specific js file that sets "mystuff.texts={...}" thus letting the code stay very generic while adding language support very easy.

|

Collectives™ on Stack Overflow

javascript & jquery optimization question

2 Answers 2

1 Comment

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related