HTML and CSS Reference
In-Depth Information
following example shows the most basic method for creating an application-
level namespace for your objects.
var app = app || {};
app.world = function(_name){
var name = _name;
this.greet = function(guest){
alert('Hello ' + guest + ' my name is ' + name);
}
}
This allows you to create classes that belong to your application in separate
files. The first line on the preceding code sample declares the variable
app
in the
global namespace, and assigns the
app
global variable to it if it already exists. If
it doesn't exist, it creates an empty object for you to begin populating with your
objects. This can be handy if you organize your objects in such a way that they
are held in separate files during development, and then merged for production.
You can even go further and namespace your objects based on functionality.
These are the basics of object-oriented JavaScript, which modern mobile
browsers support.
You code in this manner (instead of, for instance, creating jQuery plugins)
because it separates your application code from vendor-specific code and
reduces the reliance on a third-party code. You can go further than this and
follow the model view controller (MVC) pattern to separate your user interaction
from your domain logic (real-world objects) and the resulting view that is
presented to the user.
Along with design patterns and object orientation, JavaScript is an event-driven
language. This means that an event triggered in one part of your application can
trigger a piece of code in a completely different part of your application at
runtime.
In its simplest form, events can be triggered by user interaction. In mobile, this is
commonly seen as touch events where a user interacts with your application
through the browser using their fingers. The browser registers the event and
then passes the event and its information, such as the element that the event
originated from, to any subscribers in your application. For the desktop
environment, these are known as mouse events.
