Flex имеет компоненты.Что похоже в HTML? - PullRequest
Новая
       34

Flex имеет компоненты.Что похоже в HTML?

0 голосов
/ 07 ноября 2011

Что очень удобно в flex - это то, что вы можете создать компонент, закодировать его, создать скин, а затем использовать его по своему усмотрению. Это означает, что код не зависит от каждой из ваших копий.

Я пытаюсь добиться этого с помощью html и js (я использую jQuery, но открыт для возможностей).

По сути, я создал страницу (компонент), которая имеет собственный код JS и собственный скин. Теперь я хочу скопировать этот компонент и иметь каждый со своим собственным кодом.

Я попробовал два варианта.

  1. Загрузите компоненты как iFrame. Таким образом, он загружает две страницы, поэтому изолирует код внутри них. Тем не менее, iFrames являются хлопотами. Они не очень хорошо работают с перетаскиванием и ведут себя по-разному, когда дело доходит до калибровки.
  2. Я попытался включить эти компоненты с помощью PHP. Однако, когда я делаю это, я не могу понять, как изолировать код, потому что все они используют один и тот же источник! Другими словами, визуальная часть разделена (есть две копии), но код внизу тот же.

Знаете ли вы какой-нибудь умный способ сделать это?

Если вам нужен конкретный пример, приведем простой пример:

Вы создаете автомобильную игру. Есть только две машины. Каждый игрок играет на одной клавиатуре с разными клавишами. Поэтому вы создаете компонент "автомобиль" ". Каждый автомобиль имеет одинаковое поведение, но ДОЛЖЕН работать независимо.

Его довольно легко построить. Но как бы вы сделали второй без дублирования кода?

Ответы [ 2 ]

0 голосов
/ 07 ноября 2011

Я бы не создавал отдельные страницы.Страница - это контекст, приложение, в котором используются компоненты.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);

Конечно, вы также можете создать класс для хранения всей этой игровой информации.Таким образом, вы не загромождаете свой оконный объект (все глобальные переменные и функции фактически станут частью оконного объекта), и вам будет легче встроить игру в существующий сайт.Вы можете запустить даже две отдельные игры на одной странице!Хотя они будут бороться за ключи.

В любом случае, есть много пробелов, которые нужно заполнить, но я надеюсь, что это дает вам представление.

0 голосов
/ 07 ноября 2011

Я, возможно, много недопонимаю, но вы говорите об ООП, например, так: 

function Car(){}

Car.prototype = {

    constructor: Car,

    crash: function(){}

};

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

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

Не понимаю, зачем здесь нужны отдельные песочницы? Но никто так не отвечает.

...