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

@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 **[ТС]**

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

Новые блоги и статьи Все статьи Все блоги /
Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .	Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .
Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .	Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем

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