Покритикуйте код

@eckimoc · Регистрация: 04.07.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте. Начинаю изучать jquery. Пожалуйста просмотрите код для сайта http://www.training.od.ua/. Хотелось бы узнать ваше мнение о семантике кода.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
//****************** SEARCH BOX ****************//
$("document").ready ( function() {
    a = [];
    b = [];
    d = [];
})
$('#allcategories').change (function() {
    if ( $(this).is(':checked')) {
        $("input[name='search-box']").prop('checked', true);
        $("input[name='search-box']").each ( function () {
            b.push ($(this).val());
        })
        }
    else {
        $("input[name='search-box']").prop('checked', false);
        d = [];
        a = [];
        b = [];
        }
        for (i = 0; i < b.length ; i++ ) {
            for ( j = 0; j < a.length; j++) {
                if (b[i] === a[j]) {
                }
            }
            d.push (b[i]);
        }
    console.log (d);
    $("#search-categories").val(d);
})
 
$("input[name='search-box']").change (function() {
    if (d.length === 0) {
        if ($(this).is(":checked")) {
            console.log ($(this).val());
            a.push ($(this).val());
        }
        else {
            a.splice ($.inArray($(this).val(), a), 1);
            console.log (a);
        }
        $("#search-categories").val(a);
        }
    else {
        if ($(this).is(":checked")) {
        }
        else {
            d.splice ($.inArray($(this).val(), d), 1);
        }
        console.log (d);
        $("#search-categories").val(d);
    }
})
 
//************** CONTENT SLIDER *********************************//
 
$('document').ready ( function() {
    var lastinput = $('input[name="content-slider"]:last').attr('id');
    sliderplay = setInterval( function() {
        if ($('input[name="content-slider"]:checked').attr('id') === lastinput) {
            $('#content-slide1').prop('checked', true)
        }
        else {
            $('input[name="content-slider"]:checked').next().prop('checked', true);
        }
    },3000);
 
})
 
function slider_stop() {
    $("#slider-pause").css('display' , 'none');
    $("#slider-play").css('display' , 'block');
    clearInterval(sliderplay);
}
 
function slider_play() {
    $("#slider-pause").css('display' , 'block');
    $("#slider-play").css('display' , 'none');
    var lastinput = $('input[name="content-slider"]:last').attr('id');
    sliderplay = setInterval( function() {
        if ($('input[name="content-slider"]:checked').attr('id') === lastinput) {
            $('#content-slide1').prop('checked', true)
        }
        else {
            $('input[name="content-slider"]:checked').next().prop('checked', true);
        }
    },3000);
}
 
//************** LATEST NEWS TYPE ********************************//
 
$('document').ready (function() {
    $('input[name="news-type"]').each (function() {
        if ($(this).is(':checked')) {
            var c = $(this).val();
            console.log (c);
            $('#news-type').val(c);
        }
    })
})
$('input[name="news-type"]').click ( function() {
    var c = $(this).val();
    $('#news-type').val(c);
})
 
 
//************* USER FORM POP UP ********************************//
 
function sign_up() {
    $("#sign-up").css('display' , 'block');
};
 
function login() {
    $("#login").css('display' , 'block');
};
 
function pop_up_close() {
    $("#sign-up").css('display' , 'none');
    $("#login").css('display' , 'none');
}

@Razip · 02.09.2014, 14:30

eckimoc, итак, начнем.

1)

JavaScript
1
$("document").ready ( function() {

document это объект, поэтому он не должен быть в кавычках.

2)

JavaScript
1
2
3
4
5
$("document").ready ( function() {
    a = [];
    b = [];
    d = [];
})

Зачем ожидать полную загрузку страницы для того, чтобы объявить массивы?

zhibirc · 02.09.2014, 15:55

Еще немного.

Сообщение от Razip

Зачем ожидать полную загрузку страницы для того, чтобы объявить массивы?

Более того, забыв декларацию var вы создаете глобальные переменные. Кроме того, с совершенно неинформативными именами.

Сообщение от eckimoc

for (i = 0; i < b.length ; i++ )

Длина массива вычисляется на каждой итерации цикла. Кэшируйте результат, записав единожды вычисленное значение в переменную.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
function sign_up() {
    $("#sign-up").css('display' , 'block');
};
 
function login() {
    $("#login").css('display' , 'block');
};
 
function pop_up_close() {
    $("#sign-up").css('display' , 'none');
    $("#login").css('display' , 'none');
}

Здесь, возможно, проще будет использовать show()/hide(). И код будет выглядеть чище.

@xenohunter · 02.09.2014, 16:02

eckimoc, присоединяюсь к критике Razip, а также добавлю от себя:
1) Используйте var для объявления переменных. Переменные внутри функций, объявленные без var - это то же, что и свойства глобального объекта, то есть, window. В вашем случае, в следующих двух фрагментах вашего кода некоторые переменные будут "пересекаться", замещать друг друга:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
$("document").ready ( function() {
    a = [];
    b = [];
    d = [];
})
// ...
$("input[name='search-box']").prop('checked', false);
    d = [];
    a = [];
    b = [];
}

2) Вместо метода change() используйте метод on():

JavaScript
1
$('#allcategories').on('change', function() {

3) Прежде чем говорить о "семантике кода", научитесь красиво и строго писать на чистом JavaScript, без библиотек. Сюда же добавлю: ставьте точку с запятой после каждого оператора.

@eckimoc · 03.09.2014, 20:59 **[ТС]**

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

Сообщение от zhibirc

Более того, забыв декларацию var вы создаете глобальные переменные.

Так как переменные используются в разных функциях, решил использовать глобальные переменные. Как можно по-другому объявлять переменные, если нужно будет использовать их в нескольких функциях?

Сообщение от xenohunter

Вместо метода change() используйте метод on():

Подскажите, почему метод on() лучше, а то гугл мне отказался помогать?

@xenohunter · 04.09.2014, 01:26

eckimoc, он универсален, позволяет подвесить функцию на несколько событий сразу. Например:

JavaScript
1
$('.elem').on('focus change click', function () { /* ваша функция */ });

И код приводится к более строгому виду, если уж мы говорим о семантике.

@eckimoc · 04.09.2014, 18:09 **[ТС]**

Спасибо за разъяснения. Будем изучать.

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@eckimoc 1 / 1 / 0 Регистрация: 04.07.2014 Сообщений: 13
	04.09.2014, 18:09 [ТС]
	Спасибо за разъяснения. Будем изучать. 1