JavaScript Шаблоны проектирования (модульные) - PullRequest
Новая
       30

JavaScript Шаблоны проектирования (модульные)

0 голосов
/ 20 января 2020

Я не знаю, правильно ли я применяю концепцию модульного javascript, поэтому мне нужна помощь!

Я разделил файлы js по обязанностям. Каждый файл будет присвоен определенной функции c. Я загружаю эти файлы следующим образом: 

    <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>

Я не хочу go до requiresJS.
без первого понимания, как на самом деле работает modular pattern.

Кроме того, я хочу, чтобы возвращение ajax было присвоено глобальному объекту, можем ли мы назвать его ObjectApplication, чтобы в любом месте приложения я мог получить к нему доступ?

Как я могу сделать это?

Итак, у меня есть js файлы.

  • 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();
};
...