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.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(); };
ObjectApplication
e outros comMyGlobalObject
.MyGlobalObject
comModule
. O importante para mim, é definir um valor paraObjectApplication
e acessar os seus atributos em qualquer lugar da aplicação.app.js
contem um objeto decladolet ObjectApplication = {};
e no retorno do ajax, eu atribuo valores aoObjectApplication
. Quando eu tento acessar oobjectoApplication.name
por exemplo, simplesmente apareceunidefined
, ou se eu acessar oobjectApplication
somente, me aparece{}
. O que aconteceu com o retorno do ajax ?Module Pattern
, e só preciso entender como acessar os valores de um objeto apos a chamada do ajax