Module Pattern Javascript

Asked

Viewed 94 times

4

I don’t know if I’m applying the concept of modular javascript correctly, so I need help!

I sorted the files js for responsibilities.

Each file will be assigned to a certain function.

I’m uploading these files as follows:

<html>

  <head>
  </head>

  <body>
    <div id="app-info">
       <span id="app-name">name</span>
    </div>

    <script src="controllers/controllerExample.js"></script>
    <script src="resources/ajaxApp.js"></script>
    <script src="models/modelExample.js"></script>
    <script src="app.js"></script>
  </body>

</html>

observing: I don’t want to go to the requiresJS. without first understanding how the modular pattern

Also, I want the return of ajax to be attributed to a global object, we can call it ObjectApplication so that anywhere in the application I can access it ?

How can I do this ?

So I have some js files.

  • app js.
  • controllers / controllerExample.js
  • models / modelExample.js
  • Resources / ajaxApp.js

app js.

let ObjectApplication = {};
;(function( window, document, undefined ) {
  'use strict';

  function app() {
    var $private = {};
    var $public = {};

    $private.privateVar = 'private var';

    $public.publicMethod = function() {
      return 'Init';
    };

    $private.privateMethod = function() {
      return 'Private method';
    };

    return $public;
  }

  window.Module = window.Module || {};
  window.Module.app = app();
})( window, document );

Module.controllerExample.publicMethod();
console.log(objectApplication.name);

controllerExample.js


;(function( window, document, undefined ) {
  'use strict';

  function controllerExample() {
    var $private = {};
    var $public = {};

    $private.privateVar = 'private var';

    $public.publicMethod = function() {
        return Module.modelExample.publicMethod();
      //return 'Init';
    };

    $private.privateMethod = function() {
      return 'Private method';
    };

    return $public;
  }

  window.Module = window.Module || {};
  window.Module.controllerExample = controllerExample();
})( window, document );

modelExample.js


;(function( window, document, undefined ) {
  'use strict';

  function modelExample() {
    var $private = {};
    var $public = {};

    $private.privateVar = 'private var';

    $public.publicMethod = function() {
        buildAppInfo();
      //return 'Init in Model';
    };

    $private.privateMethod = function() {
      return 'Private method';
    };

    return $public;
  }

  window.Module = window.Module || {};
  window.Module.modelExample = modelExample();
})( window, document );

ajax


let buildAppInfo = () => {
    let url = 'app.json';   
    let xhr = new XMLHttpRequest(); 
    xhr.open('GET', url, true);

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4) {
            if (xhr.status = 200)
                ObjectApplication = JSON.parse(xhr.responseText);
        }
    }
    xhr.send();
};

javascript

  • This code you wrote or are adapting? The name of such a global object is inconsistent, there are passages in which you use ObjectApplication and others with MyGlobalObject.

  • @bfavaretto, Voce can consider the name of MyGlobalObject with Module. The important thing for me is to set a value for ObjectApplication and access its attributes anywhere in the application.

  • I don’t understand the doubt. And you need to use the same name for this global object everywhere that should suffice (but I haven’t analyzed the code details)

  • come to the beginning of app.js contains a declosed object let ObjectApplication = {}; and at ajax return, I assign values to ObjectApplication. When I try to access objectoApplication.name for example, simply appears unidefined, or if I access the objectApplication only, appears to me {}. What happened to ajax return ?

  • @bfavaretto, friend, please! reopens the question, how can I take my doubts if I open a question and this is closed ??? Reread the question and you will see that it makes sense my question. I am talking about Module Pattern, and just need to understand how to access the values of an object after the ajax call

  • It is that your doubt is not at all clear, and the question cannot be reopened until it is clear. Looking at your code, you’re making incoherent use of variable names, that seems to be the problem. The ajax response is being stored in a global variable app that does not exist in the rest of your code...

  • @bfavaretto, sorry about the name question. I’ve adjusted the question. So I think it’s clear enough now!

  • Well, what is becoming clear is that you did not understand the example code. This version of you should now log exactly the return of ajax. The global variable he creates is called Module (or window.Module, gives in anyway). There is no reason why you create another, what this code indicates is that everything that is global should be hanging on window.Module.

  • Using the browser console itself, see the result https://imgur.com/f9Ac6Wg I just don’t understand why using console.log(directly from the app.js file) I get the empty object, but using directly in the browser I can access the attributes of the object normally

  • Ah, you’re talking about the first console.log, not what’s inside the return of the ajax... It is because the ajax operation is asynchronous, and by the time the code tries to log in the result has not yet arrived. When you manually try the result already arrived.

  • Right, and can you tell me how to receive the return of ajax ? I know there is a way not to change the request to synchronous.

  • Look, we’re already stretching out here and it’s not the space for that. I recommend studying one thing at a time. If you are studying the Pattern module, focus on this, without ajax. On this new question, search for asynchrony, callbacks and javascript files.

Show 7 more comments
No answers

Browser other questions tagged javascript

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