Дата публикации: 20.04.2021

jQuery превращает код в КАШУ

8bd108ae

Попробуйте написать такие вещщи:

$('body').append('\ <div>'+waki_icon+'\ <iframe name="waki_iframe" style="position: absolute; display: none; width:200px; height:50px;"></iframe>\ <div onclick="$(\'#waki_iframe\').css(\'display\',\'none\'); $(\'#waki_iframe_close\').css(\'display\',\'none\');"> <u>Закрыть</u> </div></div>\ '); и можно будет потихоньку уходить на пенсию. 8)))) Конечно тут все правильно, но то, что синтаксис черезвычайно ужасен - однозначно. Хотя при чем тут jQuery ? При том что он упрощает код! и возникает желание все сделать быстро и компактно. Так оно и есть. Однако получается вот такая каша.

Как преобразовать код так чтобы каши не было ?

1. Стили вынести в файл или раздел описания стилей, получим:

$('body').append('\ <div>'+waki_icon+'\ <iframe name="waki_iframe">

</iframe>\ <div

onclick="$(\'#waki_iframe\'). css(\'display\',\'none\'); $(\'#waki_iframe_close\'). css(\'display\',\'none\');"> <u>Закрыть</u></div></div>\ '); $('#waki_iframe_close').css("position","absolute"); $('#waki_iframe_close').css("display","none"); $('#waki_icon').css("position","absolute"); $('#waki_icon').css("display","none"); $('#waki_icon').css("width","200px"); $('#waki_icon').css("height","50px;"); таак.. вынесли, можно был и компактнее, но синтаксис jQuery для блока некрасивый и запоминать новый синтаксис не очень охота, хотя.. давайте глянем… а вот у них в чем гвоздь. Если стили в кавычках, то пишем как в CSS? и получится у нас так:

2. Компануем стили

$('body').append('\ <div>'+waki_icon+'\ <iframename="waki_iframe"></iframe>\ <divonclick=""><u>Закрыть</u></div></div>\ '); $('#waki_iframe_close').css("position":"absolute","display":"none"); $('#waki_icon').css("position":"absolute",

"display":"none","width":"200px","height":"50px;");

теперь уже красивее. Теперь события вынести в отдельные функции надо:

3. Код вынесли, теперь основная часть стала маленькой и содержит лишь самое необходимое.

waki_click_to_close=function() {$('#waki_iframe').css('display','none'); $('#waki_iframe_close').css('display','none'); } $('body').append('\ <div>'+waki_icon+'\ <iframe name="waki_iframe"></iframe>\ <divonclick="waki_click_to_close()"><u>Закрыть</u></div></div>\ '); $('#waki_iframe_close').css("position":"absolute","display":"none"); $('#waki_icon').css("position":"absolute","display":"none","width":"200px","height":"50px;"); Осталось отформатировать красивее, я люблю свой собственный стиль, который держит критические скобки на одном уровне:

4. Украсивливаем код по стилю jkeks

waki_click_to_close=function() {$('#waki_iframe').css ('display','none'); $('#waki_iframe_close').css('display','none'); }

$('body').append('\ <div>'+waki_icon+'\ <iframe name="waki_iframe"></iframe>\ <div onclick="waki_click_to_close()">\ <u>Закрыть</u>\ </div>\ </div>\ ');

$('#waki_iframe_close').css("position":"absolute","display":"none"); $('#waki_icon').css("position":"absolute","display":"none","width":"200px","height":"50px;"); Больше мараться не стоит пока.. Код стал больше, но яснее.