components - Componetizing jQuery functions calls. Best practices? -

I am creating a site that is running with components, HTML and CSS and a special set of jQuery form Each component of the site defined in each component will have several components.

According to best practices, we are putting our javascript blocks at the bottom of the page. We load the required .js files, and then I am planning to call the necessary tasks:

  do do (to do); DoThatThing ();  

Assume that I have the component X. I want to call that function whenever that component will appear on the page provided. From a jQuery perspective, what would be the ideal way to handle this? Some options:

1) Whether the component is always on the page: Whether

  $ ('.comonentX'). / Code>  
 This is easy, because we may have a universal block of jQuery function calls. But a slight performance is getting hit because he is searching for DOM, which is not something that can happen.  
 2) Attach the component to call:  
  & lt; Div id = "componentX" & gt; My Components & lt; / Div & gt; & Lt; Script & gt; $ ('ComponentX.') DoYourThing (). & Lt; / Script & gt;  
 
 This is good because it has its own markup and .js call in the same component. Drawbacks? 
 
 3) Integrate our component architecture with back end system to allow the urgency of components in .js blocks. In other words, it is to see if the component is placed on the page template or not, if so, the JS function will add the call, depending on the main script block. 
 
 4) Should other options be considered? 
 
 Update: 
 
 Based on Kemp's answer, I thought I should clarify something. All our jQuery functions have a large compressed. JS files will be wrapped, so in the course of the server hit, it's all the same. I am more interested in how to better manage all the individual function calls for each component on the page in the context of the individual page template. 
 
 For example, component X can be used at 90% of all pages, for example, calling those jquery functions for those other 10% of pages does not look like a big deal. 
 
 However, component Y can only be used on 5% of all pages, I probably do not want to call the JPG function as 95% on each page, it would be unnecessary. 
 
 Another scenario, which can make things even more complex: component Z can be used once at 100% of all pages, but twice on 5% of pages. Based on the size of this project, I used to go with option # 1 due to its simplicity, 

Or option # 3 because it's fair.

With # 1, if you set your selectors properly, the effect of the demonstration may be weak. ID based selectors are the best ( #elementid ), then element.classname (just a lot less than .classname ). With the # 3, each component will need to know that its functionality requires a JS file when the component is defined on a page, then the JS file will be placed on the & lt of the page. ; Head & gt; should be added to your server side language and framework (if any), it is difficult to say more, but if the components are displayed in any way through the code on the server, then they have a constructor Or should be the initial routine, and within that code you can see the & lt; Head & gt; , or want to position the reasoning to modify some collections, which are the result of the & lt; Head & gt; The construction of is read later.

I do not like # 2 because you will have javascript on the whole page. I think it is less than ideal.