Jak zrobić mniej sprzężonego kodu JavaScript i interfejsu użytkownika związanego z interfejsem użytkownika? [zamknięte] - javascript, jquery

Zwykle jest trochę kodu do zainicjowania komponentu interfejsu użytkownika. Na przykład trzeba skonfigurować interfejs użytkownika document.ready lub bind zdarzenia do interfejsu użytkownika.

Z mojego zrozumienia nie powinniśmy tego przedstawiaćkod w pliku HTML. Ale martwię się, jeśli umieszczę ten kod inicjujący w osobnym pliku js, wydaje się, że nadal jest on mocno sprzężony z plikiem HTML, ponieważ muszę na stałe kodować klasę / identyfikator interfejsu użytkownika, aby go wybrać. Jaka jest typowa praktyka / architektura, aby oddzielić kod JavaScript i interfejs użytkownika związany z interfejsem użytkownika? Dobrze, jeśli możesz podać prosty przykład.

view.js

function init() {
$("#some_view").click(sth);
$("#some_view").text(sth);
}

Odpowiedzi:

Alternatywnie, możesz przekazać identyfikatory elementów HTML do funkcji. Tak jak:

function init(id) {
$(id).click(sth);
$(id).text(sth);
}

W pliku HTML wywołaj funkcję wewnątrz znacznika skryptu jako init („# some_view”);

Chociaż zastanawiałem się nad tym przez czas, który zna tylko bóg, nie wierzę, że może to być prosta odpowiedź. Oto dlaczego

Elementy DOM można przechodzić bez konieczności definiowania id, class, rel or any other attribute, ale może to cię zranić w dziale prędkości i nadal nie można wykluczyć zależności od struktury HTML.

Mający id ma przewagę nad wszelkimi wadami. Wybieranie elementów DOM za pomocą id atrybut jest najszybszym sposobem na złapanie elementu.

Musisz oddzielić plik js od pliku HTML, ponieważ pozwala on na buforowanie w przeglądarce. Nawet z perspektywy dewelopera miło jest mieć rzeczy zorganizowane.

Ale dzięki prostemu, lepszemu i zalecanemu podejściu można zmniejszyć kaskadowe skutki konieczności zmiany atrybutów, takich jak id.

// have selectors defined once and use that object later.
var someView = $("#some_view");

// use someView everywhere (within scope)

someView.click(sth);
someView.text(sth);

Jest to w rzeczywistości szybsze, ponieważ przejście DOM zostało już raz wykonane podczas przypisywania $("#some_view") oponować someView. Następnym razem, gdy go użyjesz, przejście nie będzie konieczne. I nawet jeśli musisz zmienić id od #some_view do #something_else, trzeba będzie to zrobić tylko w jednym miejscu.