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

【问题标题】：Flex has Components. What is similar in HTML?Flex 有组件。 HTML中有什么相似之处？
【发布时间】：2011-12-23 18:44:13
【问题描述】：

在 flex 中非常方便的一点是，您可以创建一个组件、对其进行编码、对其进行外观设计，然后您可以随意重用它。这意味着代码独立于您生成的每个副本。

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

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

我尝试了两种选择。

将组件作为 iFrame 加载。这样，它会加载两个页面，从而隔离其中的代码。但是，iFrame 很麻烦。它们在拖放时效果不佳，并且在调整大小时表现不同。
我已尝试使用 PHP 包含这些组件。但是，当我这样做时，我不知道如何隔离代码，因为它们都共享相同的源！也就是说，视觉部分是拆分的（有两份），但下面的代码是一样的。

你知道有什么聪明的方法吗？

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

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

构建一个非常容易。但是如果不复制代码，你将如何做第二个呢？

【问题讨论】：

标签： jquery html components web code-separation

【解决方案1】：

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

function Car(){}

Car.prototype = {

    constructor: Car,

    crash: function(){}

};

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

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

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

【讨论】：

【解决方案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);

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

无论如何，有很多空白要填补，但我希望这能给你一个想法。

【讨论】：