Doubt about standard JS code

Question

Hello, I wanted to understand why this javascript code follows this standardization, I took a project and realized that all js files follow this pattern

var projeto = {
    methods: {
        funcao1: function() {

        },
        funcao2: function() {

        },
        init: function() {
            this.funcao1(), this.funcao2()
        },
        init_ajax: function() {}
    },
    ajax: function() {
        return this.methods.init_ajax()
    },
    mounted: function() {
        return this.methods.init()
    }
};
$(document).ready(function() {
    projeto.mounted()
}), $(document).ajaxStop(function() {
    projeto.ajax()
});

Answer 1

It is difficult to answer precisely because no developer is required to follow established or suggested patterns, and can create his own pattern. This is indeed essential for the growth and development of technologies themselves.

It is thanks to those who refused an earlier standard and created a new one, judging it to be better, that we have the new frameworks and libraries.

What you can deduce or interpret from the code you reported is:

1. A single Javascript object was created to contain all the actions of project (var project = {...)
2. The "methods" property should probably contain all methods, events and actions of the project
3. The "ajax" property is executed whenever an AJAX request is completed. How to release the screen from some lock or "Loading' statement...".
4. The "Mounted" property is the first to be executed when the page is loaded, in this case it is calling only the "init" method".
5. On jQuery startup, it contains only the project startup settings (called.Mounted()project) and the completion of ajax requests (called.ajax project())

Answer 2

Indentation and spacing between brackets usually define the pattern of code structuring.

In development it can be used as a reference to make the code more "clean" and readable by following the same pattern.

Some tools can be incorporated into text editors to help in this search for a standardization, some with more "rigid" and others more "flexible" allowing the user (the programmer) to style the pattern.

This is useful in development, in production the remondado is to use "compression" to decrease the burden on the resource request.

As for the code: it is only a fragment that uses jQuery.

The first call takes place at the event DOMContentLoaded and calls some functions in the object.

Already .ajaxStop() is a function jQuery normally used to fulfill the end of calls AJAX (or trigger any function at the end of these calls)

try {
    var projeto = {
        methods: {
            funcao1: function() {
                console.log('função 001')
            },
            funcao2: function() {
                console.log('função 002')
            },
            init: function() {
                this.funcao1(), this.funcao2()
            },
            init_ajax: function() {}
        },
        ajax: function() {
            return this.methods.init_ajax()
        },
        mounted: function() {
            return this.methods.init()
        }
    };
    $(document).ready(function() {
        projeto.mounted()
    }), $(document).ajaxStop(function() {
        projeto.ajax()
    });
} catch(ex) {
    console.log(ex)
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

Here he created a kind of class, actually an object with functions. So he can centralize what the projeto can make and use anywhere else.

var projeto = {
    methods: {
        funcao1: function() {

        },
        funcao2: function() {

        },
        init: function() {
            this.funcao1(), this.funcao2()
        },
        init_ajax: function() {}
    },
    ajax: function() {
        return this.methods.init_ajax()
    },
    mounted: function() {
        return this.methods.init()
    }
};

That $(document) takes the document itself, which is read by the browser. What it does with the .ready() and ajaxStop() is to pick up the events triggered by Document at the times the document is read and some ajax call is terminated, respectively.

With this, he defined methods that must be performed at these times.

When document is read (page loaded) run projeto.mounted()

$(document).ready(function() {
    projeto.mounted()
})

When ajax loading stops, run projeto.ajax()

$(document).ajaxStop(function() {
    projeto.ajax()
});

Realize that projeto is the variable that has the methods ajax and mounted.

You probably already used something like element.on('click') or element.click() to capture button clicks or something, the process here is the same, however, instead of capturing the click, you are capturando other things. It could be a Hover, a keyup, etc.

I will list some links here that will help in general understanding, your doubt and good and will help a lot people.

1. Working with Javascript events
2. Organizing Your Javascript Code
3. About the Document.ready