All geek questions in one place

Managing shared jquery script files in asp.net project

I am looking for better methods to use javascript/jQuery snippets in an asp.net project. I know that it is best to put all the scripts in a separate file, and not in a line. It's good. It’s easy to move these script functions to a common file (it may be slightly different to align the loading performance of one large file for small functions).

But there are some jQuery things that should happen on document.Ready on every page. How to transfer this to a shared .js file? I would like to avoid one script per page, as that would be too much.

For example, say Page1 needs to be manipulated by several switches at boot time and has the following script built in. (for illustration only)

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

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

I can move functions1 and function2 to a common .js file, but what about document ready sections. Should it stay in line? I think so, because otherwise I’m not sure how common.js will distinguish document.Ready for different pages.

Then it robs the target of not having inline javascript ? If someone can shed light on this, he is very much appreciated.

I did some research, but probably due to the wrong keywords, so far I have not been able to find any good information in the same areas. Unobtrusive JavaScript seems promising in the comments below.

+4
source share
8 answers

You must specify what behaviors should exist in HTML using the data-* attributes.
You can then use one generic piece of Javascript code to read these attributes and apply the behavior.

For instance:

 <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-world examples of this technique, check out the components of Bootstrap Javascript .

+3
source

You can simply have separate js files on the page and include them on the corresponding pages. For generic script code, use a generic 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> ...
+2
source

Consider using the AMD design template (Asynchronous Module Definiton). Put your JavaScript code in modules and use only the ones you really need on each page. For example, requirejs does a great job, and I have used it with success. If you have a larger project, you can split your modules into namespaces. This approach will maintain superior code compatibility and reliability. You simply put the "start" javascript file on each page and load only those necessary modules that you need to work with each page.

+1
source

There are many ways to solve this problem using the JavaScript Framework, which aims to treat your site as a "Webapp" ( Angular and Ember among the popular ones) or using its own custom script that will do just that - by invoking the appropriate JavaScript for the loaded page.

Basically, a custom script that can handle it will have to use (pseudo) "Namespaces" to separate sections of modules / pages.

Assuming you have two hypothetical pages, Home and Browse , a simplified version of the code might 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 }

In addition, since you use ASP.NET MVC, sometimes your Controller name can fit as a qualified page name, you can set it automatically in your Layout.cshtml (if any):

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

I think that it is not necessary to accumulate everything in one file and separate them with conditional operators, just so as not to add a link to the corresponding file.

If you have code that can be called on 2.3 or more pages, we can select them in a common file. But if you call it on one page, we should write code only on the corresponding page. It will also increase overhead when declaring functions that will not be called on the current page.

And when you use a regular js file, you do not need to worry about the $(document).ready(); event $(document).ready(); , you can use one ready-made event in a common file and separate the code using conditional statements.

0
source

Newer versions of the script manager will merge everything into one script block. Theoretically, he does less round trips, and everything works faster. In practice, you can get several large scripts that are almost identical, and each page needs its own script block. If you make one of those who never changes the page of a website URL, then this is the way to go.

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

  • Download jquery on the main page above the first script manager. JQuery is now available on every page. The browser only gets it once and caches it.
  • If bandwidth is a problem, use a jquery loader like googleload or MS content delivery network
  • Document.load is always at the bottom of the page to ensure that everything you need is already loaded.

From my blog that I haven't updated in years ... Downloading Google using ASP.Net

0
source

One common way to solve this problem is to have your generic include script followed by a script element for each page:

 <!-- 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>
0
source

Great question, I am dealing with the same. That's what I'm doing:

Ask your $ (document) .ready () to call different init functions (if they exist), where each .js file has its own init, which adds functions for listening and loading events, mess with css, etc. Each .js file is divided into different parts of the functionality.

Thus, you have one ready-made document that calls all your initializers. Therefore, each page will include .js functionality. That way you can distinguish different ones.

Example:

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> ...
0
source

Source: https://habr.com/ru/post/1502094/

More articles:


All Articles