Doubt about standardized code JS

0

Hello, I wanted to understand why this javascript code follows this standardization, I got a project and I 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()
});
    
asked by anonymous 06.04.2018 / 16:19

3 answers

1

Here he created a kind of class, actually an object with functions. So he can centralize what projeto can do 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()
    }
};

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

With this, he defined methods that should be executed in those moments.

When the document is read (page loaded) execute projeto.mounted()

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

When the ajax load stops, run projeto.ajax()

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

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

You probably already have 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 of people.

  • Working with JavaScript events
  • Organizing your JavaScript code
  • About document.ready
  • 06.04.2018 / 17:32
    1

    It is difficult to get a precise answer because no developer is obliged to follow established or suggested standards, and can create his own standard. This is in fact essential to the very growth and development of technologies.

    It's thanks to those who have rejected a previous standard and created a new one, thinking it's better, that we have the new frameworks and libraries.

    What you can infer or interpret from the code you entered is:

  • A single JavaScript object has been created to contain all actions of the project (var project = {...)
  • The "methods" property should probably contain all project methods, events, and actions.
  • The "ajax" property is executed whenever an AJAX request is terminated. How to release the screen from some lock or "Loading ..." indication.
  • The "mounted" property is the first to be executed when the page is loaded, in this case it is calling only the "init" method.
  • In jQuery initialization, it contains only the project initialization settings (called project.mounted ()) and the finalization of ajax requests (called project.ajax ())
  • 06.04.2018 / 17:28
    1

    Indentation and bracket spacing typically define the pattern of code structuring.

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

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

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

    As for the code: it's just a snippet that uses jQuery .

    The first call occurs in the DOMContentLoaded event and calls some functions in the object.

    Already .ajaxStop() is a jQuery function normally used to obviate the end of AJAX calls (or trigger some 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>
        
    06.04.2018 / 17:32