Laravel - Как оптимизировать идентичные циклы в видах лезвий - PullRequest
Новая
       3

Laravel - Как оптимизировать идентичные циклы в видах лезвий

1 голос
/ 17 июня 2020

Я создал веб-приложение Laravel, внутри которого мне нужно иметь один и тот же переключатель лезвия l oop 3 раза, и оно занимает много места, повторяя одно и то же. Есть ли способ оптимизировать это?
Я попытался использовать другой файл blade. php, который содержит эти случаи переключателя лезвия, а затем передать его в основной вид, однако это не сработало, предположительно потому, что сам основной вид расширяет файл layout.blade. php.

Пример кода

Что здесь происходит:

Я использую API погоды для извлечения данных, которые импортируются в представление, через контроллер. Чтобы отформатировать окончательный результат, необходимо несколько идентичных вариантов переключения, подобных приведенному ниже. Эти варианты переключения слишком длинные по сравнению с остальными необходимыми строками представления, поэтому я ищу способ их очистить. 

@extends('layout')

@section('middle')
        <div id="middle-results">
        @switch($results['weather']['0']['icon'])
            @case("01d")
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
                viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
                <g id="Base" display="none">
                </g>
                <g id="Dibujo">
                    <path d="M62.142,35.858c0.512,0,1.024-0.195,1.414-0.586l2.829-2.829c0.781-0.781,0.781-2.047,0-2.828
                        c-0.781-0.781-2.048-0.781-2.828,0l-2.829,2.829c-0.781,0.781-0.781,2.047,0,2.828C61.118,35.663,61.63,35.858,62.142,35.858z
                        M30,48c0-1.104-0.896-2-2-2h-4c-1.104,0-2,0.896-2,2s0.896,2,2,2h4C29.104,50,30,49.104,30,48z M32.444,60.728l-2.829,2.829
                        c-0.781,0.781-0.781,2.047,0,2.828c0.39,0.391,0.902,0.586,1.414,0.586c0.512,0,1.024-0.195,1.414-0.586l2.829-2.829
                        c0.781-0.781,0.781-2.047,0-2.828C34.492,59.947,33.224,59.947,32.444,60.728z M32.444,35.272c0.39,0.391,0.902,0.586,1.414,0.586
                        s1.024-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828l-2.829-2.829c-0.78-0.781-2.048-0.781-2.828,0
                        c-0.781,0.781-0.781,2.047,0,2.828L32.444,35.272z M48,30c1.104,0,2-0.896,2-2v-4c0-1.104-0.896-2-2-2s-2,0.896-2,2v4
                        C46,29.104,46.896,30,48,30z M72,46h-4c-1.104,0-2,0.896-2,2s0.896,2,2,2h4c1.104,0,2-0.896,2-2S73.104,46,72,46z M63.556,60.728
                        c-0.78-0.781-2.048-0.781-2.828,0c-0.781,0.781-0.781,2.047,0,2.828l2.829,2.829c0.39,0.391,0.902,0.586,1.414,0.586
                        c0.512,0,1.023-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828L63.556,60.728z M48,66c-1.104,0-2,0.896-2,2v4
                        c0,1.104,0.896,2,2,2s2-0.896,2-2v-4C50,66.896,49.104,66,48,66z M48,34c-7.72,0-14,6.28-14,14s6.28,14,14,14s14-6.28,14-14
                        S55.72,34,48,34z M48,58c-5.514,0-10-4.486-10-10s4.486-10,10-10s10,4.486,10,10S53.514,58,48,58z"/>
                </g>
                </svg>
                @break
            @case("01n")
                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
                viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
                <g id="Base" display="none">
                </g>
                <g id="Dibujo">
                    <path d="M60,46c-5.514,0-10-4.486-10-10c0-1.104-0.896-2-2-2c-7.72,0-14,6.28-14,14s6.28,14,14,14c7.72,0,14-6.28,14-14
                        C62,46.896,61.104,46,60,46z M48,58c-5.514,0-10-4.486-10-10c0-4.888,3.525-8.969,8.168-9.832
                        c0.934,5.986,5.677,10.729,11.664,11.664C56.969,54.475,52.889,58,48,58z"/>
                </g>
                </svg>
                @break

        @default

    @endswitch
@endsection

То, что я пробовал, но не сработало

3 Файлы:

Файл 1: layout.blade. php

Содержит структуру главной страницы 

<!DOCTYPE html>

<html>
    <head>
    </head>

    <body>
        @yield('middle')
    </body>
</html>

Файл 2: results.blade. php

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

@extends('layout')
@extends('icons_switch')

@section('middle')
    <div id="middle-results">
        @yield('icon')
    </div>
@endsection

Файл 3: icons_switch.blade. php

Содержит корпус переключателя, который выбирает правильный значок, как показано ниже 

        @section('icon')
            @switch($results['weather']['0']['icon'])
                @case("01d")
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
                    viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
                    <g id="Base" display="none">
                    </g>
                    <g id="Dibujo">
                        <path d="M62.142,35.858c0.512,0,1.024-0.195,1.414-0.586l2.829-2.829c0.781-0.781,0.781-2.047,0-2.828
                            c-0.781-0.781-2.048-0.781-2.828,0l-2.829,2.829c-0.781,0.781-0.781,2.047,0,2.828C61.118,35.663,61.63,35.858,62.142,35.858z
                            M30,48c0-1.104-0.896-2-2-2h-4c-1.104,0-2,0.896-2,2s0.896,2,2,2h4C29.104,50,30,49.104,30,48z M32.444,60.728l-2.829,2.829
                            c-0.781,0.781-0.781,2.047,0,2.828c0.39,0.391,0.902,0.586,1.414,0.586c0.512,0,1.024-0.195,1.414-0.586l2.829-2.829
                            c0.781-0.781,0.781-2.047,0-2.828C34.492,59.947,33.224,59.947,32.444,60.728z M32.444,35.272c0.39,0.391,0.902,0.586,1.414,0.586
                            s1.024-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828l-2.829-2.829c-0.78-0.781-2.048-0.781-2.828,0
                            c-0.781,0.781-0.781,2.047,0,2.828L32.444,35.272z M48,30c1.104,0,2-0.896,2-2v-4c0-1.104-0.896-2-2-2s-2,0.896-2,2v4
                            C46,29.104,46.896,30,48,30z M72,46h-4c-1.104,0-2,0.896-2,2s0.896,2,2,2h4c1.104,0,2-0.896,2-2S73.104,46,72,46z M63.556,60.728
                            c-0.78-0.781-2.048-0.781-2.828,0c-0.781,0.781-0.781,2.047,0,2.828l2.829,2.829c0.39,0.391,0.902,0.586,1.414,0.586
                            c0.512,0,1.023-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828L63.556,60.728z M48,66c-1.104,0-2,0.896-2,2v4
                            c0,1.104,0.896,2,2,2s2-0.896,2-2v-4C50,66.896,49.104,66,48,66z M48,34c-7.72,0-14,6.28-14,14s6.28,14,14,14s14-6.28,14-14
                            S55.72,34,48,34z M48,58c-5.514,0-10-4.486-10-10s4.486-10,10-10s10,4.486,10,10S53.514,58,48,58z"/>
                    </g>
                    </svg>
                    @break
                @case("01n")
                    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
                    viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
                    <g id="Base" display="none">
                    </g>
                    <g id="Dibujo">
                        <path d="M60,46c-5.514,0-10-4.486-10-10c0-1.104-0.896-2-2-2c-7.72,0-14,6.28-14,14s6.28,14,14,14c7.72,0,14-6.28,14-14
                            C62,46.896,61.104,46,60,46z M48,58c-5.514,0-10-4.486-10-10c0-4.888,3.525-8.969,8.168-9.832
                            c0.934,5.986,5.677,10.729,11.664,11.664C56.969,54.475,52.889,58,48,58z"/>
                    </g>
                    </svg>
                    @break
                 @default
             @endswitch
         @endsection

1 Ответ

1 голос
/ 18 июня 2020

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

@extends('layout')

@section('middle')
    <div id="middle-results">
        @includeIf('icons.' . $results['weather']['0']['icon'])
    </div>
@endsection

Внутри вашего resources/views/icons/01d.blade.php 

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
<g id="Base" display="none">
</g>
<g id="Dibujo">
    <path d="M62.142,35.858c0.512,0,1.024-0.195,1.414-0.586l2.829-2.829c0.781-0.781,0.781-2.047,0-2.828
        c-0.781-0.781-2.048-0.781-2.828,0l-2.829,2.829c-0.781,0.781-0.781,2.047,0,2.828C61.118,35.663,61.63,35.858,62.142,35.858z
        M30,48c0-1.104-0.896-2-2-2h-4c-1.104,0-2,0.896-2,2s0.896,2,2,2h4C29.104,50,30,49.104,30,48z M32.444,60.728l-2.829,2.829
        c-0.781,0.781-0.781,2.047,0,2.828c0.39,0.391,0.902,0.586,1.414,0.586c0.512,0,1.024-0.195,1.414-0.586l2.829-2.829
        c0.781-0.781,0.781-2.047,0-2.828C34.492,59.947,33.224,59.947,32.444,60.728z M32.444,35.272c0.39,0.391,0.902,0.586,1.414,0.586
        s1.024-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828l-2.829-2.829c-0.78-0.781-2.048-0.781-2.828,0
        c-0.781,0.781-0.781,2.047,0,2.828L32.444,35.272z M48,30c1.104,0,2-0.896,2-2v-4c0-1.104-0.896-2-2-2s-2,0.896-2,2v4
        C46,29.104,46.896,30,48,30z M72,46h-4c-1.104,0-2,0.896-2,2s0.896,2,2,2h4c1.104,0,2-0.896,2-2S73.104,46,72,46z M63.556,60.728
        c-0.78-0.781-2.048-0.781-2.828,0c-0.781,0.781-0.781,2.047,0,2.828l2.829,2.829c0.39,0.391,0.902,0.586,1.414,0.586
        c0.512,0,1.023-0.195,1.414-0.586c0.781-0.781,0.781-2.047,0-2.828L63.556,60.728z M48,66c-1.104,0-2,0.896-2,2v4
        c0,1.104,0.896,2,2,2s2-0.896,2-2v-4C50,66.896,49.104,66,48,66z M48,34c-7.72,0-14,6.28-14,14s6.28,14,14,14s14-6.28,14-14
        S55.72,34,48,34z M48,58c-5.514,0-10-4.486-10-10s4.486-10,10-10s10,4.486,10,10S53.514,58,48,58z"/>
</g>
</svg>
...