Оцените страничку (ООП)

[dmitry111]

Сделал небольшой плагин, который динамически вычисляет цену товара, в зависимости от количества товаров в корзине

Хотел полностью отделить DOM от кода, вроде получилось.

Это мое первое ООП, хотелось бы услышать мнения!

Демо: http://demo.hnoe.ru/7.html
Код на github: https://github.com/hnoe/Sale-Plugin


Как работает:
сам скрипт помещается в head, в body создается объект с данными DOM:

(function (window) {
    "use strict";

    var d = window.document,
a = new window.App({

itemsBox         : d.getElementById("items"),      // контейнер с товарами
cartItemsBox     : d.getElementById("cartItems"),  // элемент вывода кол-ва товаров в корзине
cartPriceBox     : d.getElementById("cartPrice"),  // элемент вывода суммы за товары в корзине
discountBox      : d.getElementById("discount"),   // элемент вывода скидки
postButton       : d.getElementById("post"),       // кнопка оформления заказа
switchBox        : d.getElementById("discounts"),  // контейнер с кнопками для переключения скидки
displayCart      : d.getElementById("cartItems"),  // элемент отображающий содержимое корзины

switchArr        : d.getElementById("discounts").getElementsByTagName("button"), // массив кнопок со скидками

modelClass       : "name",  // имя класса элементов с названием модели
oldPriceClass    : "old",   // имя класса элементов со старой ценой
newPriceClass    : "new",   // имя класса элементов с новой ценой
toCartClass      : "to",    // имя класса кнопки "в корзину"
fromCartClass    : "from",  // имя класса кнопки "из корзины"

toCartText       : "положить в корзину", // текст элемента кнопки "в корзину"
fromCartText     : "убрать из корзины",  // текст элемента кнопки "из корзины"

url              : "action.php" // для ajax

}).init();

}(this));

[Deff]

Это мое первое ООП, хотелось бы услышать мнения!

1.По интерфейсу - Нормально - просто и доступно, не хватает динамики, к примеру при нажатии положить, появляется гиф - картинка вверху, cправо с корзинкой в которую что то закидывается.
2. А если я хочу две зажигалки однотипных купить к 23 для подарков ?
3. Некорректный вид извещения:
10 - 19 товаров - 50%
20 - 34 товаров - 60%
35 - 40 товаров - 70%

Наверно
от 10 до 19 шт.товара - 50%
от 20 до 34 шт.товара - 60%
от 35 до 40 шт.товара - 70%

[dmitry111]

1.По интерфейсу - Нормально - просто и доступно, не хватает динамики, к примеру при нажатии положить, появляется гиф - картинка вверху, cправо с корзинкой в которую что то закидывается.

это можно прикрутить, просто возится не хочется.

2. А если я хочу две зажигалки однотипных купить к 23 для подарков ?

там все в единственном экземпляре)

3. Некорректный вид извещения:

поправил

[dmitry111]

А как ООП?

Мне именно в этом хочется узнать свои слабые места, чтобы в следующих работах обратить на них внимание!

[dmitry111]

Изначально хотел скрипт разбить на три части (три конструктора):
1 конструктор скидки
2 конструктор отображения корзины (появляющееся сообщение при клике на циферку с товарами в корзине)
3 конструктор отображения формы для оформления заказа.


Но потом подумал, уж слишком размазано будет и сделал все в одном


Как бы вы сделали подобную задачу использую ООП?

[Deff]

Как бы вы сделали подобную задачу использую ООП?

Сейчас основное внимание заказчика на графическое оформления, поэтому при вёрстке ищется красивая визуальная оболочка, а затем уж OOП
Наверно юзабельнее объединить мини превью зажигалок в пакеты по 6-8 штук, эти пакеты засунуть в горизонтальный слайдер - перемещающийся по наведению вправо-влево - в зависимости от края наведения и останавливающийся по курсору в центре.
Клик по минипревью - выдвижение полной картинки с предложением положить в корзину... Выбор должен быть постепенно вовлекающим зрелищем, - заворожить покупателя, а далее - уже дело техники и ООП...

[melky]

Хотел полностью отделить DOM от кода, вроде получилось.

// Инициализация
	App.prototype.init = function () {
		var self = this;

		this.switchArr[this.activeDisc].className = "active";
		this.updateData(this.switchArr[this.activeDisc].value);

		App.utils.addEvent(this.itemsBox, "mousedown", function (e) {
			self.filterEvent(e);
		}, false);

не получилось, сэр. даже совсем.

сделай класс, который будет оперировать только данными - никаких элементов, и даже классов. никакого намёка на DOM.

DOM замешивай либо в дочернем классе, либо в обработчиков событий.

ООП - это во многом событийное программирование

т.е. не должно быть таких методов :

// Показывает ошибку при заполнении формы
	App.prototype.formValidate.showError = /* DOM SHOW BLA BLA BLA  */

а он должен быть заменен на микшированный EventEmitter (из Node.js ... поищи, довольно удобная штука), или любой другой класс, описывающий паттерн "подписчик".

тогда у тебя будет такая вещь:

// мне пофигу на ошибки в форме.
/* ничего нет! */


// я хочу выводить ошибки алертом, как в суровых 00
myForm.on("inputerror", function (e) {
    if (e instanceof window["Криворукий пользователь"]) {
        alert(e.message);
    }
});

[dmitry111]

Сейчас основное внимание заказчика на графическое оформления, поэтому при вёрстке ищется красивая визуальная оболочка, а затем уж OOП

да нет, я это для себя, с целью получше изучить ООП. Если нужно было бы чтоб все выезжало, была анимация и визуальные фишки я бы наверное использовал jQuery.


melky,

благодарю!)

[Riim]

Самый простой случай: въюшка свободно работает с тем куском DOM, который ей доверили. Модель ничего не знает не про DOM не о въюшке, имеет геттеры через которые отдает данные, и сеттеры через которые их принимает, пуляясь при этом событиями.

У Вас и модель и въюшка замешаны в одном классе, и Вы то ли DOM у въюшки пытаетесь забрать, то ли модели его впарить.

Паттерн программирования "каша"?

[melky]

Паттерн программирования "каша"?

Божественый объект