Cześć,
Pytania, które chcę Wam za moment zadać, pochodząc od osoby (tj. ode mnie :), która z samym JavaScriptem miała do tej pory niewiele do czynienia, a teraz chciałaby poznać js od jej 'najnowszej' strony.
Tak więc, postanowiłem, że przygotuję sobie na początek tabelę na stronie WWW, która będzie interaktywna, tj.dodawanie/usuwanie wierszy, itd.. Z racji tego, że przyzwyczajony jestem do programowania obiektowego, to chciałem wykorzystać najnowszy standard EC6 i za jego pomocą tworzyć klasy i metody w js. Dodatkowo chciałem wykorzystywać bibliotekę jQuery do operowania na elementach DOM.
Nie zwlekając za długo zacząłem kodzić i mimo wszystko, że udało mi się coś działającego napisać, to mam pewien niedosyt i obawy w stosunku do napisanego kodu..
Po pierwsze - gdzieś przeczytałem, że EC6 nie do końca jest wspierane przez przeglądarki i należy to 'przetłumaczyć' do EC5. W tym celu użyłem strony *http:*babeljs.io/repl// (są też programy instalowane przez npm, ale jeszcze nie używałem). W międzyczasie przeczytałem też o TypeScript i prawdopodobnie na to bym się przerzucił.
Po drugie - dość szybko pojawiła się kwestia - jak 'zgrabnie' połączyć jQuery i pisane przeze mnie metody/klasy? Dla osób znających js zapewne było to oczywiste, że pojawi się problem z przesłanianiem operatora this
. Ja byłem na początku trochę zmieszany, ale jak będzie widać w poniższym kodzie, rozwiązałem ten problem przy pomocy jednej z polecanych metod na StackOverflow, ale czy tak to powinno wyglądać? Nie mam pewności.
Ostatecznie kod, który napisałem jest dla mnie trochę 'potworkowaty' - ta konwersja EC6 -> EC5 + wyglądające 'dziwnie' łączenie kodu jQuery z metodami klas javascriptu i dodatkowo ta kombinacja that = this
rodzą we mnie mieszane uczucia..
Cały wątek jest zapytaniem do osób mających większe doświadczenie z js i zmagających się z podobnym problemem, do tego przedstawionego powyżej.
pzdr,
Adam
// poniżej umieściłem fragmenty całego kodu
class MyTable {
constructor(table_cls_name){
this.table_cls_name = table_cls_name;
// używane do numerowania wierszy
this.counter = 0;
}
myself(){
console.log(`table_cls_name: ${this.table_cls_name}!`);
}
addRow_EventListener(button_cls_name){
// initialization
var that = this;
// addRow
// przycisk, którym dodaje się nowe wiersze
$(button_cls_name).on('click',function(){
if (that.counter == 0){
that.counter += 1;
$(that.table_cls_name).show();
}
let data=`<tr class='row-id-${that.counter}'>\
<td><input type='checkbox' class='case'/></td>\
<td><span id='snum'>${that.counter}.</span></td>`;
data +=`<td><div class='input-group date'>\
...</td></tr>`;
$('table').append(data);
that.counter += 1;
$('#validfrom, #validto').datetimepicker({
format: 'YYYY-MM-DD HH:mm:ss',
});
});
}
// zaznaczenie wszystkich wierszy
select_all_EventListener(checkbox_cls_name){
$(checkbox_cls_name).on('click',function(){
$('input[class=case]:checkbox').each(function(){
if($('input[class=check_all]:checkbox:checked').length == 0){
$(this).prop("checked", false);
} else {
$(this).prop("checked", true);
}
});
});
}
// usuwanie pojedynczego wiersza
deleteRow_EventListner(delete_button_cls_name){
var that = this;
$(delete_button_cls_name).on('click', function() {
$('.case:checkbox:checked').parents("tr").remove();
$('.check_all').prop("checked", false);
that.reindex();
});
}
reindex(){
//...
}
}
var t = new PlaylistTable('.mytable');
t.addRow_EventListener('.mybutton');