Where to Save JS from a Website

Asked

Viewed 100 times

0

When I develop a website, I always save it inside a folder called js, and generally the file name is acoes.js. What happens is I call this file on every page. And sometimes, I create a function for a particular page, and when I’m on another, as there is no class nor the id containing this function, gives error in the console.

I always have to check whether it exists or not, that way:

if($('#MINHA_ID').length>0){ MINHA FUNÇÃO});

Me doing this check, that this id is being used or not on this page, no problem.

Is this the right way? or should I make one js separate for each page?

javascript

  • The ideal is to have a js file with generic functions to be used on several pages, thus reusing code. But if you need to create something specific for a page, you can create a function on the page itself.

  • Could provide an example?

3 answers

5


The ideal solution is to have an object with all the functions you need, then you can have it in a single file. The alternative is to have the functions in the global space, but it is good practice not to pollute the global space.

These functions should only be called when necessary, rather than having mixed code running from end to end.

Whenever possible pass everything the function needs as a function parameter, there you will be giving all the ingredients you need without depending on what is in the DOM.

Example, inside your JS file:

var Site = {

    start: function(){
        Site.Cookie = new Hash.Cookie('selections-005', {duration: 365});
    },
    menu: function(li){
        // acões especificas do menu
    },
    uncheck: function(input, force){
        // outro método que gere input[type=checkbox] por exemplo
    },
    check: function(input){
        // outro método que gere input[type=checkbox] por exemplo
    },
    selectAll: function(){
        $('#download tr.check').each(Site.check);
    },
    selectNone: function(){
        $('#download tr.check').each(Site.uncheck);
    }
};

Site.start();

2

I’m pretty sure most of the answers will be based on opinions, and that question can be closed. But...

There’s nothing wrong with making that check if($('#MINHA_ID').length>0){ MINHA FUNÇÃO});... In fact I think that should always be done in content that is not common to all pages, as header and footer.

Fact-based

To greatest advantage to create files js for each page, is that it is not necessary to transmit unnecessary data, ie, you do not need to send a useless code block to the user. On computers this advantage seems even "silly", but on mobile phones where users often have plans with transfer limit that is very valid.

Opinion-based

In the past I used to keep everything in the same file, but today I believe that the best way to organize Javascript files is to have a main file, for example main.js, for all pages and files specific to each page and call them according to the page loaded, for example home.js or contato.js (but sometimes (for laziness) I don’t even create the files, I leave them on the page even: <script>...blá blá blá...</script>). And still have a function-only file, which I call util.js or funcoes.js.

1

In fact this problem you are encountering has been quite discussed,and apparently the official solution to this problem is the use of web Components.

I think in your case it’s worth taking a look at Polymer, and here at stackoverflow also has a question about this.

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.