0

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

I separated the js files by responsibilities. Each file will be assigned to a specific function. I am 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>

I don't want to go to requiresJS.
without first understanding how the modular pattern really works.

Also, I want the return of ajax to be assigned to a global object, can we 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.MyGlobalObject = window.MyGlobalObject || {};
  window.MyGlobalObject.app = app();
})( window, document );

MyGlobalObject.controllerExample.publicMethod();
console.log(objectApplication);

controllerExample.js

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

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

    $private.privateVar = 'private var';

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

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

    return $public;
  }

  window.MyGlobalObject = window.MyGlobalObject || {};
  window.MyGlobalObject.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.MyGlobalObject = window.MyGlobalObject || {};
  window.MyGlobalObject.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);
            console.log(objectApplication);
        }
    }
    xhr.send();
};
The100
  • 66
  • 7
  • What is the problem with this code? What do you not understand and (also) what *do* you understand? What do you need help with? – VLAZ Jan 20 '20 at 14:35
  • See that in the ajax return I assign a response to the object `ObjectApplication`. But if I use console.log (objectApplication); in the app.js file, it returns an empty object – The100 Jan 20 '20 at 14:40
  • That has nothing to do with the module pattern [it's async behaviour](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call). – VLAZ Jan 20 '20 at 14:43
  • As I use IIFE in app.js, I immediately assign the return of ajax to objectApplication, my idea is to access this object anywhere in the application. example: console.log (ObjectApplication.name); It's possible ? – The100 Jan 20 '20 at 14:45
  • Also relevant: [Why is my variable unaltered after I modify it inside of a function? - Asynchronous code reference](https://stackoverflow.com/questions/23667086/why-is-my-variable-unaltered-after-i-modify-it-inside-of-a-function-asynchron) – VLAZ Jan 20 '20 at 14:45
  • Doesn't matter that it's an IIFE, the AJAX response comes in *later than the current execution*. So you can only work with the result *once complete*. In the mean time (when you execute `console.log` in app.js) you still don't have the AJAX response. – VLAZ Jan 20 '20 at 14:46
  • right, in the examples you mentioned, I still haven't been able to assimilate my code, can you help me more clearly based on my code? – The100 Jan 20 '20 at 14:50

0 Answers0