Geek Answers Handbook

A combination of jQuery function calls. Best practics?

I am creating a website that will consist of components. A component defined as a specific set of HTML and CSS and jQuery. Each page of the site will consist of many components.

In the best recommendations, we put our javascript block at the bottom of the page. We load the necessary .js files, and then plan to call the necessary functions:

doThisThing(); doThatThing();

Say I have an X component. I want to call a function whenever this component appears on the page that is displayed. From a jQuery perspective, what would be the perfect way to handle this? Some options:

1) Always call the function regardless of whether the component is on the page or not:

 $('.componentX').doYourThing()

This is easy, since we can simply have one universal block of jQuery function calls. But there is little performance, as it searches for the DOM in search of something that might not be there.

2) Attach the call to the component itself:

 <div id="componentX">my component</div> <script>$('.componentX').doYourThing()</script>

This is good because it itself contains markup and .js calls in one component. Disadvantages?

3) Integrate our component architecture with the back system to instantiate the components in the .js block. In other words, he would check if the component would be hosted on the temlate page and, if so, would add js function calls that depend on the main script block.

4) other options that I should consider?

UPDATE:

Based on kemp's answer, I thought I should clarify a bit. All our jQuery functions will be wrapped in one large compressed .js file, so it’s all the same from the point of view of server hits. I'm more interested in how best to handle all the individual function calls for each component on the page in the context of the individual page templates.

For example, component X can be used on 90% of all pages. So calling the jquery function for these other 10% of the pages doesn't seem like a big deal.

However, component Y can only be used on 5% of all pages. I probably don't want to call the jquery function on every page as 95% of the time, this would be necessary.

The following scenario, which can further complicate the situation: the Z component can be used once on 100% of all pages, but twice on 5% of pages.

+2
jquery components function-calls
source share
4 answers

Depending on the size of the project, I would choose option # 1 because of its simplicity or option No. 3 because it is correct.

C # 1, if you configure the selectors correctly, the performance impact is likely to be negligible. Identifier-based selectors are the best ( #elementid ), then element.classname (just .classname rather slowly).

With # 3, each component must know which JS file is needed for its functionality. When a component is defined on the page, this JS file must be added to the <head> page. Without knowing your server language and framework (if any), it’s hard to say more, but if the components are represented using code on the server in any way, they must have a constructor or initialization procedure, and inside this code you must put the logic to change the page <head> or some collection that is later read to build a <head> page.

I do not like # 2 because then you will have JavaScript throughout the page. It seems less than ideal.

+1
source share

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

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

install js with jquery lib and load it into the <head> section. Then,

in the html part:

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

this way your html will be cleaner, the js file will be cleaner, you will not wait until dom is loaded to call your functions. as soon as the <script> loads, your function will work. you can pass other parameters of your function as much as you want.

for example, you can change the DA.animateStuff function later:

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

and you can change the html like:

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

this way you can determine the height of the element when calling your function. if you do not define, it will be 500.

hope this was helpful. greetings

+2
source share

Personally, I would put all the code in a single .js file (unless you have very specific tasks performed on only a few pages that do not often load), so it can be cached once with a single request. I believe that the overhead of several requests is greater than a few additional DOM scans (which are performed by the client).

Option # 2 contradicts one of the basic principles of jQuery, which separates javascript code from markup, so I never go down that path.

0
source share

Personally, although I know this is messy and maybe not perfect practice, if you are worried about overhead, I would go with option number 2, amended.

Each of your components is assigned an identifier, I suppose? If you do $ ('# componentX1'). DoSomething () with each output of the component, you will have the least overhead, since the DOM is not scanned anywhere as much as it would if you accessed the components through the class name. See http://geekswithblogs.net/renso/archive/2009/07/14/jquery-selector-efficiencycost-impact.aspx .

Another idea is that I don’t know how your whole template system works, but perhaps you could store the identifier of each component of X in a global variable, and then scroll and print the javascript.doSomething () at the bottom of the template for each of them.

0
source share

More articles:


All Articles