What is the difference between making a script and calling one?

Navigation
4

In a few words I want to know what the difference is, PROS and / or CONTRAS to have a script full of funciones , or to call a file .js that contains all the functions.

So far I have not had problems creating files .js that have all the functions to use, apart from being able to use them in different pages HTML but apart from this, how else can this difference affect?

Does this increase the process of loading the page or is it just a kind of good programming practice?

    
asked by felipe andrade 20.09.2017 в 17:23
source

2 answers

4

Pros:

  • Same functionality : Functionally it's going to be the same as having the code in a .js and including it in the page.
  • "Custom" code : You would be loading only the code you need on each page. If your page only uses one function, you do not want to include a file with 1,000 functions (although this pro is lost when caching the browsers).
  • Less connections : One less http connection; browsers have a limit of simultaneous connections, saving you one will make your page load faster (although this pro is lost when caching browsers).

Cons:

  • Readability : Even if you order the code well, it will be tedious to pass lines and lines of JS and HTML (mixes two different languages)
  • Interface separation and business logic : related to the previous point. It is better if the code is separated following the architecture pattern MVC (model-view-controller), which will lead to the following two points.
  • Reuse / Duplication : since the code is directly in the HTML, those functions can not be called from another HTML page; whereas if you had a .js you could include it in several HTML.
  • Maintenance : related to the previous one, unless the JS inline is added through a script on the server (eg including it with PHP), then you will find that you have JavaScript in multiple files ( even repeated) making it more difficult to make changes.
  • Performance : this is the most important point, because having the JS embedded in the page affects performance in several ways:
    • Download slower : the page will have more lines of code, it will weigh more KB so it will take longer to download.
    • Unnecessary download : if you had the code in a .js, the browser could save that file in the cache and would not need to reload it the next time it is requested.
    • Speed : the execution of the script "blocks" the processing of the page in the browser, if you had the external scripts, you could use defer / async that only work when the attribute src is present.

The idea is that the cons of having the code embedded directly on the page make the pros (which are few and not really strong) look inadequate.

    
answered by 20.09.2017 / 18:33
source
4

There are at least two reasons not to put the functions directly in the HTML:

  • Performance in loading the web : If you have a web page that is updated to each call (or every X time) because it is generated dynamically (PHP or JSP or ASP or similar technologies), it is not cacheable. You will have to download the lines of code and HTML every time you want to see the page. If in addition the functions that you use are not only specific to that page and you want to reuse them as you navigate through your application, in each load you will have to download them again. Instead, having a "static" file with all that code, the browser can cache it and you save the load.

  • Clarity : When we write code, we almost always end up using a pattern of the MVC type (model, view and controller), separating our application in layers. If we focus on our view in web format, we can divide it again into three similar layers:

    • Model: HTML (what it looks like).
    • View: CSS files (how it looks).
    • Driver: Javascript files (how our application behaves).

    • The maintenance of the code is simpler as well since a designer could take care of the CSS as soon as we give him the HTML and the style book of the application while a front-end developer could write the necessary calls to the back-end in a file without having to deal with the back-end code (knowing only the API). Besides, debugging the code is much more comfortable as well.

    I would also avoid things like 

    <tagname onclick=...>

    Always adding the behavior entirely in the js file: 

    $('tagname').click(....);
        
    answered by 20.09.2017 в 18:11
    Doubt about constexpr is there any difference between p and paragraph without this element?