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();
};
Aucun commentaire:
Enregistrer un commentaire