Flex包含組件。 HTML中有什麼相似之處？

在flex中非常方便的是您可以創建組件，對其進行編碼，對其進行蒙皮處理，然後您可以隨意使用它。這意味着代碼與您生成的每個副本都是獨立的。Flex包含組件。 HTML中有什麼相似之處？

我想實現這個使用html和js（我使用jQuery，但對可能性開放）。

基本上，我創建了一個擁有自己的JS代碼和它自己的皮膚的頁面（組件）。現在，我想複製這個組件，並讓它們都有自己的代碼。

我試了兩個選項。

是否將組件作爲iFrame加載。這樣，它會加載兩個頁面，從而隔離它們中的代碼。但是，iFrames是一件麻煩事。它們在拖拽和下落方面效果不佳，而且在上漿時行爲不同。
我試圖用PHP包含這些組件。但是，當我這樣做時，我無法弄清楚如何隔離代碼，因爲它們都共享相同的源代碼！換句話說，視覺部分是分開的（有兩個副本），但下面的代碼是相同的。

你知道這樣做的任何聰明的方式嗎？

如果你需要一個具體的例子，在這裏不用簡單：

您正在創建一個賽車遊戲。只有兩輛車。每個玩家使用不同的鍵在同一個鍵盤上玩。因此，您創建一個「車」組件」，每車有相同的行爲，但必須獨立運行。

這是很容易建立的。但是，你會怎麼做第二個不重複的代碼？

來源

2011-11-07 PCoelho

我可能誤解了一大堆，但你說的是OOP像這樣：

function Car(){} 

Car.prototype = { 

    constructor: Car, 

    crash: function(){} 

}; 

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

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

我不明白爲什麼這裏需要單獨的沙箱但是沒有人接聽所以MEH

來源

2011-11-07 16:49:49 Esailija

我。不創造單獨的頁面。頁面是使用組件的上下文，應用程序。 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);

當然你也可以創建一個類來保存所有這些遊戲信息。這樣你就不會混亂你的窗口對象（所有的全局變量和函數實際上都會成爲窗口對象的一部分），並且將遊戲嵌入到現有站點中會更容易。您甚至可以在單個頁面中運行兩個獨立的遊戲！雖然他們會爭奪鑰匙。

無論如何，還有很多需要填補的空白，但我希望這能給你一個想法。

來源

2011-11-07 16:50:32 GolezTrol

Flex包含組件。 HTML中有什麼相似之處？

回答

相關問題