Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Компактная запись функции (https://javascript.ru/forum/misc/70012-kompaktnaya-zapis-funkcii.html)

AlexTrader 03.08.2017 15:04

Компактная запись функции
 
Есть функция, а точнее портянка:
app.ratingTooltipTpl = function (e) {
        var res = "<div id='set-rating" + e.chainId + "'>";
        var rate = e.rating;
        switch (rate) {
            case 0:
                for (var i = 1; i <= 5; ++i) {
                    res += "<span rate=" + i + " chainId=" + e.chainId + " class='action-tooltip rating-empty' onclick='setRating(this)'></span>";
                }
                break;
            case 1:
                res += "<span rate=1 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                for (var i = 2; i <= 5; ++i) {
                    res += "<span rate=" + i + " chainId=" + e.chainId + " class='action-tooltip rating-empty' onclick='setRating(this)'></span>";
                }
                break;
            case 2:
                res += "<span rate=1 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                res += "<span rate=2 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                for (var i = 3; i <= 5; ++i) {
                    res += "<span rate=" + i + " chainId=" + e.chainId + " class='action-tooltip rating-empty' onclick='setRating(this)'></span>";
                }
                break;
            case 3:
                res += "<span rate=1 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                res += "<span rate=2 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                res += "<span rate=3 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                for (var i = 4; i <= 5; ++i) {
                    res += "<span rate=" + i + " chainId=" + e.chainId + " class='action-tooltip rating-empty' onclick='setRating(this)'></span>";
                }
                break;
            case 4:
                res += "<span rate=1 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                res += "<span rate=2 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                res += "<span rate=3 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                res += "<span rate=4 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                res += "<span rate=5 chainId=" + e.chainId + " class='action-tooltip rating-empty' onclick='setRating(this)'></span>";
                break;
            case 5:
                for (var i = 1; i <= 5; ++i) {
                    res += "<span rate=" + i + " chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
                }
                break;
        }
       
        res = res + "</div></br>Баллы:<span id='rating-rate" + e.chainId + "'>"+rate+"</span>";
        return res;
    };

Возможно ли её упростить, укоротить, записать более компактно, использую jqerry?

AlexTrader 03.08.2017 15:07

В каждом кейсе создаётся по 5 спанов, отличающихся только аттрибутом rate (от 1 до 5) и class(либо action-tooltip rating-yellow-star, либо action-tooltip rating-empty)

Nexus 03.08.2017 15:09

AlexTrader, Вы не так давно задавали похожий вопрос.
Почему нельзя проанализировать код, понять что у Вас постоянно повторяется, а какие данные статичны и на основе полученных результатов написать алгоритм, который будет выглядеть в 10 раз компактнее и выполнять эту же работу, но в единственном цикле?

В jQuery нет методов, способных выполнить эту же работу.

AlexTrader 03.08.2017 15:15

Nexus,
Сложность в том, что элементы не полностью повторяются, два аттрибута разные...

Nexus 03.08.2017 15:23

Цитата:

Сообщение от AlexTrader (Сообщение 460539)
Nexus,
Сложность в том, что элементы не полностью повторяются, два аттрибута разные...

Тут почти тоже самое:
https://javascript.ru/forum/misc/699...tml#post460507
Разное значение принимает 1 атрибут и свойство.

ksa 03.08.2017 15:33

Цитата:

Сообщение от AlexTrader
Возможно ли её упростить, укоротить, записать более компактно, использую jqerry?

Да. :yes:

Как вариант, сделай массив объектов, где у свойств будут нужные значения. Т.о. останется просто собрать нужную строку с использованием нужного элемента массива...

ksa 03.08.2017 15:34

Цитата:

Сообщение от AlexTrader
два аттрибута разные

Значит в объекте будут только 2 свойства...

ksa 03.08.2017 15:38

Цитата:

Сообщение от AlexTrader
res += "<span rate=1 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
res += "<span rate=2 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
res += "<span rate=3 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";
res += "<span rate=4 chainId=" + e.chainId + " class='action-tooltip rating-yellow-star' onclick='setRating(this)'></span>";

Такие сочетания вообще шедевр!

AlexTrader 03.08.2017 15:51

Сделал так:
app.ratingTooltipTpl = function (e) {
        var res = "<div id='set-rating" + e.chainId + "'>";
        var rate = e.rating;
        var spanArr = [];

        for (var i = 1; i <= 5; ++i) {
            spanArr.push("<span rate=" + i + " chainId=" + e.chainId + " class='action-tooltip rating-empty' onclick='setRating(this)'></span>");
        }

        switch (rate) {
            case 1:
                spanArr[0].replace("empty", "yellow-star");
                break;
            case 2:
                spanArr[0].replace("empty", "yellow-star");
                spanArr[1].replace("empty", "yellow-star");
                break;
            case 3:
                spanArr[0].replace("empty", "yellow-star");
                spanArr[1].replace("empty", "yellow-star");
                spanArr[2].replace("empty", "yellow-star");
                break;
            case 4:
                spanArr[0].replace("empty", "yellow-star");
                spanArr[1].replace("empty", "yellow-star");
                spanArr[2].replace("empty", "yellow-star");
                spanArr[3].replace("empty", "yellow-star");
                break;
            case 5:
                spanArr[0].replace("empty", "yellow-star");
                spanArr[1].replace("empty", "yellow-star");
                spanArr[2].replace("empty", "yellow-star");
                spanArr[3].replace("empty", "yellow-star");
                spanArr[4].replace("empty", "yellow-star");
                break;
        }

        var spans = spanArr.join();
        res += spans;
        res = res + "</div></br>Баллы:<span id='rating-rate" + e.chainId + "'>"+rate+"</span>";
        return res;
    };

Между спанами запятые выводятся...

AlexTrader 03.08.2017 15:52

Поправил
var spans = spanArr.join("");


Часовой пояс GMT +3, время: 22:19.