The next module you will write is the Truck module, which will provide all of the functionality for managing the food truck. It will have methods for creating and delivering orders and for printing a list of pending orders. Figure 8.11 shows how the Truck module will work with the DataStore module.
When a Truck instance is created, it is given a DataStore object. A Truck has methods for working with coffee orders, but it should not need to worry about how to store and manage that information. Instead, the Truck just passes those duties to the DataStore. For example, when you call the Truck’s createOrder method, it calls the DataStore’s add method.
Create the scripts/truck.js file and add a
<script>
tag for it 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> </body> </html>
Save index.html. In truck.js, set up your module with an IIFE and a constructor for the Truck type.
(function (window) { 'use strict'; var App = window.App || {}; function Truck() { } App.Truck = Truck; window.App = App; })(window);
Next, you will add parameters to your constructor so that each instance will have a unique identifier and its own DataStore instance. The identifier is just a name for differentiating one Truck instance from another. The DataStore instance will play a much more important role.
Add the new parameters in truck.js.
(function (window) { 'use strict'; var App = window.App || {}; function Truck(truckId, db) { this.truckId = truckId; this.db = db; } App.Truck = Truck; window.App = App; })(window);
You declared parameters for the truckId
and the
db
, then you assigned each of them as properties to
the newly constructed instance.
The Truck instances will need methods for managing coffee orders, and you will add those next. Order data will include an email address and a drink specification.
The first method to add is createOrder. When this method is called, the
Truck instance will interact with its
db
property through the
DataStore methods you declared earlier.
Specifically, you will call DataStore’s
add method to
store a coffee order, using the email address
associated with the order.
Declare this new prototype method in truck.js.
... function Truck(truckId, db) { this.truckId = truckId; this.db = db; } Truck.prototype.createOrder = function (order) { console.log('Adding order for ' + order.emailAddress); this.db.add(order.emailAddress, order); }; App.Truck = Truck; window.App = App; })(window);
You log a message to the console in
createOrder, then you store the order information
using db
’s add method.
Using the add method was as simple as referring to the Truck’s db instance variable and calling add. You did not need to specify the App.DataStore namespace or mention the DataStore constructor anywhere in this module. Instances of Truck are designed to work with anything that has the same method names as a DataStore. There is no need for Truck to know any details beyond that.
Save your file and test createOrder in the console using the following entries:
var myTruck = new App.Truck('007', new App.DataStore()); myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'decaf'}); myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'double mocha'}); myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'earl grey'}); myTruck.db;
Your results should look like Figure 8.12.
When the console prints the value of myTruck.db
,
you will need to click the
icon so that you can see the nested properties (such as the [email protected]
property inside the data
object).
When an order is delivered, the Truck instance should remove the order from its database.
Add a new deliverOrder
method to the Truck.prototype
object in truck.js.
... Truck.prototype.createOrder = function (order) { console.log('Adding order for ' + data.emailAddress); this.db.add(data.emailAddress, order); }; Truck.prototype.deliverOrder = function (customerId) { console.log('Delivering order for ' + customerId); this.db.remove(customerId); }; App.Truck = Truck; window.App = App; })(window);
You assigned a function expression to
Truck.prototype.deliverOrder. This function
accepts a customerId
argument, which it then
passes to this.db.remove. The value of
customerId
should be the email address
associated with an order.
Just like createOrder, deliverOrder is only interested in calling the remove method of this.db. It does not need any details about how remove actually works.
Save and switch to the console. Create a Truck instance, add a few orders with createOrder, and
then make sure that deliverOrder removes them
from the instance’s db
.
(You can press Return or Shift-Return after each call to createOrder and deliverOrder,
but make sure you press Return after each myTruck.db
entry.)
var myTruck = new App.Truck('007', new App.DataStore()); myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'earl grey'}); myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'decaf'}); myTruck.createOrder({ emailAddress: '[email protected]', coffee: 'double mocha'}); myTruck.db; myTruck.deliverOrder('[email protected]'); myTruck.deliverOrder('[email protected]'); myTruck.db;
As you enter these test commands, you will see that the
order information in myTruck.db
changes
after you call deliverOrder
(Figure 8.13).
Note that the console shows you the state of the
data at the time you click the
icon. If you do not inspect the values in myTruck.db
until
after calling deliverOrder, it will seem as though
the data was never added (Figure 8.14).
18.191.176.5