1

Тема: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

В мене трохи може дивне питання. Я займаюсь кодингом вже рік та 4 місяці фулл-стак. Але в моєму фул стак переважно бек-енд на С#. C# Я вважаю най зручнішою мовою і після нього починати кодити на JS якійсь дикий треш хоча мови схожі в багатьох момента. Ще треба зауважити, що є чітке розуміння для чого С# а для чого JavaScript. Так от де з'являється проблема в JS, так це коли реально не розумієшь як його використовувати, а головне використовувати правильно та по назначенню. В ітозі мій код на фронті це лютий костиль в перемішку з JQuery. Хочу просто навести приклад свого коду де я роблю для себе блог. JavaScript я наче розумію але просто не можу зрозуміти як правильно його використовувати. Тільки не ржіть з мене. Реально буває така проблема думаю не тільки в мене) Задача на сторінці блога: Отримати з апі json-об'єкт та вивести все в окремий пост з зображеннями та ще і карусель нестандартну зробити і мені по факту це вдалося. Але код  базується майже весь на функції .append де я тупо руками прописую пів сторінки що треба вставити. Я так розумію що це не правильно і використовувати JS потрібно більш адекватно. Ось частина коду.

Як я починаю розуміти, більш правильно буде коли я буду створювати по частинах кожен блок та чистим кодом присвоювати туди класи та інші теги а не прописувати це в ручну в лапках через функцію append? Шось накшталт такого?

var d=document.createElement('div');
d.classList.add("myclass, col-md-4")
і погнав так весь блог? Так як на мене зручніше потім з данними сторінки манепулювати?



Мій код

<script>
    function getData(data) {
        var allimg = [];
        var url = "/api/Blog"
        $.getJSON(url, function (data) {
            var obj = $.parseJSON(data);
            for (var i = 0; i < obj.length; i++) {
                $("#idfirst").after('<div id="post' + i + '"class="post">' +
                    '<div id = "posthead' + i + '" class= "posthead"></div>' +
                    '<div id="postbody' + i + '" class="postbody"></div>' +

                    '<div style="width:100%; height:220px;" id="carouselExampleIndicators' + i + '"class="carousel slide"  
                     data-ride="carousel' + i + '">' +
                    '<ol id="indicators' + i + '" class="carousel-indicators">' +

                    '</ol >' +
                    '<div style="margin-top:30px;" id="carouselImg' + i + '"class="carousel-inner">' +

                    '</div>' +


                    '</div>' +
                    '</div></div>');

                $("#posthead" + i).append($('<p>').text(obj[i].Headline));
                $("#postbody" + i).append($('<p>').text(obj[i].BodyText));

                if (obj[i].Img64.length > 0) {
                    var count = 0;
                    var countIndic = 0;




                    if (obj[i].Img64.length > 3) {
                        $("#carouselImg" + i).after('<a class="carousel-control-prev" href="#carouselExampleIndicators' + i 
                        + '" role="button" data-slide="prev">' +
               '<span style="background-color:darkgrey" class="carousel-control-prev-icon" aria-hidden="true"</span>'+
                            '<span class="sr-only">Previous</span>' +
                            '</a>' +
      '<a class="carousel-control-next" href="#carouselExampleIndicators' + i + '" role="button" data-slide="next">' +
                            '<span style="background-color:darkgrey" class="carousel-control-next-icon" aria-hidden="true"></span>' +
                            '<span style="background-color:darkgrey" class="sr-only">Next</span>' +
                            '</a>');


                        var x = obj[i].Img64.length / 3 >> 0;
                        var countMain = 0;
                        var countAll = 1;
                        for (var u = 0; u < 3; u++) {
                            if (countAll != 1) {
                                countAll = countAll + 1;
                            }
                            if (countMain > 1) {
                                $("#carouselImg" + i).append('<div name="' + i +'" id="carouselRow' + i + u + '" 
                               class="carousel-item"></div>')
                                $("#carouselRow" + i + u).append('<img id="' + i +'" name="imgPost" class="w-100 
                                   myImgClass col-md-4" src=' + obj[i].Img64[countMain] + ' alt="">');
                                countMain = countMain + 3;
                            }
                            else {
                                $("#carouselImg" + i).append('<div name="'+i+'" id="carouselRow' + i + u + '" 
                              class="carousel-item active"></div>')
                                $("#carouselRow" + i + u).append('<img id="' + i +'" name="imgPost" class="w-100 
                               myImgClass col-md-4" src=' + obj[i].Img64[countMain] + ' alt="">');
                                countMain = countMain + 3;
                            }

                            for (var t = 1; t < 3; t++) {
                                if (obj[i].Img64[countAll] != undefined) {
                                    $("#carouselRow" + i + u).append('<img id="' + i +'" name="imgPost" class="w-100 
                                    myImgClass col-md-4" src=' + obj[i].Img64[countAll] + ' alt="">');
                                    countAll = countAll + 1;
                                }
                            }
                        }
                    }
                    else {
                        var countX = 0;
                        for (var y = 0; y < obj[i].Img64.length; y++) {
                            if (countX == 0) {
                                $("#carouselImg" + i).append('<div name="' + i +'" id="carouselRow' + i + '" class="carousel- 
                                item row col-md-12 active"></div>')
                                $("#carouselRow" + i).append('<img id="' + i +'" name="imgPost" class="w-100 myImgClass c 
                                 сol-md-4" src=' + obj[i].Img64[y] + ' alt="">');
                                countX = countX + 1;
                            }
                            else {
                                $("#carouselRow" + i).append('<img id="'+i+'" name="imgPost" class="w-100 myImgClass col- 
                              md-4" src=' + obj[i].Img64[y] + ' alt="">');
                            }
                        }
                    }
                }

                allimg[allimg.length] = document.getElementById('carouselImg' + i).getElementsByTagName("img");
                takeModal(allimg);
            }
        });
    }


    $(document).ready(function () {
        getData();
    })

2

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

Як на мене, особливої різниці немає. Браузери давно оптимізують це все по самі помідори, тому питання лише в читаності коду - а при додаванні фрагменту HTML все ж таки більш читаний саме HTML; але якщо вам приємніше додавати елементи через DOM - будь ласка.
А от що мені видається геть неправильним, то це десяток id з номерами.  id має бути унікальним на сторінці, тому не варто смітити ними. Використовуйте складні селектори та nth-child, тобто не $("#carouselImg" + i), а на кшталт $("#my-carousel-id div.carousel img:nth-child("+i+")"), якщо вже так треба.

Подякували: leofun011

3

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

koala написав:

Як на мене, особливої різниці немає. Браузери давно оптимізують це все по самі помідори, тому питання лише в читаності коду - а при додаванні фрагменту HTML все ж таки більш читаний саме HTML; але якщо вам приємніше додавати елементи через DOM - будь ласка.
А от що мені видається геть неправильним, то це десяток id з номерами.  id має бути унікальним на сторінці, тому не варто смітити ними. Використовуйте складні селектори та nth-child, тобто не $("#carouselImg" + i), а на кшталт $("#my-carousel-id div.carousel img:nth-child("+i+")"), якщо вже так треба.


Що дає ця конструкція $("#my-carousel-id div.carousel img:nth-child("+i+")")?

4

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

https://www.w3schools.com/jquery/jquery … ectors.asp

Подякували: leofun011

5

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

дякую

6

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

FX_Sektor написав:

... після C# починати кодити на JS якійсь дикий треш ...

Всі через це проходять.

FX_Sektor написав:

Як я починаю розуміти, більш правильно буде коли я буду створювати по частинах кожен блок та чистим кодом присвоювати туди класи та інші теги а не прописувати це в ручну в лапках через функцію append?

Правильно.

FX_Sektor написав:

var d=document.createElement('div');
d.classList.add("myclass, col-md-4")
і погнав так весь блог?

Тільки не додавайте зайвих атрибутів. І завжди пам'ятайте, що не у всіх користувачів буде включений JavaScript.

koala написав:

Браузери давно оптимізують це все по самі помідори ...

Ви трохи переоцінюєте можливості браузерів по оптимізації.

koala написав:

але якщо вам приємніше додавати елементи через DOM - будь ласка.

Додавати елементи варто тільки через DOM. Інакше FX_Sektor зіткнеться з проблемами в XHTML (як і я колись).

7

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

XHTML - то те нещастя, позашлюбний син HTML та XML, що його 15 років тому закинули, бо нікому не було потрібне?

8

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

а мені після c# сподобалось кодити на js, тільки не відразу.
Ніяких тобі заморочок з типами та сигнатурами функцій. Прийшло щось в голову? Відразу фігачиш, не роздумуючи про всілякі наслідування з класами

Подякували: DOP1

9

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

FakiNyan написав:

а мені після c# сподобалось кодити на js, тільки не відразу.
Ніяких тобі заморочок з типами та сигнатурами функцій. Прийшло щось в голову? Відразу фігачиш, не роздумуючи про всілякі наслідування з класами

Так, згоден. Саме це мені більш подобається :)

10

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

leofun01 написав:

Тільки не додавайте зайвих атрибутів. І завжди пам'ятайте, що не у всіх користувачів буде включений JavaScript.

Чому багато атрибутів погано?

11

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

FX_Sektor написав:
leofun01 написав:

Тільки не додавайте зайвих атрибутів.

Чому багато атрибутів погано?

Багато атрибутів це нормально, але тільки тоді, коли всі вони використовуються і у всіх них реально є потреба.
В вашому коді я побачив багато атрибутів style, id, name, їх можна прибрати.

koala написав:

А от що мені видається геть неправильним, то це десяток id з номерами.  id має бути унікальним на сторінці, тому не варто смітити ними. Використовуйте складні селектори та nth-child, тобто не $("#carouselImg" + i), а на кшталт $("#my-carousel-id div.carousel img:nth-child("+i+")"), якщо вже так треба.

FX_Sektor, прислухайтесь до цих порад.

12

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

koala написав:

XHTML - то те нещастя, позашлюбний син HTML та XML, що його 15 років тому закинули, бо нікому не було потрібне?

XHTML - це продукт інцесту HTML та XML. Багато розробників обходять його стороною як прокаженого, тому не розуміють його переваг.

  • строгість (всі теги мають бути закриті - <br/>, <hr/>, <meta ... />).

  • XML сумістність (XML парсер підходить для парсингу XHTML)

13

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

leofun01 написав:

його переваг.

  • строгість (всі теги мають бути закриті - <br/>, <hr/>, <meta ... />).

Відколи це додаткова робота вважається перевагою?

leofun01 написав:
  • XML сумістність (XML парсер підходить для парсингу XHTML)

Це, звісно, було б чудово, якби воно стабільно підтримувалося в інтернеті. На практиці ж 99% сайтів валідатор нестрогого HTML не проходять, тому особливого сенсу в цьому немає. HTML - для браузерів і людей перед ними, XML - для парсерів.

14

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

Для того щоб правильно використовувати ЯваСценарій потрібно взяти Dart і писати на Dart, Наведений код це типовий код типового сайтобудівельника. Я б не пихав в функцію append кілометрові рядки і замість них створював би об'єкти–обгортки jQuery.

Використовуйте складні селектори та nth-child, тобто не $("#carouselImg" + i), а на кшталт $("#my-carousel-id div.carousel img:nth-child("+i+")"), якщо вже так треба.

Погана порада. Потрібно намагатися уникати таких селекторів через те що розмітка може помінятися і всі такі селектори доведеться переписувати.

15 Востаннє редагувалося koala (20.08.2018 12:30:29)

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

Не погоджуюся. Можливо, слід спростити до

$("#my-carousel-id div.carousel-inner:nth-child("+i+")")

але в будь-якому разі ви в каруселі матимете ВСЮ карусель (з унікальним id) та її внутрішні однотипні елементи, які можна нумерувати, і неважливо, яка між ними структура, про що й говорить цей селектор.
Втім, вам тут навіть нумерувати не треба - ви ж додаєте певні елементи до ВСІХ елементів з певною ознакою, а отже, вам не треба їх нумерувати - jQuery сам їх перебирає.
А от як пан javascriptIsLife буде переробляти ваш код, щоб додати другу таку карусель на сторінку, але зі збереженням всіх id, я б подивився.

Подякували: leofun011

16

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

koala написав:
leofun01 написав:

його переваг.

  • строгість (всі теги мають бути закриті - <br/>, <hr/>, <meta ... />).

Відколи це додаткова робота вважається перевагою?

Відколи це закривання тегів вважається додатковою роботою ?
Це ж наоборот, простіше закривати всі теги ніж згадувати кого закривати, а кого ні.

koala написав:
leofun01 написав:
  • XML сумістність (XML парсер підходить для парсингу XHTML)

Це, звісно, було б чудово, якби воно стабільно підтримувалося в інтернеті.

Воно (і XHTML, і XML) стабільно підтримується в інтернеті.

koala написав:

На практиці ж 99% сайтів валідатор нестрогого HTML не проходять, тому особливого сенсу в цьому немає.

Ті 99% не проходять валідатор, бо розробники браузерів надто поблажливі до розробників таких сайтів, і як наслідок маємо багато веб-макак, які ще ніфіга не вивчили, а вже йдуть фрілансити.
Було б добре, якби W3C в специфікації HTML для розробників браузерів написали "Якщо код не валідний, то відображати сам код, а не сторінку !".

koala написав:

HTML - для браузерів і людей перед ними, XML - для парсерів.

Ага, з таким підходом пошукові системи повинні не існувати.

17

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

Ну переписав вже на такий код. Хоча по фатку це майже те ж саме. Але быльш читабільно, карусель на самому пості викінув. Залишив карусель лише в модальному вікні при оригінальному зображені.

<script>
    var allimg = [];
    function getData(data) {
        var allimg = [];
        var url = "/api/Blog"
        $.getJSON(url, function (data) {
            var obj = $.parseJSON(data);
            for (var i = 0; i < obj.length; i++) {
                var postDiv = document.createElement('div');
                postDiv.classList.add("post");
                postDiv.id = "post" + i;

                var postHead = document.createElement('div');
                postHead.classList.add("posthead");
                postHead.id = "posthead" + i;

                var postBody = document.createElement('div');
                postBody.classList.add("postbody");
                postBody.id = "postbody" + i;


                $("#idfirst").after(postDiv);

                $("#post" + i).append(postHead);
                $("#post" + i).append(postBody);


                $("#posthead" + i).append($('<p>').text(obj[i].Headline));
                $("#postbody" + i).append($('<p>').text(obj[i].BodyText));

                if (obj[i].Img64.length > 0) {
                    var postPhotoCarousel = document.createElement('div');
                    postPhotoCarousel.classList.add("slide");
                    postPhotoCarousel.id = "carouselIndicators" + i;

                    $("#post" + i).append(postPhotoCarousel);

                    var imgPost;

                    for (var u = 0; u < obj[i].Img64.length; u++) {
                        imgPost = document.createElement('img');
                        imgPost.id = "imgPost" + i + u;
                        imgPost.src = obj[i].Img64[u];
                        imgPost.classList.add("col-md-4", "myImgClass", "imgMargin");
                        imgPost.name = "imgPost";
                        $("#carouselIndicators" + i).append(imgPost);
                        allimg[allimg.length] = obj[i].Img64[u];
                    }
                }
                OpenCarousel(allimg)
            }
        });
    }

    function OpenCarousel(e)
    {
        var countbigImg = 0;
        var modal = document.getElementById('myModal');
        var img = document.getElementsByName("imgPost")
        for (var i = 0; i < img.length; i++)
        {
            img[i].onclick = function () {
                modal.style.display = "block";
                var x = $("#" + this.id).parent().attr('id');
                var y = $("#" + x);
                var s = $("#" + this.id).parent().children().length;
                y = y.clone().children();
                for (var i = 0; i < s; i++) {
                    if (countbigImg == 0)
                    {
                        var carouselItemActive = document.createElement('div');
                        carouselItemActive.id = "carouselItemActive" + i;
                        carouselItemActive.classList.add("carousel-item", "active");
                        $("#carousel-inner").append(carouselItemActive);
                        y[i].classList.replace("col-md-4", "img-fluid");
                        $("#carouselItemActive" + i).append(y[i]);
                        countbigImg = countbigImg + 1;
                    }
                    else
                    {
                        var carouselItem = document.createElement('div');
                        carouselItem.id = "carouselItem" + i;
                        carouselItem.classList.add("carousel-item");
                        $("#carousel-inner").append(carouselItem);
                        y[i].classList.replace("col-md-4", "img-fluid");
                        $("#carouselItem" + i).append(y[i]);
                    }
                    
                }
            }
        }
        var span = document.getElementsByClassName("close")[0];
        span.onclick = function () {
            modal.style.display = "none";
            countbigImg = 0;
            $("#carousel-inner").empty()
        }
        

    }

    
    $(document).ready(function () {
        getData();
    })
</script>

18

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

leofun01 написав:

Відколи це закривання тегів вважається додатковою роботою ?
Це ж наоборот, простіше закривати всі теги ніж згадувати кого закривати, а кого ні.

Якби веб-сторінки створювали виключно програмісти, тоді, може,  так би й було. Але по факту 90% контенту генерується спеціально навченими співробітниками, які вміють добре робити лише дві операції - копі та пейст, а для решти у них є Word. З якого вони і роблять ті дві операції з усією гидотною розміткою.

leofun01 написав:

Воно (і XHTML, і XML) стабільно підтримується в інтернеті.

Так, вибачте. У вебі. Хоча і XML у вебі є - але там, куди спеціально навчені співробітники не допускаються.

leofun01 написав:

Ті 99% не проходять валідатор, бо розробники браузерів надто поблажливі до розробників таких сайтів, і як наслідок маємо багато веб-макак, які ще ніфіга не вивчили, а вже йдуть фрілансити.
Було б добре, якби W3C в специфікації HTML для розробників браузерів написали "Якщо код не валідний, то відображати сам код, а не сторінку !".

Із таким строгим підходом ми б наразі мали два десятки вебів, кожний із власним браузером під власний стандарт. Хочете зайти на сайт корпорації зла - запускайте Edge, на сайт корпорації добра - Chrome.
Як на мене, то хай краще сторінка відмальовується криво, але відмальовується. Що, власне, і відбувається.

leofun01 написав:
koala написав:

HTML - для браузерів і людей перед ними, XML - для парсерів.

Ага, з таким підходом пошукові системи повинні не існувати.

Чому? Ніхто пошуку по тексту не скасовував. Але не треба плутати нечіткий пошук з точним запитом. Наявність пошукових двигунів ніяк же не скасовує реляційних БД.
Зате якщо спеціально навчений макак поламає розмітку на сайті НБУ, то все одно можна буде прочитати поточний курс - людям доведеться скролити туди, куди воно з'їхало, а машини прочитають із власного XML. Але якщо це буде одна сторінка... то буде йой.

Подякували: leofun011

19

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

Проблема в програмуванні на ДжаваСкрипт в тому, що зазвичай це не програмування лише на ЖС, а, як навіть в вашому випадку це суміш - ЖС,  різних АПІ та бібліотек. Ви хочете зробити просто (написати маленьку функцію) і доводиться робити складно - змішувати все до купи. По хорошому все це переробляти треба :) (не скілька сам код, а підхід до розробки фронту).  Але якщо трошки підправити те що є -
1. Можна використати fetch з промісами
2. Відмовитися від жквері бо у вас суміш DOM API і jQuery (якщо лише цей код на ньому, але якщо весь сайт то вже нехай буде, тоді юзати можна, а так сьогодні вже можна обходитися і без нього)

По коду:

var obj = $.parseJSON(data);
for (var i = 0; i < obj.length; i++)

Обжект не має проперті length (можливо у вас повертається масив? тоді бажано перейменувати змінні)

У вкладених масивах бажано використовувати інші імена змінної циклу (якщо було i, то у вкладоному - j)
Навіщо вам глобальна змінна allimg  перед функцією гетДата? (в якій ви ту змінну знову створюєте)
Зверніть увагу на неймінг змінних.

думаю поки що є над чим подумати) Удачі!

20

Re: Як правильно кодити на JS. Виведіть джуна на шлях істенний.

І ще таке питання. Справа в тому що я все ж таки не щодня займаюсь кодингом на JS. Практика це саме краще що може бути для навчання. А якщо навчання в IT то завжди працював метод "візми щось більш складне та вивчешь те що вчишь зараз"  Ураховуючи це я подумав, може взяти зараз Node JS. Там же чистий JS як бек-енд, заодно свій арсенал поповню?