[Homework] Advanced JS - JavaScript Design Patterns - Софтуерен университет

velio84 241 Точки

[Homework] Advanced JS - JavaScript Design Patterns

Здравейте,

мъча се със задачата to-do лист. Ето примерен код

var createNewSection = (function(title) {
    var sectionNode = document.createElement('section');
    sectionNode.style.border = '1px solid black';
    var sectionTitle = document.createElement('h2');
    sectionTitle.innerHTML = title;
    
    return {
        addToDOM: function() {
            document.getElementById('container').appendChild(sectionNode);
        }
    }
}());

въпроса ми е следния:
как мога да изпълня createNewSection отвън и в същото време да му подам title?

Май не обясних много добре какво искам, но не мога по-добре :)

нещо от сорта на

createNewSection('sometitle').addToDOM();

идеята ми е в eventListener-a за бутона, при кликане да взема стойонстта в inputField-a за име на секцията и след това да я подам на createNewSection

edit:

Ето какво успях да сътворя. Нямам абсолютно никаква идея колко е правилно, но горе-долу работи

todo List Demo

Нямам валидация на информацията и хвърляне на exception-и. Ако не ме домързи утре, може и да го дооправя.

edit 2:

сложих и валидация с exceptions -> ако има вече секция със същото име или ако input-а за нова секция/нов item е празен :)

Тагове:

21/03/2015 17:38:10 JavaScript Advanced 23/03/2015 11:46:07

Gleomit 29 Точки

Здравей,

ако правилно съм те разбрал се чудиш как да направиш при клик на "Add Section" бутона да ти изпълнява функцията, коятo си написал. Ако е така - това би трябвало да ти свърши работа:

http://pastebin.com/7XYaw3Nx

21/03/2015 18:30:48 21/03/2015 18:55:31

velio84 241 Точки

точно това исках да направя :)

благодаря за помощта!

21/03/2015 18:56:23

AleksandurSeferinkin 333 Точки

Колега, това, което си направил няма да ти даде очаквания резултат. В случая имаш едно IIFE с параметър, който не си подал никъде. При изпълнение на javascript кода, createNewSection ще бъде обект с метод addToDOM, а не функция, която създава такъв. Резултата от това IIFE би трябвало да бъде функция.

var createNewSection = (function() {
    return function( title ) {
        var sectionNode = document.createElement('section');
        sectionNode.style.border = '1px solid black';
        var sectionTitle = document.createElement('h2');
        sectionTitle.innerHTML = title;
    
        return {
            addToDOM: function() {
                document.getElementById('container').appendChild(sectionNode);
            }
        }
    }
}());

22/03/2015 12:40:38

velio84 241 Точки

Благодаря за насоките. Едва днес виждам кода, който си пуснал, вчера успях да подкарам тая част от задачата със следния код:

http://pastebin.com/zZD29cs6

не е IIFE, а обикновена функция.

Това правилно ли е въобще или не?

В javascript най-големия ми проблем май е, че нещата могат да станат по много начини и нямам никаква идея това, което пиша дали е правилно или е грешно...

22/03/2015 20:15:27

AleksandurSeferinkin 333 Точки

Това също е начин. В случая така е по-добре! Идеята с IIFE е следната: Представи си, че имаш поле, което всички section-и го ползват. Има ли смисъл всеки път като създаваме обект да извикваме document.getElementById("id") или други алтернативи, след като можем да кешираме елемента в променлива, която ще бъде "затворена" в IIFE. Колкото по-малко функции извикваме - толкова по-бърз става кода. Иначе е напълно излишно да правиш IIFE, което просто връща нещо.

22/03/2015 21:51:12

Filkolev 4482 Точки

Мъчих се колкото можах с тая задача. Докарах я колкото да бачка горе-долу ОК (без валидации все още).

Наследяване нямам. Не съм изпълнил и някои от условията в заданието: Item – has content and status (completed or not). All classes should have an addToDOM() function.

Ще съм благодарен някой ако може да ме насочи как да дооправя нещата; днес точно едва ли ще имам желание да го правя, но има време до 24-ти.

Ето кодът към момента: ЛИНК.

22/03/2015 18:14:16

veselinsavov 219 Точки

За "completed or not" закачам евента така:

checkBox.setAttribute('onclick',"swap(this);");

и swap() ми е:

function swap (checkBoxParent) {
if (checkBoxParent.nextSibling.style.backgroundColor == "green") {
checkBoxParent.nextSibling.style.backgroundColor = "white";
} else {
checkBoxParaet.nextSibling.style.backgroundColor = "green";
}
}

nextSibiling взима следващия дом елемент и на P му разменям bgr-то

Code - Може би съм писал големи глупости, но г/д работи добре.. :D

23/03/2015 11:01:00 23/03/2015 11:14:18

AleksandurSeferinkin 333 Точки

Колега, това не е добра практика. Стилизация се прави през css, а не през js. Вместо да променяш style, можеш да променяш класовете, което е по-добрият вариант.

23/03/2015 13:18:48

Filkolev 4482 Точки

Аз просто стилизирах чекнатите, не виждам смисъла да имам и клас освен това. checked така или иначе е свойство, което ми казва дали е маркиран дадения чекбокс, малко излишно ми се струва да правя и клас, който да прави същото.

23/03/2015 13:20:54

Покажи всички коментари

dim4o 288 Точки

Здравейте,

ето и моя TODO List + demo

Има неща, които не са оптимизирани, но общо взето съм гледал да спазя MVC модела. В първия вариант, който направих listener-ите се генерираха динамично чрез други listener-и, но сега съм сложил един да слухти на цялото body и в зависимост къде е клика се извиква подходящия onClick. Предполагам е добра практика listener-ите също да се отделят в модулче.

В началото ми се стори пълна безсмислица да правя някакви модели, да слагам инфо в тях и после да си го вземам (при условие, че не се складират никъде тези данни в момента). Освен това в случая са важни Node обектите от DOM-а, т.е. това са реалните обекти, с които работим. Някак си целия модел ми изглеждаше безмислено структуриран по този начин. Преди няколко дни обаче реших да добавя нови бутони и fade ефекти и си промених мението. Понеже си имах вече псевдо клас бутон заедно с други харабии и нещата станаха просто за нула време.

24/03/2015 11:04:53 24/03/2015 12:52:42