managing common jquery script files in asp.net project

Question

I'm looking for best practices for using javascript/jQuery snippets in an asp.net project. I know that it is best to put all the scripts in a separate file rather than inline. That's good. It is easy to move these script functions to a common file (may be a couple of different ones to even out the performance of loading a single large file for small functions).

But there is some jQuery stuff that needs to happen on document.Ready on each page. How will I move this to a common .js file? I would like to avoid one script per page as it would be just too many.

For example, say Page1 has a need to manipulate a few radio buttons on load and has the following script inline. (just for illustration)

<script>
$(document).ready(function() {
 //check checkboxes
  if(true)
   call function1();
});
</script>

Same with Page2 but for some other condition, calling different function function2.

I can move the function1 and function2 to a common .js file but how about the document ready sections. Should that stay inline? I assume so because otherwise I'm not sure how the common.js will differentiate between document.ready for different pages.

Then does it defeat the purpose of not having inline javascript? If anyone can throw some light into this, it is much appreciated.

I did some research, but probably due to incorrect keywords, so far I haven't been able to find any good information along the same lines. Unobtrusive JavaScript seems promising in the comments below.

You should read about unobtrusive Javascript, which can allow you to get rid of those entirely. Bootstrap works this way. — SLaks
– SLaks, Commented Sep 13, 2013 at 17:16
Thank you for your comment. I most likely won't be able to use any new frameworks because it is an existing project. I'll research the unobtrusive js, but if you know of any good starter links to get me going in the right direction, it will be great. Thanks. — Alex J
– Alex J, Commented Sep 13, 2013 at 17:21
Basically, specify the behaviors in data-* attributes within the page, then use a single global JS script to read them. — SLaks
– SLaks, Commented Sep 13, 2013 at 17:24
I didn't quite understand the 'data-*' attributes, but in any case, wouldn't this also require a script file per page? That would be too much if each page only has a couple of script functions and not to mention user controls! — Alex J
– Alex J, Commented Sep 13, 2013 at 17:27
data-* attributes work in all browsers. Get rid of the ready scripts, and include a script at the end of the page that finds decorated elements and activates/scripts them. — SLaks
– SLaks, Commented Sep 15, 2013 at 16:49

SLaks · Accepted Answer · 2013-09-17 15:11:09Z

3

+50

You should specify what behaviors should exist within the HTML using data-* attributes.
You can then use a single universal piece of Javascript code to read these attributes and apply behaviors.

For example:

<div data-fancy-trick="trick-3">...</div>

In the JS file, you can write something like

$('[data-fancy-trick]'.each(function() { 
    var trickName = $(this).data('fancy-trick');
    switch (trickName) {
        ...
    }
});

For real-life examples of this technique, look at Bootstrap's Javascript components.

answered Sep 17, 2013 at 15:11

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

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

Comments

muratgu · Accepted Answer · 2013-09-17 01:03:31Z

2

You can simply have separate js files per page and include them in relevant pages. For shared script code, have a common js file. Following your example:

common.js

var myCommonVar = {};
function myCommonFunction(...){
   ...
}

page1.js

$(document).ready(function() {
 ...
 function1();
 ...
});

page2.js

$(document).ready(function() {
 ...
 function2();
 ...
});

page1.html

...
<script src='/js/common/js'></script>
<script src='/js/page1.js'></script>
...

page2.html

...
<script src='/js/common/js'></script>
<script src='/js/page2.js'></script>
...

answered Sep 17, 2013 at 1:03

muratgu

7,3213 gold badges27 silver badges26 bronze badges

5 Comments

Alex J Over a year ago

isn't it too much to have one script per page though?

muratgu Over a year ago

@alex, it depends. one benefit of keeping it in a file as opposed to inline is browser caching.

Alex J Over a year ago

I agree. but still one script per page is one too many. We have more than 100 pages or so.

muratgu Over a year ago

@alex, then please add that constraint into your question so we know what we are dealing with.

Alex J Over a year ago

I had kind of mentioned it in the question (one or two files), but added that information explicitly.

Ivan Sivak · Accepted Answer · 2013-09-19 07:23:28Z

1

Consider the usage of AMD (Asynchronous Module Definiton) design pattern. Put your JavaScript code into modules and on each page use just those you really need to. For example requirejs does a great job and I've been using it with success. If you have a bigger project you can split your modules into namespaces. This approach will keep excellent code maintainability and it's reliable. You simply put the "starter" javascript file on each page and load only those required modules you need to work with per each page.

answered Sep 19, 2013 at 7:23

Ivan Sivak

7,5484 gold badges39 silver badges43 bronze badges

Comments

haim770 · Accepted Answer · 2013-09-17 00:46:06Z

0

There are many ways to deal with this problem, either using a JavaScript Framework that is aiming to treat your website as a 'Webapp' (Angular and Ember among the popular), or using your own custom script that will do just that - invoking the appropriate JavaScript per loaded page.

Basically, a custom script that will be able to handle it, will have to make use of (pseudo) 'Namespaces' to separate modules/pages code sections.

Assuming you have 2 hypothetical pages, Home and Browse, Simplified code sample may look like this:

HTML:

<body data-page="Home">

Global.js:

var MyApp = {}; // global namespace

$(document).ready(function()
     {
     var pageName = $('body').data('page');

     if (pageName && MyApp[pageName] && MyApp[pageName].Ready)
          MyApp[pageName].Ready();
     });

Home.js:

MyApp.Home = MyApp.Home || {}; // 'Home' namespace

MyApp.Home.Ready = function()
     {
     // here comes your 'Home' document.ready()
     };

Browse.js:

MyApp.Browse = MyApp.Browse || {}; // 'Browse' namespace

MyApp.Browse.Ready = function()
     {
     // here comes your 'Browse' document.ready()
     };

MyApp.Browse.AnotherUtilFunc = function()
     {
     // you could have the rest of your page-specific functions as well
     }

Also, since you're using ASP.NET MVC, sometimes your Controller name may fit as the qualified page name, you can set it automatically in your Layout.cshtml (if you have one):

<html>
      <head>
      </head>

      <body data-page="@ViewContext.RouteData.Values["Controller"].ToString()">
           @RenderBody()
      </body>
</html>

edited Sep 17, 2013 at 0:46

answered Sep 17, 2013 at 0:37

haim770

49.2k7 gold badges113 silver badges139 bronze badges

2 Comments

Alex J Over a year ago

I removed the asp.net mvc tag, just using web forms.

haim770 Over a year ago

You can still extract and use some data from the Routing values, or even use the ASPX file name.

Shahbaz Chishty · Accepted Answer · 2013-09-17 12:51:59Z

0

I think its not worth stuffing up everything in a single file and separating them with conditional statements, just to avoid adding a reference on the respective file.

If you have code that can be called on 2,3 or more pages, then we can opt for having them in a common file. But if its going to be called on a single page then we must write code on the respective page only. This will also increase the overhead of declaring the functions that are not going to be called on the current page

And when you are using the common js file, then you don't need to worry about the $(document).ready(); event, you can use a single ready event in the common file and separate the code by using conditional statements.

answered Sep 17, 2013 at 12:51

Shahbaz Chishty

5121 gold badge4 silver badges9 bronze badges

Comments

danny117 · Accepted Answer · 2013-09-21 13:18:52Z

The new versions of the script manager will combine everything into one blob of a script. In theory it makes fewer round trips and things run faster. In practice you could end up with several large scripts that are nearly identical and each page needs its own blob of a script. If your making one of those never change the url website pages then this is the way to go.

I came up with these best practices when I was working with jquery on ASP.Net

Load Jquery in your master page above the first script manager. Jquery is now available on every page. The browser will only get it once and cache it.
If bandwidth is an issue use a jquery loader like googleload or MS content delivery network
Document.load is always at the bottom of the page to guarantee that everything needed is already loaded.

From my blog that I haven't updated in years...Google Load with ASP.Net

bjornl · Accepted Answer · 2013-09-23 05:20:03Z

0

One common way to address this problem would be to have your common script include followed by a per-page script element:

<!-- In 'shoppingcart.html' -->
<script src="main.js"></script>
<script>
    // Let there be a onDomReady JS object inside main.js
    // that defines the document.ready logic on a per-page basis
    $(document).ready(onDomReady.shoppingCart);
</script>

answered Sep 23, 2013 at 5:20

bjornl

1,9963 gold badges19 silver badges32 bronze badges

Comments

TigerBear · Accepted Answer · 2013-09-23 21:51:26Z

Great question, I have been dealing with the same thing. Here is what I have been doing:

Have your $(document).ready() call different init functions (if they exist), where each .js file has its own init which adds event listeners and loads functions, messes with css, etc.. Each .js file is separated out into different pieces of functionality.

This way you have one document ready that calls all of your initializers. So each page would include the .js functionality it needs. This way you can separate out what is different.

ex:

ready.js:

$(document).ready(function(){
if (typeof menuNavInit == 'function'){
     menuNavInit();
}
if (typeof menuNavDifferentInit == 'function'){
     menuNavDifferentInit();
}
//other .js functionality
});

menuNav.js

function menuNavInit(){
     $("#menu").on('click', menuNavClick)
}

function menuNavClick(){
//do something
}

menuNavDifferent.js

function menuNavDifferentInit(){
     $("#menu").on('click', menuNavDifferentClick)
}

function menuNavDifferentClick(){
//do something else
}

page1.html

...
<script src='scripts/ready.js'></script>
<script src='scripts/menuNav.js'></script>
...

page2.html

...
<script src='scripts/ready.js'></script>
<script src='scripts/menuNavDifferent.js'></script>
...

Collectives™ on Stack Overflow

managing common jquery script files in asp.net project

8 Answers 8

Comments

5 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

5 Comments

Comments

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related