- We are going to write modular code (from now on, at least)
- Event-based programming is a good thing
- Global variables should be used only as a last resort
Get The LocationSo, first, what is the problem? Getting the user’s current location! This will happen asynchronously, and the UI element we need to update is in another file. Of course, this is modular code! We know that the API call Titanium.Geolocation.getCurrentPosition uses a callback to let us know when it has found a location. [gist id=”1270873″]
Put it somewhere usefulNow we could create a global variable outside of the callback and use that to get the information. [gist id=”1270894″] but that only helps if the UI element we need to update is in the same JS file as the callback. That’s not possible when writing modular code. Also, we definitely should not have UI code mixed in with the geolocation logic.
Put it somewhere better using an event listenerSo what are we going to do? The first thing is to get rid of the global variable and fire an event to indicate that a location has been successfully received. [gist id=”1270930″] So now, anywhere in the application when we need to get the location information, we can create a listener to get the coordinates delivered in the event payload. This is nice; no globals necessary at all!
But there is another way; use a callback within the callbackLet’s pass in a function to call when the device has finished getting the location. Along with firing the event, we will call the function passed in as a parameter with the coordinates we received from the device. [gist id=”1271028″] Somewhere else in our code we need to get the location and update the UI element with the information. [gist id=”1271056″]
Modules are GOOD! That’s what Kevin said!KitchenSink only exists to demonstrate API functionality, and not to act as a best-practice example. Let’s convert our location file into a module; just add “exports” before the function name to make it public. [gist id=”1271113″] In our ui.js file, where we created the window, we need to load the module containing the currentLocation function. In the complete example, we have named the file “maps.js”, so we need to add the
requirestatement. Remember: don’t include the “.js” extension when using require; it’s not needed.
var maps = require('lib/maps');Then when you call the method it looks like this:
// do the callback to get current location maps.currentLocation(gpsCallback);Here is the complete ui.js file [gist id=”1271130″]