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.