Flex has Components. What is similar in HTML?

Question

Something that is very handy in flex is that you can create a component, code it, skin it and then you can reuse it as you like. This means that the code is independent from each one of the copies that you produce.

I am trying to achieve this using html and js (I'm using jQuery, but open to possibilities).

Basically, I created a page (the component) that has it's own JS code and it's own skin. Now, I want to replicate this component and have each one with it's own code.

I tried two options.

1. Have the components be loaded as an iFrame. This way, it loads two pages, therefore isolating the code within them. However, iFrames are a hassle. They dont work very well with drags and drops and behave differently when it comes to sizing.
2. I have tried to include these components using PHP. However, when I do this, I can't figure out how to isolate the code because they all share the same source! In other words, the visual part is split (there are two copies), but the code underneath is the same.

Do you know of any smart way of doing this?

If you need a concrete example, here goes a simple one:

You are creating a car game. There are only two cars. Each player plays in the same keyboard with different keys. Therefore you create a "car" component". Each car has the same behavior but MUST run independently.

It's quite easy to build one. But how would you do the second one without duplicating the code?

Answer 1

I might be misunderstanding a whole lot but are you talking about OOP like so:

function Car(){}

Car.prototype = {

    constructor: Car,

    crash: function(){}

};

var firstCar = new Car(),
    secondCar = new Car();

firstCar.crash(); //only first car crashes

I don't see why here separate sandboxes are required? But nobody is answering so meh.

Answer 2

I'd not create separate pages. The page is the context, the application, in which the components are used. Javascript allows you to create classes (not to be confused with CSS classes). You can create instances of each class. So if you got a class Car, you can instantiate two of those, and make them interact with the page. For instance:

// Javascript is a prototyped language. A class is defined as a function:
function Car()
{
  // Some initialization of properties by assigning to this.propname
  this.x = 0; this.y = 0;
  this.direction = 0;
  this.velocity = 0;
}

// Add methods by extending the prototype
Car.prototype.show = function()
{
  // For each Car object, create and remember a DOM element. 
  // This is what makes your car visible.
  this.DOMelement = document.createElement('div');

  // Set style properties to position the car.

  // Add sub-elements to make the case visible (images?)
}

Car.prototype.move = function()
{
  // Update this.x and this.y

  // Move/update the related DOM element accordingly.
}

Now you can create two cars:

var Car1 = new Car();
var Car2 = new Car();

Car1.show(); // Show the first.

You will also need to capture keys. I haven't done that often, but there are probably numerous examples.

You can make the control-keys a property of the car, so you can create a car and specify its keys. The car can tell the game which keys it wants. The game can handle all input and send it to the right car.

After that, you will have to create a loop of some sort to add animation.

//Instead of an actual loop, you can create a function to render a single frame
function tick()
{
  // Handle input and redirect it to the appropriate cars

  // Call .move of all the cars
}

// Call the tick function repeatedly every 10 ms. 
setInterval('tick', 10);

Of course you can create a class as well to hold all this game information. That way you don't clutter your window object (all global variables and functions will actually become part of the window object), and it will be easier to embed the game in an existing site. You could run even two separate games in a single page! Although they would fight over the keys.

Anyway, there are lots of gaps to fill, but I hope this gives you an idea.