Your DataStore and Truck modules work correctly. You have been able to instantiate a new Truck on the console, supplying it a new DataStore as part of its creation.
Now you are going to create a module that performs these same
steps when the page loads. Create a scripts/main.js file
and add a <script> tag to index.html.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>coffeerun</title>
</head>
<body>
<script src="scripts/datastore.js" charset="utf-8"></script>>
<script src="scripts/truck.js" charset="utf-8"></script>>
<script src="scripts/main.js" charset="utf-8"></script>
</body>
</html>
Save index.html. You are going to add an IIFE to main.js, as you have done with the other modules,
but this time you will not need to export any new properties to
window.App. Set up main.js as shown:
(function (window) {
'use strict';
var App = window.App;
var Truck = App.Truck;
var DataStore = App.DataStore;
})(window);
The job of this module is to receive the window object for use inside the function body. It also retrieves the constructors you defined as part of the window.App namespace.
Technically, you can just write all of your code with the
full names (e.g., App.Truck and App.DataStore),
but your code is more readable when you have shorter names.
Now, just as you did on the console, you will create an instance of Truck, providing it an id and an instance of DataStore.
Call the Truck constructor in main.js, passing it
an id of ncc-1701 and a new instance of
DataStore.
(function (window) {
'use strict';
var App = window.App;
var Truck = App.Truck;
var DataStore = App.DataStore;
var myTruck = new Truck('ncc-1701', new DataStore());
})(window);
This is nearly the same as the code you entered in the
console earlier, but you do not need to prefix Truck
or DataStore with App,
because you created local variables that point to
App.Truck and App.DataStore.
At this point, your application code is nearly complete. However, you still cannot
interact with the instance of Truck. Why not?
The variable is declared inside of a function, the main module.
Functions protect their variables from being accessed by code outside of the function,
including code you write on the console.
So that you can interact with the instance of Truck, export it to the global namespace in main.js.
(function (window) {
'use strict';
var App = window.App;
var Truck = App.Truck;
var DataStore = App.DataStore;
var myTruck = new Truck('ncc-1701', new DataStore());
window.myTruck = myTruck;
})(window);
Save your work and go back to the console. Reload the page manually to make sure that any prior work you did in the console has been cleared out.
Start typing myTruck and you should see that the
console is trying to autocomplete it (Figure 8.30). That means that it found
the myTruck variable that you exported as a
property of the window object.
Call myTruck.createOrder a few times, providing it some test data. You can do this easily by letting the console autocomplete your previous calls to createOrder (Figure 8.31).
Alternatively, enter the following code to confirm that everything functions as expected.
myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'double mocha'});
myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'decaf'});
myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'earl grey'});
myTruck.printOrders();
myTruck.deliverOrder('[email protected]');
myTruck.deliverOrder('[email protected]');
myTruck.printOrders();
After exercising the methods createOrder, printOrders, and deliverOrder, you should see something like Figure 8.32.
Congratulations! You have completed the foundation of
CoffeeRun. It does not have a UI yet, but you
will add that in upcoming chapters. And you will not need to
make changes to the core, because the UI will simply call the
Truck.prototype methods you have already written and
tested.
This is the advantage of the modular approach: You can work on your application in layers, knowing that each new layer is built on working code in the underlying modules.