Составные элементы Javascript

#javascript #jquery #dom

Вопрос:

У меня есть эта страница, на которой я провожу некоторые тесты на Javascript и jQuery: тесты JS

У меня есть несколько вопросов о том, как создавать, не уверен, что это правильный термин, но составные элементы управления с помощью Javascript. В чем-то вроде Flash вы должны создать класс Object, иметь геттеры и сеттеры, рисовать свои изображения и т. Д. В JS это, похоже, совсем другой мыслительный процесс. Мой главный вопрос заключается в том, как вы создаете несколько элементов с геттерами и сеттерами для визуализации, фильтрации и взаимодействия с ними в Javascript?

Основной код, касающийся этого примера, находится с:

 var html = (function(){
    // var FRAG = $(document.createDocumentFragment());
    htmlBox = $(document.createElement("div"));
    var eTitle = $(document.createElement("h4"));
    var ePrice = $(document.createElement("p"));

    // set class first
    htmlBox.addClass("box")
    htmlBox.css({
        backgroundColor : color
    })

    // set text values
    eTitle.text(title);
    ePrice.text("$"   price);

    htmlBox.append(eTitle)
    htmlBox.append(ePrice)

    return htmlBox;
})();

… внутри класса Box(). Если бы кто-нибудь мог взглянуть на исходный код и сообщить мне, что не совсем правильно, это было бы здорово.

Редактировать

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

http://geerswitch.in/tests/obj/

Что касается узлов, создающих jQuery, встроенная версия JS отлично подходит для этого, и некоторые исследования в Google показывают, что способ, не связанный с jquery, в любом случае быстрее в большинстве случаев (и выглядит хуже, imo)

1. Для этого вы можете предпочесть шаблонизаторы на стороне клиента (jQuery великолепен), поскольку это кажется гораздо более подходящим. Ваш фрагмент документа — хорошая идея, хотя jQuery IIRC в любом случае делает это за вас в составных операторах, поэтому нет необходимости выполнять всю тяжелую работу — большого выигрыша не будет, а ваш код намного длиннее.

Ответ №1:

Вы делаете это почти правильно. Вы создали Box класс для представления вашего элемента пользовательского интерфейса более высокого порядка, вы создаете его экземпляр для каждого элемента, а ваша основная программа управляет элементами через свой интерфейс. Единственное, чего вам не хватает, это разделение между общедоступным интерфейсом и частной реализацией. Ничто не мешает мне делать myBox.price = 10 это прямо сейчас, хотя Box интерфейс четко подразумевает, что price это должно быть установлено при построении и никогда не изменяться.

JavaScript не имеет модификаторов видимости, таких как «private» и «public», но вы можете создать тот же эффект самостоятельно. Подробности см. в объяснении Дугласа Крокфорда. Крокфорд — самоуверенный гений, когда дело доходит до JavaScript, и он является мозгом JSLint и JSON.