[JS] Домашно Advanced-Functions - 1 задача


15
Create a module for working to work with DOM. The module should have the following functionality
  • Add element to parent element by given selector
  • Remove element from the DOM  by given selector
  • Attach event to given selector by given event type and event hander
  • Add elements to buffer, which appends them to the DOM when their for some selector count becomes 100
  • The buffer contains elements for each selector it gets
  • Get elements by CSS selector
  • The module should reveal only the methods

Demo

Source

За буфер на елементи ползвам DocumentFragment, а за селектиране на елементи - стандартните querySelector и querySelectorAll.




Отговори



0

Колеги,

Мислите ли, че тази точка:

­Get elements by CSS selector

е функционалност която модула трябва да има, или просто инструкция как да взимаме определени елементи от document? Гледам, че някои от вас са направили функция, която просто вика querySelector.

Поздрави!


от vphilipov (3591 точки)


0
Ами аз го разбрах като упътване към условието. Тоест да не хардкоднем селекторите да са само по id и тн. Не виждам смисъл да се изнася като привилегирован метод, тъй като реално не дава никаква различна функционалност от тази на querySelector-ите. Нека видим и колегите какво ще кажат, че и аз се заинтересувах :)

от nikolaikolarov (2177 точки)

0
И аз не виждам смисъл и си мисля, че структурата на условието ни подвежда да мислим, че модула ни трябва да има такъв метод.

от vphilipov (3591 точки)



2

Ето го и моят вариант на задачата : source 
Тук-там има някакви хитринки :)

За добавянето на елементи с буфер на асоциативния масив fragmentBuffer[parentSelector] - му залепяме едно пропърти length : 0 и всеки път като добавяме елемент го увеличаваме с едно, защото с .childNodes е по-бавно.

Обикновеното добавяне на елемент го правя само с parentSelector и element (защото видях, че повечето хора са написали с (parentSelector, tagName, attributes, innerHTML). Предполага се, че добавяме вече готов елемент.

Освен това и аз ползвам Module Design Pattern.

Очавкам забележки, препоръки или каквото ви е на сърце!

Поздрави :)


от Subo_Rusev (1389 точки)


0

Моето решение: source

буфера ми представлява масив от обекти със селектор и елемента, който трябва да се добави към този селектор, след като стане 100 за всичките се извиква appendChild(element, selector). Така ми се струва, че има някакъв смисъл, тъй като от условието нищо не разбрах.


от Rokata (397 точки)


0
Аз мисля, че трябва да ги брои отделно за всеки селектор. А доколкото разбирам твоя код - ти ги броиш всички общо.

от marieta (210 точки)


2

Едно решение от мен. Постарал съм се нещата да са максимално опростени. 

source

demo

Използвам querySelector и querySelectorAll за селекция.

Пазя елементите в масив и ги добавям в ДОМ дървото, когато станат повече от 100.


от krasi.nikolov (1412 точки)


1

Здравейте,

Това е моето решение.

За селекторите използвам querySelector и querySelectorAll.

За реализацията на функциите използвам вградените appendChild, removeChild и addEventListener.

За буфера доста се чудих, но реших да го направя обикновен и да е общ за всички елементи. Бутам ги в един масив и като стигна максимума ги закачам. Другата опция беше в един обект за всеки родител да пазя child nodе-овете, които трябва да добавям.

Ще се радвам на всякакви критики и/или препоръки.

Поздрави!


от nikolaikolarov (2177 точки)


0

Здравейте, това е моето решение.

създавам var domModule, които съдържа пет функции appendChild,

removeChild, addHandler, appendToBuffer и getElement.

Използвам document.querySelectorAll за намиране на

елементите по определен селектор. За прикачането на

ивент използвам cоllection[count]['on' + ev] = func;.

За буфер използвам фрагмент, към които прикачам елемента

и броя колко пъти се повтаря. Ако са 100 ги

апендвам към document.body и изтривам от буфера.

Васко


от vkv.1986 (250 точки)


1

Решение

Като добавям елемент търся родителския елемент чрез querySelector. После мy append-вам елемента. При премахването намирам елемента от който трябва да премахна пак чрез querySelector. За event-и взимам списък със всички елементи (querySelectAll) и чрез addEventListener добавям event-a. За буфера използвам асоциативен масив в следния формат HTMLElement : [HTMLElementToAdd,HTMLElementToAdd...] като при всяко добавяне проверявам дали масива не е достигнал 100 елемента. Ако е достигнал си правя фрагмент в който добавям всички елементи и после го append-вам към самия HTMLElement. Накрая правя стойността му да е отново празен масив ([]). CSS селектора е отново чрез querySelectorAll.


от dzhenko (3893 точки)