Оцените страничку (ООП)
Сделал небольшой плагин, который динамически вычисляет цену товара, в зависимости от количества товаров в корзине
Хотел полностью отделить 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)); |
Цитата:
2. А если я хочу две зажигалки однотипных купить к 23 для подарков ? 3. Некорректный вид извещения: 10 - 19 товаров - 50% 20 - 34 товаров - 60% 35 - 40 товаров - 70% Наверно от 10 до 19 шт.товара - 50% от 20 до 34 шт.товара - 60% от 35 до 40 шт.товара - 70% |
Цитата:
Цитата:
Цитата:
:thanks: |
А как ООП?
Мне именно в этом хочется узнать свои слабые места, чтобы в следующих работах обратить на них внимание! |
Изначально хотел скрипт разбить на три части (три конструктора):
1 конструктор скидки 2 конструктор отображения корзины (появляющееся сообщение при клике на циферку с товарами в корзине) 3 конструктор отображения формы для оформления заказа. Но потом подумал, уж слишком размазано будет и сделал все в одном Как бы вы сделали подобную задачу использую ООП? |
Цитата:
Наверно юзабельнее объединить мини превью зажигалок в пакеты по 6-8 штук, эти пакеты засунуть в горизонтальный слайдер - перемещающийся по наведению вправо-влево - в зависимости от края наведения и останавливающийся по курсору в центре. Клик по минипревью - выдвижение полной картинки с предложением положить в корзину... Выбор должен быть постепенно вовлекающим зрелищем, - заворожить покупателя, а далее - уже дело техники и ООП... |
Цитата:
// Инициализация 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); } }); |
Цитата:
melky, благодарю!) |
Самый простой случай: въюшка свободно работает с тем куском DOM, который ей доверили. Модель ничего не знает не про DOM не о въюшке, имеет геттеры через которые отдает данные, и сеттеры через которые их принимает, пуляясь при этом событиями.
У Вас и модель и въюшка замешаны в одном классе, и Вы то ли DOM у въюшки пытаетесь забрать, то ли модели его впарить. Паттерн программирования "каша"? |
Цитата:
|
Часовой пояс GMT +3, время: 08:49. |