Flex 有组件。 HTML 中有什么相似之处？

Question

Flex 中非常方便的一点是，您可以创建一个组件，对其进行编码，为其设置外观，然后您可以根据需要重用它。这意味着代码独立于您生成的每个副本。

我正在尝试使用 html 和 js 来实现这一点（我正在使用 jQuery，但对可能性持开放态度）。

基本上，我创建了一个页面（组件），它有自己的 JS 代码和自己的皮肤。现在，我想复制这个组件，并让每个组件都有自己的代码。

我尝试了两种选择。

1. 将组件作为 iFrame 加载。这样，它会加载两个页面，从而隔离其中的代码。然而，iFrame 很麻烦。它们不能很好地进行拖放操作，并且在调整大小时表现不同。
2. 我尝试使用 PHP 包含这些组件。然而，当我这样做时，我不知道如何隔离代码，因为它们都共享相同的源！换句话说，视觉部分被分割了（有两份），但下面的代码是相同的。

你知道有什么聪明的方法可以做到这一点吗？

如果您需要一个具体的例子，这里有一个简单的例子：

您正在创建一款汽车游戏。只有两辆车。每个玩家都使用相同的键盘并使用不同的键进行演奏。因此，您创建了一个“汽车”组件。每辆车都有相同的行为，但必须独立运行。

构建一个非常容易。但是如何在不重复代码的情况下构建第二个呢？

Answer 1

我可能误解了很多，但你是这样谈论 OOP 的吗：

function Car(){}

Car.prototype = {

    constructor: Car,

    crash: function(){}

};

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

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

我不明白为什么这里需要单独的沙箱？但没有人回答，所以嗯。

Answer 2

我不会创建单独的页面。页面是使用组件的上下文、应用程序。
Javascript 允许您创建类（不要与 CSS 类混淆）。您可以创建每个类的实例。因此，如果您有一个 Car 类，您可以实例化其中两个，并使它们与页面交互。例如：

// 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.
}

现在您可以创建两辆车：

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

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

您还需要捕获钥匙。我不经常这样做，但可能有很多例子。

您可以将控制键作为汽车的属性，这样您就可以创建汽车并指定其钥匙。汽车可以告诉游戏它想要哪些钥匙。游戏可以处理所有输入并将其发送到正确的汽车。

之后，您将必须创建某种循环来添加动画。

//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);

当然，您也可以创建一个类来保存所有这些游戏信息。这样您就不会弄乱窗口对象（所有全局变量和函数实际上都会成为窗口对象的一部分），并且更容易将游戏嵌入到现有站点中。您甚至可以在一个页面上运行两个单独的游戏！尽管他们会为了钥匙而打架。

不管怎样，还有很多空白需要填补，但我希望这能给你一个想法。