[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

domModule.appendChild(div,"#wrapper");

Аз го разбирам да добавя child елемент с id="wrapper" към div-а (parent),, ама какъв вид child елемент точно не се знае.

Как го разбирате вие?

edit: И това - >  domModule.removeChild("ul","li:first"); 
"li:first" не трябва ли да е "li:first-child"?




0
Селектора указва родителя, а подадения елемент е детето.

от dsbonev (1234 точки)

0
Значи за да ми стане примера трябва да си създам един елемент с id="wrapper". А какво ще кажеш за edit-a, който направих към поста си?




7
Тази задача доста неща не ми са ясни какво се иска. За съжаление да разбера условието ще трябва да прегледам повече решения и тогава като знам какво се иска да си я напиша.

от borisfrenkev (165 точки)


0
при много от нас е същото, така че не се плаши :)

от Dimov (907 точки)


9

Ето още един вариант. Ползвал съм демото на Дончо "17.modules.js".

За буфер също ползвам асоциативен масив от document fragment обекти, като ключовете са съответните селектори. removeElement трие само първия срещнат елемент, защото работи с querySelector().


от vic.alexiev (2299 точки)


0
Не е ли по-добре removeElement и добавняето на event да става с querySelectorAll? Например ако искаме да сложим event на всички линкове, или да махнем последните булети от всички списъци?

от v.staykov (212 точки)

0
Да, може би трябва да има remove и removeAll, за да се знае кога какво се трие.

от vic.alexiev (2299 точки)


2
Ако имате някакви материали.. по тези задачки може ли да ги споделите, че в лекцията има един слайд.. от който почти нищо не се разбира, домашните са всичките за това.. :)

от boncho.vylkov (1923 точки)


0

function eventAttach(selector, eventType, eventHandler) {
document.querySelector(selector).addEventListener(eventType, eventHandler, false);
}
        eventAttach("p", 'click', "alert('á')");

На реда в функцията ми дава:

TypeError: Value not an object.

Защо :) ?

 


от webmatrix (825 точки)


0
eventHandler трябва да е функция вместо низ:
eventAttach("p", 'click', function () { alert('handler function executed'); })

от dsbonev (1234 точки)

0
:) благодаря

от webmatrix (825 точки)


0
Също бих попитал, щом не мен не ми е ясно може и на други да не е:
Какво ще рече :
1.Create a module for working to work with DOM. ?
2. 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
3. The module should reveal only the methods

от webmatrix (825 точки)


0
Аз го разбирам така:
1. Да има публично АПИ, но също и лично АПИ и/или състояние. В случая публичното АПИ са функции, които имплементират изисканите в условието характеристики на модула, а личното състояние - буферите, които са невидими извън модула.
2. Буфера е временен склад за елементи, които като напълнят склада, ще бъдат добавени като деца на конкретен селектор. Склада се празни, ако броя на бъдещите деца стигне 100. За всеки селектор се пази по един склад. Затова в моя пример добавям в складове на два селектора, за да покажа, че всеки селектор си пълни собствения склад, а не споделят общ.
3. Това го коментирах в първа точка, но да повторя - най-малкото буферите трябва да бъдат скрити за света извън модула.

от dsbonev (1234 точки)

0
Буфера да не е нещо като променлива в която записваме 100 елемента с цикъл и след като станат 100 спираме цикъла, добавяме елементите на някой селектор и зануляваме променливата която ги е пазила.
За всеки селектор се пази по един склад. Какво ще рече ?

от webmatrix (825 точки)



0

Предварително се извинявам за глупавия въпрос, но защо така ми дава "TypeError: parent is null" ?



var domModule = (function() {
function appendNewChild(tag, selector) {
var newChild = document.createElement(tag);
var parent = document.querySelector(selector);
parent.appendChild(newChild);
    }
    return {
    appendNewChild : appendNewChild,
    }
})();
// appendChild test
domModule.appendNewChild("div", "body");
domModule.appendNewChild("ul", "body div");
domModule.appendNewChild("li", "body div ul");
domModule.appendNewChild("li", "body div ul");
domModule.appendNewChild("li", "body div ul");

от Ilian Iliev (0 точки)


0
Работи под IE10, FF, Chrome.

от dsbonev (1234 точки)

0
моя грешха - бях сложил script тага в head..

от Ilian Iliev (0 точки)



1

Благодаря много за помоща от Dimitur Banev :)

ето и моето решение:

Sorce

Demo

Поздрави!


от webmatrix (825 точки)


3

Ето го и моето решение.

appendChild

Избирам parent елмента с querySelectorAll и append-вам към него подаденият елемент.

removeChild

Направил съм го, така че да премахва целият parent, ако няма подаден някакъв child селектор.

addHandler

Взимам всички елементи отговарящи на селектора и с един цикъл им закачам event-а.

appendToBuffer

Аз съм го имплементирал с масив от обекти, всеки от които си има селектор и елементи.

getElements

Връща всички елементи отговарящи на подаденият селектор.

 


от iliyan.tanev (517 точки)


2

Тази задачка ме поизпоти.
Решение.
Демо.
Използвам Module Design Pattern като видими са ми само желаниете функции за работа с DOM.
Създавам си помощни методи съответно за вземане на елементи от DOM по зададения селектор с querySelector и querySelectorAll.
Правя проверка дали addEventListener съществува, ако ли не използвам attachEvent метода.
За буфера използвам масив от DocumentFragment по селектори.
Сложих още една функция, която да се изпълнява накрая на JS файла и да добавя към DOM дървото, ако са останали недобавени елементи.


от AsenVal (3487 точки)


0
Може да коригираш АppendAllBufferElemends на АppendAllBufferElements*

от Dimov (907 точки)