Module Pattern Javascript

WagnerFilho · Janeiro 20, 2020

Não sei se estou aplicando o conceito de javascript modular corretamente, portanto preciso de ajuda!

Eu separei os arquivos js por responsabilidades.

Cada arquivo será encarregado para uma determinada função.

Estou carregando estes arquivos da seguinte forma:

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

observação: Eu não quero ir para o requiresJS. sem que antes eu tenha entendido como realmente funciona o modular pattern

Além disso, eu quero que o retorno do ajax seja atribuído à um objeto global, podemos chama-lo de ObjectApplication para que em qualquer lugar da aplicação eu possa acessa-lo ?

Como posso fazer isto ?

Então tenho alguns arquivos 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.name);

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)
                app = JSON.parse(xhr.responseText);
                console.log(app);
        }
    }
    xhr.send();
};

Entrar

Module Pattern Javascript

Recommended Posts

WagnerFilho 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

PHP+Codeigniter - Adicionar Registro Plano de Contas

Javascript - Passar Parâmetros para uma Função.

PHP - Consulta MySql para prazo de dias

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante