Now, to get the rest of our architecture together we need to open up every other App file in the JavaScript directory we are in (/js/App).
When we have these files open, we need to paste the following template, which is based on the script we've written for App.js:
var App = window.App || {};
App.Module = (function(window, document, $){
'use strict';
var _defaults = {
'name': 'Module'
};
function Module(options) {
this.options = $.extend({}, _defaults, options);
this.$element = $(this.options.element);
}
Module.prototype.getDefaults = function() {
return _defaults;
};
Module.prototype.toString = function() {
return '[ ' + (this.options.name || 'Module') + ' ]';
};
Module.prototype.init = function() {
return this;
};
return Module;
}(window, document, Zepto));When we have each template in, we must then change Module to the appropriate type, that is Video, Audio, Location, and so on.
Once you are done with pasting in the section and changing the names, you should be all set with the basic JavaScript architecture.
One of the last items you will need to take care of is including this basic architecture into each index.html file. In order to do this, you will need to paste the following code at the bottom of the page, right after the inclusion of helper.js:
<script src="js/App/App.js"></script> <script src="js/App/App.Audio.js"></script> <script src="js/App/App.Forms.js"></script> <script src="js/App/App.Location.js"></script> <script src="js/App/App.SinglePage.js"></script> <script src="js/App/App.Touch.js"></script> <script src="js/App/App.Video.js"></script> <script src="js/main.js"></script>
We are basically including each script of the framework. What's important here is to always include App.js first. The reason for this is that App.js creates the App object and directly modifies it. If you include it after all the other scripts, then App.js will overwrite the other scripts because it's directly affecting the App object.
The last item we need to take care of is main.js, which includes the initialization of our application. We do this by wrapping our code in IIFE and then exposing the instance to the window object. We do this with the following code:
(function(window, document) {
'use strict';
var app = new App({
'element': document.querySelector('.site-wrapper')
});
window.app = app;
}(window, document));What we've seen earlier is an IIFE being assigned to an object. Here we don't see that because it's not necessary. We just want to make sure our code would not affect the rest of the code, which in most cases would not happen because of the simplicity of this project. However, as a best practice I try to self contain my code in most cases.
The difference in the previous code is that we see the initialization of our framework here:
var app = new App({
'element': document.querySelector('.site-wrapper')
});We do that by using the new keyword, creating a new instance of App, and then passing it an object, which will be merged into our default options we previously wrote.
Note
querySelector
is a JavaScript method that is attached to the document object. This method accepts a selector that we would normally use in CSS, parse DOM, and find the appropriate element. In this case, we are telling our application to self contain itself to the element with the site-wrapper class.
When we finally initialize our application, we then attach app to the window object:
window.app = app;
This basically makes it accessible anywhere in our application by attaching it to the window object.
We are now done with the framework for our application. Although we don't have anything being manipulated on the page, or have attached any events that correlate with a user's input, we now have a solid foundation for coding that follows best practices, is effective, efficient, and easily accessible.