ansaurus

Question

Componetizing jQuery functions calls. Best practices?

Answer 1

A:

Personally I would put all the code in one .js file (unless you have some very specific tasks done only on a few pages not often loaded), this way it can be cached once with a single request. I believe the overhead of multiple requests is greater than a few more DOM scans (which are done by the client).

Option #2 is against one of the main principles of jQuery, which is separating the javascript code from the markup, so I'd never go down that path.

kemp 2010-01-25 21:29:35

Ah, to clarify, all of the actual .js *will* be in one file (and compressed). My question was more along the lines of the actual function calls and how to associate them with a particular element on the page when that particular element may or may not exist universally site-wide.

DA 2010-01-25 21:37:44

Answer 2

+1 A:

Depending on the size of the project, I would go with option #1 because of its simplicity, or option #3 because it is proper.

With #1, if you setup your selectors properly, the performance impact will probably be insignificant. Id based selectors are the best (#elementid), then element.classname (just .classname is quite slow in comparison).

With #3, each component needs to know which JS file is required for its functionality. When the component is defined on a page, that JS file must be added to the <head> of the page. Without knowing your server side language and framework (if any), it is hard to say more, but if the components are represented via code on the server in any way, they should have a constructor or initialization routine, and within that code is where you'd place the logic to modify the page's <head>, or some collection that is later read from to construct the page's <head>.

I don't like #2 because you'll have JavaScript all over the page then. That seems less than ideal.

CalebD 2010-01-27 14:23:32

Answer 3

+1 A:

you can go for a hybrid solution, compile and compress your js file and call functions inline let's say we will use 2 different functions heres' example:

var DA = {
    animateStuff:function(element){
        $(element).animate({height:500},normal);
        $(element).doSomethingElse();
    },
    doAnotherStuff:function(element){
        $(element).doOtherThings();
    }
};

pack your js with jquery lib and load it in <head> section. then,

in html part:

<div id="componentX">my component</div>
<script>DA.animateStuff('#componentX');</script>

<div class="componentY">my component</div>
<script>DA.doAnotherStuff('.componentY');</script>

in this way your html will be cleaner, js file will be cleaner, you won't wait dom to be loaded for invoking your functions. as soon as <script> tag loaded your function will be working. you can pass other options to your function as much as you want.

for instance, you may decide to change your DA.animateStuff function later to this:

animateStuff:function(element, desiredHeight){
                if(!desiredHeight){
                   var desiredHeight = 500
                }
            $(element).animate({ height: desiredHeight },normal);
            $(element).doSomethingElse();
        },

and you can change html like:

<div id="componentX">my component</div>
<script>DA.animateStuff('#componentX',900);</script>

in this way you can define height of element when calling your function. if you don't define it'll be 500.

hope this was helpful. cheers

ilhan negis 2010-01-27 19:50:51

Answer 4

A:

Personally, though I know it's messy and maybe not ideal practice, if you are worried about overhead, I would go with option #2, modified.

Each of your components are assigned an ID as well, I assume? If you do $('#componentX1').doSomething() each time you output the component, then you will have the least overhead, as the DOM is not being scanned anywhere near as heavily as it would be if you were accessing the components via class name. See http://geekswithblogs.net/renso/archive/2009/07/14/jquery-selector-efficiencycost-impact.aspx.

Another idea -- I'm not sure how your whole templating system works either, but perhaps you could store the ID of each component X in a global variable, and then loop through and print out the .doSomething() javascript at the bottom of the template for each one.

jessica 2010-01-28 21:17:54

ansaurus

tags:

views:

answers:

Componetizing jQuery functions calls. Best practices?

related questions