Module Pattern Javascript
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.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(). }. Discussão (0)
Carregando comentários...