Własna biblioteka w JS - prośba o ocenę kodu i dokumentacji

Question

To oczywiście nie jest skończony projekt, tylko coś, co ma jakiś kształt i nadaje się do pokazania i zebrania ocen, rodzaj minimum viable productu. Zaznaczam, że ta biblioteka nie ma być docelowo jakimś cennym biznesowo rozwiązaniem. Moimi celami było stworzenie jakiegoś pet projectu w JS, w którym na co dzień nie pracuję, oraz napisanie zwięzłej i sensownej dokumentacji. Z góry dziękuję za poświęcony czas. 

Github

Answer 1

Github udostępnia taką fajną rzecz jak gitPage. Warto tam pokazać jak działa tam ta biblioteka :).

To mi się nie podoba.

for(let i=1; i<6; i++) slides.push(Tag.img(slidePath+"slide"+i+".png") );

A co jeżeli dodaje zdjęcia dynamiczne? Slides powinen rozpoznawać czy dostaje listę czy obiekt + użależniesz mnie od konkretnego  rozszerzenia.  Proponowałbym

slides.push(sliderPaths);

funckja push (paths) {

let paths = paths;

if (!this.isArray(paths)) {
paths = Array.from(path); // Sprawdz czy obiekt jest iterowalny i zmien go na tablice.
}

this.paths.forEach(path => this.generateImage(path))

}

funkcja generateImage(path) {
 /// Zobacz sobie w MDN Image.
}

Nie wiem czy próbujesz używać natywny Event API czy swoje własne. Jeżeli to drugie, to blokujesz dostęp do niego, zmieniłbym nazwę.

new Event(nextSlideBtn,function(){

Zrobiłbym factorkę.

return "<iframe width='560' height='315' src='https://www.youtube.com/embed/"+src+"' frameborder='0' allow='autoplay; encrypted-media' allowfullscreen></iframe>"

J.w i przerzuciłbym to do eventów typu: changeMarginTop();

  static marginTop(value){
	  return "<div style='margin-top:"+value+"px;'></div>";
  }
  static marginBottom(value){
	  return "<div style='margin-bottom:"+value+"px;'></div>";
}

To już nie lepiej było zrobić plugin ala React :)

 static h1(content,cls="basicElement"){
    return this.makeTag("h1",{cls:cls,content:content});
  }
  
  static h2(content,cls="basicElement"){
    return this.makeTag("h2",{cls:cls,content:content}); 
  }
  
  static h3(content,cls="basicElement"){
    return this.makeTag("h3",{cls:cls,content:content}); 
  }
  
  static h4(content,cls="basicElement"){
    return this.makeTag("h4",{cls:cls,content:content}); 
  }
  
  static h5(content,cls="basicElement"){
    return this.makeTag("h5",{cls:cls,content:content}); 
  }
 
  static h6(content,cls="basicElement"){
    return this.makeTag("h6",{cls:cls,content:content}); 
  }
  
  static p(content,cls="basicElement"){
    return this.makeTag("p",{cls:cls,content:content}); 
  }
  
  static span(content,cls="basicElement"){
    return this.makeTag("span",{cls:cls,content:content}); 
  }
  
  static div(content,cls="basicElement"){
    return this.makeTag("div",{cls:cls,content:content}); 
  }
  
  static button(content,cls="basicElement"){
    return "<button class='"+cls+"'>"+content+"</button>"
  }
  
  static a(content,href,cls="basicLink",target="_blank"){
    return "<a href='"+href+"' target='"+target+"' class='"+cls+"'>"+content+"</a>";
  }
  
  static img(src,cls='basicImage'){
    return "<img src='"+src+"' class='"+cls+"'>";
}

staticki związane z niebezpośrednio Tag, wyniósłbym DOMFactory (konstruje), DOMRender ( a , h1 itd).

Często się powtarza. Zmieniłbym wyniósłbym do metody np: na isIBranchInstanceOf(branch);

if(! (branch instanceof Branch)) throw wrongBranchException(branch);

 

 

Comments

Dzięki, poprawię kod wg sugestii 

Answer 2

Dokumentacja powinna być od razu w README.md :)

Comments

Dzięki za sugestię, wszystko co tutaj doradzą mądrzy ludzie odrazu leci do to-do listy

Answer 3

1. Warto sensowniej nazywać commity niż "no message" ;)
2. Jeśli ma to być jakaś większa biblioteka, to korzystałbym z PR oraz samą bibliotekę tworzyłbym z innymi ludźmi - nowe pomysły
3. Przydałoby się gdzieś wrzucić wersję .min

Comments

Miałem problemy z source tree i ze łzami w oczach już chciałem jakoś upchać zmiany do repo i w końcu iść spać.

---

Polecam obsługę gita z linii poleceń. Source Tree ładnie wygląda, ale bywa kapryśny

---

W sumie racja, source tree co chwila wyrzuca jakieś błędy a command line działa zawsze

---

@Secrus, nie polecam Source Tree, ale cli bywa kapryśne przy merge konflikcie na 30 plików. 

Answer 4

Nie za bardzo zrozumiałem problemy implementacyjne, które ta libka miałaby ułatwiać. Napisałeś kilka metod które doklejają HTMLa w stringu, przez co drzewo DOM przy każdym użyciu musi być przebudowane.

Ale  za chęci, gh i początki es6.

Comments

Chciałem poćwiczyć angielski i napisać coś w JS w którym jestem bardzo słaby :p