Geek Answers Handbook

Where to use javascript customization features?

What is the general opinion of developers about including javascript code in a file instead of including it in a script tag.

So, we all agree that jquery needs to be included in the script file, as shown below:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

My question is to get features on a page that is not on all pages of the site. Will we include functions like below on the same page or in the global include file, as indicated above, mysite.js.

 $(document).ready(function(){ $(".clickme").click(function(event){ alert("Thanks for visiting!"); }); });

OK. Thus, the question is: if the above code is called in each class = "clickme" on certain pages, and you have the opportunity to call it either from a separate file named mysite.js, or to the contents of the page. How will you go?

Arguments:

  • If you include it in a page, you will only call it from those specific pages where the js function is needed.

  • Or you include it as a file that is cached by the browser, but then jquery will have to spend x ms to know that this function does not start on a page without the "clickme" class.

EDIT 1: OK. One point that I want to make sure people are referring is that the result of the document.ready function being called things that don't exist on the page, will there be any delays in the browser? Is this a significant impact?

+4
source share
4 answers

First of all, $("#clickme") will find id = "clickme" not class = "clickme". You need $(".clickme") if you are looking for classes.

I (try) to never put any actual JavaScript code inside my XHTML documents unless I quickly test something on the page. I always refer to an external JS file to load the necessary functions. JS-free browsers (such as web crawlers) will not download these files, and this makes your code much cleaner for the "view source".

If I need a little functionality on just one page, it sometimes gets its own include file. It all depends on how many functional / slow selectors it uses. Just because you put JS in an external JS file does not mean that you need to include it on every page.

The main reason I use this practice is that if I need to change any JavaScript code, everything will be in one place and it will change to the whole site.

Regarding the issue of performance, some selectors take a lot of time, but most of them (especially those related to ID) are very fast. Finding a selector that does not exist is a waste of time, but when you put it against the time spent by the second HTTP request script (which blocks the DOM from being ready for battle), searching for an empty selector will usually win as the lesser of two evils. jQuery 1.3 Remarks Performace and SlickSpeed hopefully help you decide how much MS you really lose to find a class.

+3
source

I tend to use an external file, so if a change is needed, it is done in one place for all pages, and not x is changed on x pages.

Also, if you leave the project and someone else takes responsibility, it can be a huge pain to delve around the project, trying to find some built-in js.

+1
source

My personal preferences

  • fully global functions, plugins and utilities - in a separate JavaScript file and link to each page (like a jQuery file)

  • the specific functionality of the page is in a separate JavaScript file and only on the link that is required for

Remember that you can also minimize gzip files.

I strongly believe in unobtrusive JavaScript and therefore try to avoid using any JavaScript code with markup, even if JavaScript is in its own script block.

+1
source

I agreed to never have code on your HTML page. In ASP.net, I programmatically added a check to each page to see if it has a javascript file of the same name.

Eg. MyPage.aspx will search for MyPage.aspx.js

For my MVC homepage, I have this code to add a javascript link:

  // Add Each page javascript file if (Page.ViewContext.View is WebFormView) { WebFormView view = Page.ViewContext.View as WebFormView; string shortUrl = view.ViewPath + ".js"; if (File.Exists(Server.MapPath(shortUrl))) { _clientScriptIncludes["PageJavascript"] = Page.ResolveUrl(shortUrl); } }

This works well because:

  • It is automatically included in my files
  • The .js file lives next to the page itself

Sorry if this does not apply to your language / coding style.

0
source

More articles:


All Articles