Движок или Фреймворк?

Не хочу ничего рекламить, но наверно из-за jquery у лофтскула, сайт грузится пол дня, пока не загрузится нельзя раскрыть аккордеон,

https://loftschool.com/course/php
--- Добавлено ---

Это табы, сможешь разобраться?

Код (Javascript):

1.  var tab = document.querySelectorAll(".tab"),
2.            content = document.querySelector(".content"),
3.         post = document.querySelectorAll(".post");
4.  
5.     tab[0].style.backgroundColor='red';
6.  
7.     for (var i = 0; i < content.children.length; i++) {
8.       content.children[i].style.display='none';
9.       content.children[0].style.display='block';
10.     }
11.  
12.     for (var i = 0; i < tab.length; i++) {
13.  
14.       (function(index) {
15.         tab[i].addEventListener('click', function () {
16.  
17.             var isActive = (tab[index].getAttribute('style') == 'background-color: red;') ? true : false,
18.                 isHidden = (post[index].getAttribute('style') == 'display: none;') ? true : false;
19.  
20.             if (!isActive) {
21.               [].forEach.call(tab, function(el) {
22.                 el.removeAttribute('style');
23.               });
24.               tab[index].style.backgroundColor='red';
25.             }
26.  
27.             if (isHidden) {
28.               [].forEach.call(content.children, function(el) {
29.                 el.style.display='none';
30.               });
31.               post[index].style.display='block';
32.             }
33.  
34.         });
35.       })(i);
36.  
37.     }

HTML:

1. <div class="tab-menu">
2.   <span class="tab">Tab 1</span>
3.   <span class="tab">Tab 2</span>
4.  
5.   <div class="content">
6.     <div class="post">
7.        <p>
8.          dfsd sns ksnkn snskn sf a f sfs sfs dfsd sns ksnkn snskn sf a f            sfs ss dfsd sns ksnkn snskn sf a f sfs sfs dfsd sns ksnkn snskn            sf a f  sfs sfs
9.        </p>
10.     </div>
11.     <div class="post">
12.        <p>
13.         Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2
14.         Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2
15.         Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2
16.         Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2 Tab 2
17.       </p>
18.     </div>
19.  
20.   </div>
21. </div>

Код (CSS):

1. .tab-menu{
2.   width: 300px;
3.   outline: 1px solid;
4. }
5. span{
6.   width: 49%;
7.   display: inline-block;
8.   vertical-align: top;
9.   background: green;
10. }
11.  
12. span:hover{
13.   cursor: pointer;
14. }
15.  
16. .content{position: relative}
17. .post{
18.   position: absolute;
19.   top: 0;
20.   left: 0;
21. }
22.  
23. .post2{
24.   display: none;
25. }

 

@Fell-x27
Сижу пью я чаёк читаю форум. Пишу свой кодик.
И начитавшись ваших бравых речей. Воспрянул я духом и полез в js убрав нахрен jquery.
С течением времени прихожу я к следубщиму куску банального кода обработка собтия клика на js по селектору. Не по id а если ткнут на класс. Окей Ломал голову пока не допёрло, а точне пока строки доки не вошил мне в мозг что там не просто волк в овечьей шкуре а массив из объектов дом элемента, а значит напрямую не обращусь с евентом. Знач надо перебор ага вот пишу. Окей вот оно творение:

Код (Javascript):

1. var block = document.querySelectorAll("a.block-btn");
2.   for (var i = 0; i < block.length; i++) {
3.     block[i].onclick = function(event) {
4.       console.log('hi choo');
5.     }
6.   }

Зис гуд но что вы скажите на это

Код (Javascript):

1. $('.block-btn').on("click", function (){
2.     console.log('hi choo');
3.   });

Вамм не кажется что код малясмь короче получился?
--- Добавлено ---
И про шкуру внутри, не надо что он там большой и т.д вес jquery бьёт любая картинка. И думаю под капотом у jquery некая подобная функция и имеется при обработке данного события.
--- Добавлено ---
Добавлю буду рад услышать что я не парв. И на js можн овзять и сделать короче и элегантней.

 

@Fell-x27 не уверен что пока смогу полностью от jquery отказаться в связи с тем что используемые шаблоны html всё равно его тянут. Так что... Но то что привели в пример кода по кликам, надо бы изучить....
--- Добавлено ---
хотя это тот же цикл который прозванивает каждый найденный элемент в доме с таким именем класса а точней с таким селектором.

 

если навязываемая сверху спагетти архитектура нужна чтобы склепать за час одностроничный ленд почему нет ?
--- Добавлено ---

Согласен на крупных проектах. Если это некая crm система или же крупный интернет магазин с ожидаемой большой обраткой данных. Я бы вообще предпочёл там заюзать аля ангуляр вуе или реакт какой нибудь.
--- Добавлено ---
и кстати с ними jquery вообще ели как соединяется. Можно но очень криво и не очень красиво.

 

Если научиться ПРОГРАММИРОВАТЬ, а не клепать, тогда не то что движок или фреймворк, любой язык программирования можно без проблем освоить.

 

Алгоритмы везде одинаковые, если не умеешь правильно думать, то проблемы будут в любом языке.

 

Зачем думать? Он все сделает по видеоуроку))

 

Даааа ?) А пробовал соберать через webpack приложение на vue ? ) Ну вот попробуй и расскажи как там прикрепил jquery ) Я то с этой байдой бился около 2 дней и победил прикрепил в обход компилятора) Вот возьми попробуй, поставь ноду затем vue приложение разверни при установке поставь екслинт это такой помошник в дебаге ошибок на js.
--- Добавлено ---
На сколько я понял ты прикрепил к своему проекту просто кусочек библы)
--- Добавлено ---
Которую они пиарят. А там есть целая среда разработки на vue со своим синтаксисом на js и своим компилятором. всё это потом в js

 

@Fell-x27 да в доки нету чтобы было написано как прикрепить jquery там есть где то в примерах как крутить сторонние библы через веб пак! Но это все геморой потому что нормальной доки нету. Есть расплывчатые примеры разных людей. А на официальном форуме мне ни кто не ответил по моему вопросу. Пришлось в обходнйо путь компилятора писать подключение jquery и плюс внутри все скрипты на js писать в дом реди ибо иначе вылитали ошибки
--- Добавлено ---
точнее как на оф. сообществе мне ответили что jquery это зло. Не надо его юзать. Используйте vue
--- Добавлено ---
Я сделал всё по инструкции прикрутил библу jquery в компилятор. Но он не работал а выдовал ошибки то скрипт не доступен то в самом jquery Ошибки. И т.д и т.п Вообщем через два дня в тугих потугах я спросил чувака одного КАК? Он мат ьего прикрутил jquery. Он отвечает в обход компилятора. XD Я сижу и грызу себе ногу как сделать это правильно а он говорит а чё мучится подключи вне компилируемых объектов в html в самый низ.
--- Добавлено ---
И сложить надо файлы jquery в статик папку куда скомпиленные файлы попадают
--- Добавлено ---
@Fell-x27 я просто к тому что он грит:

Вот я к этому и пишу. Всё срань у vue и jquery один долбанный синтаксис ($)
--- Добавлено ---

Собственно vue да офигенная штука она вообще просто сметает понимание старых стандартов.
https://vue-loader.vuejs.org/ru/start/setup.html
Здесь можно посмотреть как поставить vue loader.
--- Добавлено ---
Попробуйте чёткая вещь. Мне понравилось правда пока слишком сложно для реального и дешовенького проекта. Но в качестве образования. ДУмаю оно того стоит тем более на самом деле это очень даже занимательно.

 

@Fell-x27
в том то и дело чтио jquery придётся вызывать самым последний и тогда конфликта не будет. А что делать если у тебя уже проект на штопанный кем то на jquery. А переписывать фронт ну некогда

 

@Fell-x27 ладно ты не победим. Я не подумал смотреть не конфликт в самом jquery я искал решение в vue.
--- Добавлено ---
и всё равно это всё геморой.

 

@Fell-x27 нет как раз это и есть кастыль. И то кастыль. Это кастыль придуманны jquery. По сути сам vue безконфликтно работает с jquery. Но вот компиляция через веб пак vue loader ом чё то даёт сбой! То есть внутрикомпилятора jquery подключаешь он их не считывает вообще. Чтобы подключить стороннию библу. Нужно добавить её не посредственно в настройки webpack но там какие то траблы я добавляю а он требует ещё что то добавить и установить устанавливешь и он до бесконечности постоянно просит что то устанавливать хз у меян не поулчилось как в доке веб пака указано сделать. В обще я плюнул. И сделал в обход грубюо говоря тоже самое что там и предложенно с ноу конфликтом.

 

@mkramer я так и сделал. Только там есть одна хитрость скрипты jquery должны хранится в папке static. Иначе не скомпилится проект.

 

https://webpack.github.io/docs/shimming-modules.html#plugin-provideplugin

вот для кого всё это писали?