Тема: Як правильно кодити на 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();
})
