Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 47
Ну зачем такое писать в пятницу?
от кода чуть не стошнило.
Не исключаю, что Вы и не стали утруждать себя осмысление кода и возможности этих 8 строк, перед тем, как высказать своё пред-пятничное состояние.
Да у меня от одного взгляда на этот код голова начинает болеть, без шуток. А если я начну это еще осмыслять у меня определенно будет стресс. От мысли что когда то это надо будет поддерживать у меня мурашки по коже.
Извините, конечно. Речь про скрипт, надеюсь. Что там не понятно и подразумевает сложности в улучшении, не вижу. PHP код просто для примера отрисовки селекта. Возможно у Вас есть пример получше с близким функционалом?
Ну ок. Я решил показать вам, за что вас минусуют. Забьем на нужность такого модуля, просто рассмотрим сам код, его красоту. Я быстро, для примера, отформатировал ваш код. Но блин, отформатированным он выглядит лучше, но теперь можно его прочитать, и он становиться еще ужасней. Чувак, не делай так. Вообще не делай так. Прочитай книги по чистому коду. Книги по джаваскрипту. Посмотри на готовый фреймворки. Angular,js, Backbone.js, Knokout.js. Не просто посмотри, посмотри в их сорцы. Сравни качество и оформление кода. Попытайся написать какой либо модуль для них. Да, почти все нужное и полезное уже написано, но попробуй реализовать свое. Отдай это на код ревью кому нибудь. Пусть он попинает. Лучше нескольким людям. Посмотри в гайдлайны оформления кода, наконец же. Но не делай никогда так. Точнее делай, но никому не показывай и не выставляй такое в продакшен. Да, у нас у всех есть свои маленькие секреты. Когда мы учились, мы говнокодили. Но мы пытаемся это скрывать. Это были наши студенческие поделки, которые никто не увидит, и которые хранятся у нас на пыльном винте в чулане. Иногда мы их протираем, смотрим, ностальгически умиляемся и больше никогда так не делаем.
Чувак, не делай так больше. Пожалуйста.
Чувак, не делай так больше. Пожалуйста.
Быстро отформатированный код
$(document).ready(function() {
function post_ajax(url, data, inn){
$.ajax({
type: "POST",
url:url,
data:data,
success: function (data){
$(inn).html(data);
}
});
return;
}
jQuery
.each(
$("div#need_ajax"),
function(i) {
post_ajax($(this).data("url"), $(this).data("post"), $(this).data("html"));
});
$('body').on('click','.city, .do_ajax', function () {
var my_select = $("option:selected", this).val() ?
$("option:selected", this).val() :
$(this).data("inpost");
if($(this).data("clean")) {
var to_clean = $(this).data("clean").split(" ");
if(to_clean)$.each(to_clean,function(i){$("#"+this).empty();});
}
var to_next = $(this).data("next");
if(to_next && my_select!=0)
post_ajax($(this).data("url"), $(this).data("post")+"="+my_select, "#"+to_next );
});
});
На самом-то деле, если привести эти ваши «8 строк» к удобочитаемому виду, то их количество будет в районе 50-70. Пусть Вы это сожмёте хоть в одну строку, проблема не в количестве. Никто не экономит байты, когда нужно писать поддерживаемый, расширяемый и разумный код.
Возможно Вы понимаете, что там происходит и Вам результат нравится, но большинство вряд ли сможет сказать тоже самое.
Возможно Вы понимаете, что там происходит и Вам результат нравится, но большинство вряд ли сможет сказать тоже самое.
пятничный треш)
Отличная статься о том, как НЕ надо делать.
Аргументы естественно ни кто не считает нужным приводить.
Вопрос возможно поставить так — А зачем так делать? (если, конечно речь не о читабельности не отфарматированного кода в принципе)
У меня задача такого плана — иметь возможность добавить Любое количество элементов и управление без всяких OnClick='' и кучи обработчиков
Допустим нужно выбрать город, потом улицу, потом может быть карту загрузить или фото добавить, просто добавить пару кнопок и т.д.
Этот кусочек кода это всё позволяет сделать и отслеживает события для этих элементов. Свои функции он выполняет.
Вопрос возможно поставить так — А зачем так делать? (если, конечно речь не о читабельности не отфарматированного кода в принципе)
У меня задача такого плана — иметь возможность добавить Любое количество элементов и управление без всяких OnClick='' и кучи обработчиков
Допустим нужно выбрать город, потом улицу, потом может быть карту загрузить или фото добавить, просто добавить пару кнопок и т.д.
Этот кусочек кода это всё позволяет сделать и отслеживает события для этих элементов. Свои функции он выполняет.
А я покакунькал.
Ну вот сразу накинулись на человека, не объяснив почему.
Я признаюсь честно — не вдумывался в поведение кода, т.к. это тяжеловато, т.к. форматирования как такового нет. Если даже вы пишете код для себя, то стоит уделить внимание отступам и форматированию, чтобы в будущем было проще разобраться, не говоря уже о том, что вы его решили показать другим. Далее, данный пример очень субъективен и может быть повторно использован с большой натяжкой(js лучше было бы оформить в плагин для jquery, php в небольшой класс). По php-коду: конструкции с подавлением ошибок использовать очень опасно, об этом трубят на всех углах, также как и использовать mysq-функции(в качестве замены есть PDO или mysqli).
Это все бросается в глаза и вызывает волну негативных эмоций)) А ведь сегодня пятница. Надеюсь, качество вашего кода улучшится
Я признаюсь честно — не вдумывался в поведение кода, т.к. это тяжеловато, т.к. форматирования как такового нет. Если даже вы пишете код для себя, то стоит уделить внимание отступам и форматированию, чтобы в будущем было проще разобраться, не говоря уже о том, что вы его решили показать другим. Далее, данный пример очень субъективен и может быть повторно использован с большой натяжкой(js лучше было бы оформить в плагин для jquery, php в небольшой класс). По php-коду: конструкции с подавлением ошибок использовать очень опасно, об этом трубят на всех углах, также как и использовать mysq-функции(в качестве замены есть PDO или mysqli).
Это все бросается в глаза и вызывает волну негативных эмоций)) А ведь сегодня пятница. Надеюсь, качество вашего кода улучшится
«С комментариями чуть больше строк:» — сказано так, словно автор огорчился тому что пришлось написать комментарии. Возможно даже проскакивала мыль о минификации кода.
Ну есть чутка, пожалел место на экране. Я конечно, рассчитывал на другое, например:
Как гениально! Просто, лаконично и без лишних букв.
Сделаю закладку, может пригодится… (Когда разберусь что он вообще делает)
Мысли минификации кода не было, но в проекте сделаю, килобайты людям экономить)
Мой блокнот не делает форматирование, попробую на досуге — PhpStorm )
Как гениально! Просто, лаконично и без лишних букв.
Сделаю закладку, может пригодится… (Когда разберусь что он вообще делает)
Мысли минификации кода не было, но в проекте сделаю, килобайты людям экономить)
Мой блокнот не делает форматирование, попробую на досуге — PhpStorm )
Направление мысли у вас было верным, но:
— реализация ужасна и отвратительна. Попробуйте не видеть этот код пару дней и потом открыть. У вас будут сходу проблемы с осознанием что там происходит, и вы возможно сами захотите переписать этот код нормально.
— идея не нова, вот вообще ни разу не нова. Подобное я лично писал года два назад, сам же подсмотрел у кого-то другого. И да, можно сделать лаконичнее и чище.
— помимо блокнотов есть еще сервисы типа jsbeautifier.
— реализация ужасна и отвратительна. Попробуйте не видеть этот код пару дней и потом открыть. У вас будут сходу проблемы с осознанием что там происходит, и вы возможно сами захотите переписать этот код нормально.
— идея не нова, вот вообще ни разу не нова. Подобное я лично писал года два назад, сам же подсмотрел у кого-то другого. И да, можно сделать лаконичнее и чище.
— помимо блокнотов есть еще сервисы типа jsbeautifier.
Бедный паучок болен JPEG :(
За такие вещи руки нужно отрывать: @mysql_query
Я правильно понимаю, что на странице будет дофига элементов с
id=need_ajax? Как оно вообще работает? :)Не обязательно id можно и класс и не обязательно, что будут, а могут к примеру появиться в процессе мутации данных)
Работает просто.К примеру, добавленный на страницу div c id='need_ajax' data-url='/map.php?' data-post='g1=1' data-html='#html_g1'
инициирует POST запрос скриптом на адрес /map.php, пошлёт туда g1=1 и ответ сунет в #html_g1 и всё. Так же и с селектами.
Естественно это не изобретение велосипеда. Но, на удивление, работает)
Работает просто.К примеру, добавленный на страницу div c id='need_ajax' data-url='/map.php?' data-post='g1=1' data-html='#html_g1'
инициирует POST запрос скриптом на адрес /map.php, пошлёт туда g1=1 и ответ сунет в #html_g1 и всё. Так же и с селектами.
Естественно это не изобретение велосипеда. Но, на удивление, работает)
Посмотрел Вебвизор и меня осенило! Я написал в посте Демо… — на селект (Выбор города)
Ну и что же я вижу спросит внимательный читатель?
Ответ: Из просмотренных мной множества посещении НИ ОДИН человек не клацнул на этот селект даже)) куда угодно, но не в него…
Однако, нет. Чукча не читатель, Чукча — писатель.))
Ну и что же я вижу спросит внимательный читатель?
Ответ: Из просмотренных мной множества посещении НИ ОДИН человек не клацнул на этот селект даже)) куда угодно, но не в него…
Однако, нет. Чукча не читатель, Чукча — писатель.))
Код, конечно, прекрасен.
Особенно названия переменных и вот эта часть:
$a = explode("=", $_POST);
$r77 = @mysql_query(«SELECT * from ajax_city3 where ».($a[0] == «g1»? " main='1' ": " parentid='".number_format($a[1], 0, '', ''). "'").
" ORDER BY pos DESC, text ASC ");
.
Особенно названия переменных и вот эта часть:
$a = explode("=", $_POST);
$r77 = @mysql_query(«SELECT * from ajax_city3 where ».($a[0] == «g1»? " main='1' ": " parentid='".number_format($a[1], 0, '', ''). "'").
" ORDER BY pos DESC, text ASC ");
.
Эм… Я конечно не особо сильно разбираюсь в тонкостях PHP но…
Зачем? $_POST уже и так есть в PHP.
А еще я так и не понял где тут 8 строк.
$_POST = @file_get_contents("php://input");
$a = explode("=", $_POST);Зачем? $_POST уже и так есть в PHP.
А еще я так и не понял где тут 8 строк.
php.net/manual/ru/wrappers.php.php
php://input
php://input является потоком только для чтения, который позволяет вам читать необработанные данные из тела запроса. В случае POST-запросов предпочтительней использовать php://input вместо $HTTP_RAW_POST_DATA, так как этот метод не зависит от специальных php.ini директив.
Просто $_POST иногда можно не увидеть после ajax POST JSON. Этот костыль его достаёт с потока php://input.
PHP — удивительное рядом! )
php://input
php://input является потоком только для чтения, который позволяет вам читать необработанные данные из тела запроса. В случае POST-запросов предпочтительней использовать php://input вместо $HTTP_RAW_POST_DATA, так как этот метод не зависит от специальных php.ini директив.
Просто $_POST иногда можно не увидеть после ajax POST JSON. Этот костыль его достаёт с потока php://input.
PHP — удивительное рядом! )
в $_POST данные появляются только тогда, когда они были посланы как application/x-www-form-urlencoded или multipart/formdata. Если вы со стороны JS выставили нужные заголовки — проблем не будет. И да, можно выставить Content-type: application/json в заголовки запроса и тогда уже вам придется обрабатывать тело запроса:
но вы же делаете вот эти все извращения совсем не задумываясь о том, зачем вы это делаете. Каждое решение которое вы принимаете должно быть аргументировано. Если вы криво посылаете данные и для того что бы все работало ставите такие вот кастыли, то да, проблема у вас.
$data = json_decode(file_get_contents("php://input"), true);
но вы же делаете вот эти все извращения совсем не задумываясь о том, зачем вы это делаете. Каждое решение которое вы принимаете должно быть аргументировано. Если вы криво посылаете данные и для того что бы все работало ставите такие вот кастыли, то да, проблема у вас.
Да, согласен можно отправлять json, так и сделано в основной форме. А тут отправляется так один аргумент.
То что такого рода костыли есть не моя выдумка или безграмотность, а настоящее этих процессов.
Сам код естественно не претендует да нобелевскую премию, это один из множества возможных вариантов.
А код пхп приведет был вообще для примера, как можно (не обязательно нужно) сделать тут вывод селекта.
То что такого рода костыли есть не моя выдумка или безграмотность, а настоящее этих процессов.
Сам код естественно не претендует да нобелевскую премию, это один из множества возможных вариантов.
А код пхп приведет был вообще для примера, как можно (не обязательно нужно) сделать тут вывод селекта.
Где именно 8 строк? И интересно, какой css у класса .do_ajax?
Было 8 строк не форматированного кода. Под воздействием общественности код был приведен в более менее удобочитаемый вид.
CSS никакой у do_ajax, он присвоен для отслеживания события на клик вот тут $('body').on('click', '.city, .do_ajax', function() {…
CSS никакой у do_ajax, он присвоен для отслеживания события на клик вот тут $('body').on('click', '.city, .do_ajax', function() {…
почему бы не использовать data-* атрибуты?
Это читабельнее, удобнее к использованию, можно вынести туда какие-то конфиги. А для любителей экономии на спичках, выборка по атрибуту быстрее выборки по классу.
<button data-ajax="">Do Ajax!</button>
Это читабельнее, удобнее к использованию, можно вынести туда какие-то конфиги. А для любителей экономии на спичках, выборка по атрибуту быстрее выборки по классу.
Можно и так конечно не спорю. Но обещанную вами нормальную реализацию второй день не видно уже )
Ну например так: jsfiddle.net/pyqbgea1/ Правда я чуть чуть схалтурил и взял knockout (чего и вам советую) так как уже не представляю себе жизнь без data-binding когда речь идет о том, что бы сделать вменяемую логику форм и не сойти с ума. Если не брать функцию fakeDataProvider то намного читабельнее вашего варианта. Собственно все мысли я изложил в комментах. На что-то большее у меня не хватает времени сейчас.
Оригинально, конечно. Привели в пример код на 100 строк который заточен ТОЛЬКО для построения селекта с городами.
Большего от него вы в принципе не добьетесь )) Теперь осмыслите, что делает мой контроллер:
// Ожидание события клик на классах '.city, .do_ajax
$('body').on('click', '.city, .do_ajax', function() {
// Если это селект и имеет значение то берем его, если не селект то ищем значение в $(this).data(«inpost»);
var my_select = $(«option:selected», this).val()? $(«option:selected», this).val(): $(this).data(«inpost»);
// Нужно ли нам, что то очистить при этом? Возможно много ид? Получаем их отсюда $(this).data(«clean») очищаем
if ($(this).data(«clean»)) {
var to_clean = $(this).data(«clean»).split(" ");
if (to_clean) $.each(to_clean, function(i) {
$("#" + this).empty();
});
}
// А нужно ли нам еще куда то запрос делать и есть ли данные? Посмотрели тут $(this).data(«next») отправили данные my_select по адресу $(this).data(«url»)
var to_next = $(this).data(«next»);
if (to_next && my_select != 0) post_ajax($(this).data(«url»), $(this).data(«post») + "=" + my_select, "#" + to_next);
});
Он может обработать любые селекты, инпуты и прочие объекты, вставлять данные куда нужно и очищать и делать запросы. На то он и контроллер событий.
Большего от него вы в принципе не добьетесь )) Теперь осмыслите, что делает мой контроллер:
// Ожидание события клик на классах '.city, .do_ajax
$('body').on('click', '.city, .do_ajax', function() {
// Если это селект и имеет значение то берем его, если не селект то ищем значение в $(this).data(«inpost»);
var my_select = $(«option:selected», this).val()? $(«option:selected», this).val(): $(this).data(«inpost»);
// Нужно ли нам, что то очистить при этом? Возможно много ид? Получаем их отсюда $(this).data(«clean») очищаем
if ($(this).data(«clean»)) {
var to_clean = $(this).data(«clean»).split(" ");
if (to_clean) $.each(to_clean, function(i) {
$("#" + this).empty();
});
}
// А нужно ли нам еще куда то запрос делать и есть ли данные? Посмотрели тут $(this).data(«next») отправили данные my_select по адресу $(this).data(«url»)
var to_next = $(this).data(«next»);
if (to_next && my_select != 0) post_ajax($(this).data(«url»), $(this).data(«post») + "=" + my_select, "#" + to_next);
});
Он может обработать любые селекты, инпуты и прочие объекты, вставлять данные куда нужно и очищать и делать запросы. На то он и контроллер событий.
ваша реализация тоже расчитана только под ваш кейс и не приминима для других проектов. Моя просто чище и идеологически верней. урлы для данных можно только для подгрузки блока прописывать, для форм лучше так не делать. А что будет если вы захотите прикрутить кеширование данных на клиенте?
Я привел в статье пример контроллера событий, а не урбанистическое уникальное решение для всех и всегда.
В отличии от вашего не до примера, этот контроллер можно поставить на любую страницу и уже что-то грузить и раздупливать.
Вашим нет. Более того ваш код зависим, мой нет. Он не идеален, но он не такой обрубленный как тот кусок что вы привели в пример.
Лучше так не делать, почему? Если я заведомо знаю куда слать данные и могу поменять в любой момент времени.
Если я захочу закешировать данные какие то на клиенте, то сделаю это без лишних вопрос и кнок-чпоков.
В отличии от вашего не до примера, этот контроллер можно поставить на любую страницу и уже что-то грузить и раздупливать.
Вашим нет. Более того ваш код зависим, мой нет. Он не идеален, но он не такой обрубленный как тот кусок что вы привели в пример.
Лучше так не делать, почему? Если я заведомо знаю куда слать данные и могу поменять в любой момент времени.
Если я захочу закешировать данные какие то на клиенте, то сделаю это без лишних вопрос и кнок-чпоков.
И по поводу совета использовать knockout…
Вы говорите пытаетесь сделать вменяемую логику форм, а я вот сделал в две руки такие формы например
Для добавления авто — объявлений.сайт/ob/add?c1=3&c2=3.1, для недвижимости — объявлений.сайт/ob/add?c1=2&c2=2.1, для вакансаий — объявлений.сайт/ob/add?c1=1&c2=1.1&c3=1&numc=1 с любыми возможностями построения формы без халтуры и использования там чего-то.
Вы говорите пытаетесь сделать вменяемую логику форм, а я вот сделал в две руки такие формы например
Для добавления авто — объявлений.сайт/ob/add?c1=3&c2=3.1, для недвижимости — объявлений.сайт/ob/add?c1=2&c2=2.1, для вакансаий — объявлений.сайт/ob/add?c1=1&c2=1.1&c3=1&numc=1 с любыми возможностями построения формы без халтуры и использования там чего-то.
Выглядит, как в одну руку… Стили прыгают, каждый раз все перегружается.
Хотя бы списки можно было бы сделать один раз подгружаемыми вместе со страницей. По большому счету грузится один раз вся страница и дальше в ней все переключается фронтэндом. И да, для этого нужно немного больше времени, но точно так же можно написать универсальное решение на backbone на все виды страниц. И будет грузится у Вас вместе со страницей заранее подготовленная конфигурация всех форм, а на backbone уже будет рендерится это все и переключаться (и даже с историей в браузере) без всяких лишних запросов на сервер. Результат: низкая нагрузка на сервер + удобство для клиента. Ну и доработать через год и Вам проще будет и другим (если потребуется).
Также:
— используйте стандартные возможности PHP 5 типа $_POST, все отлично работает и так,
— используйте mysql pdo, иначе проблем с безопасностью не избежать,
— прочитайте документацию про оформление кода, например google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml#Code_formatting
— прочитайте про DRY, KISS, SOLID, YAGNI.
И перепишите код, Вам самому понравится.
Хотя бы списки можно было бы сделать один раз подгружаемыми вместе со страницей. По большому счету грузится один раз вся страница и дальше в ней все переключается фронтэндом. И да, для этого нужно немного больше времени, но точно так же можно написать универсальное решение на backbone на все виды страниц. И будет грузится у Вас вместе со страницей заранее подготовленная конфигурация всех форм, а на backbone уже будет рендерится это все и переключаться (и даже с историей в браузере) без всяких лишних запросов на сервер. Результат: низкая нагрузка на сервер + удобство для клиента. Ну и доработать через год и Вам проще будет и другим (если потребуется).
Также:
— используйте стандартные возможности PHP 5 типа $_POST, все отлично работает и так,
— используйте mysql pdo, иначе проблем с безопасностью не избежать,
— прочитайте документацию про оформление кода, например google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml#Code_formatting
— прочитайте про DRY, KISS, SOLID, YAGNI.
И перепишите код, Вам самому понравится.
Господа, подержите мой монокль пожалуйста…
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Заботливый контроллер событий на странице