Создание своего компонента

@XOTAB · Регистрация: 30.05.2010

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

Всем привет.

В общем не могу найти как реализовать свою идею. А идея такова.
Например пишу в документе такой код:

HTML5

<component type="popupMenu" name="dashboard_popup">
    <component type="popupItem" name="pd_refresh" caption="Обновить" action="alert();" icon="refresh"/>
     <component type="popupItem" name="pd_add" caption="Добавить" action="alert();" icon="insert"/>
</component>

мне нужно что бы при построении документа PHP искал эти теги парсил так как мне нужно. Не знаю правильно или нет но я пошел в сторону модуля Simple HTML DOM. Подключил его, создал php файлик parser.php и написал в нем следующее

PHP

<?php
    $html = file_get_html('dashboard.php');
    $r = $html->find('component');
 
    if ($r) {
        for ($i=0; $i<count($r);$i++){
            switch ($r[$i]->attr['type']) {
                case 'popupMenu':
                    $show = '
                        <div component="popupMenu" name="'.$r[$i]->attr['name'].'" class="popupMenu">
                            <table width="100%" height="100%" class="popup_table">';
                        if ($r[$i]->children) {
                            for ($x=0; $x<count($r[$i]->children); $x++) {
                                $show .= '
                                    <tr>
                                        <td>
                                            <button class="popupMenu_item" component="popupMenu_item" name="'.$r[$i]->children[$x]->attr['name'].'" onClick="'.$r[$i]->children[$x]->attr['action'].'">
                                            <i class="icon-insert" ></i>'.$r[$i]->children[$x]->attr['caption'].'
                                        </button>
                                        </td>
                                    </tr>
                                ';
                            }
                        }
                    $show .= '</table></div>';
                    print $show;
                    $html->clear();
                    unset($html);
                    break;
            }
        }
    }
?>

В итоге парсится как надо:

HTML5

<div component="popupMenu" name="dashboard_popup" class="popupMenu">
    <table width="100%" height="100%" class="popup_table">
         <tbody>
        <tr>
                   <td>
                       <button class="popupMenu_item" component="popupMenu_item" name="pd_refresh" onclick="alert();">
                          <i class="icon-insert"></i>Обновить
                        </button>
                   </td>
                </tr>
               <tr>
                    <td>
                        <button class="popupMenu_item" component="popupMenu_item" name="pd_add" onclick="alert();">
                           <i class="icon-insert"></i>Добавить
                        </button>
                    </td>
               </tr>
          </tbody>
    </table>
</div>

но полученный код выводится сверху страницы (там где был include файла parser.php) а те html тэи которые я написал сверху остались. Мне нужно что бы новый сгенерированный код вставал заместо этого:

HTML5

<component type="popupMenu" name="dashboard_popup">
    <component type="popupItem" name="pd_refresh" caption="Обновить" action="alert();" icon="refresh"/>
     <component type="popupItem" name="pd_add" caption="Добавить" action="alert();" icon="insert"/>
</component>

Наверно тут нужно еще использовать классы. Хочу уже понять как это делается. Все перерыл в интернете но нет того чего я хочу. Подскажите пожалуйста как это делается правильно.

@Para bellum · 16.08.2018, 12:13

Вы же print используете. А это подача данных в поток вывода. Нужно замену производить.
Не проверял, но попытайтесь так:

PHP

<?php
    $html = file_get_html('dashboard.php');
    $r = $html->find('component');
 
    if ($r) {
        for ($i=0; $i<count($r);$i++){
            switch ($r[$i]->attr['type']) {
                case 'popupMenu':
                    $show = '
                        <div component="popupMenu" name="'.$r[$i]->attr['name'].'" class="popupMenu">
                            <table width="100%" height="100%" class="popup_table">';
                        if ($r[$i]->children) {
                            for ($x=0; $x<count($r[$i]->children); $x++) {
                                $show .= '
                                    <tr>
                                        <td>
                                            <button class="popupMenu_item" component="popupMenu_item" name="'.$r[$i]->children[$x]->attr['name'].'" onClick="'.$r[$i]->children[$x]->attr['action'].'">
                                            <i class="icon-insert" ></i>'.$r[$i]->children[$x]->attr['caption'].'
                                        </button>
                                        </td>
                                    </tr>
                                ';
                            }
                        }
                    $show .= '</table></div>';
                    
 
                    $r[$i]->outertext = $show;
                    $html->clear();
                    unset($html);
                    break;
            }
        }
    }
?>

Кстати, зачем используете цикл, если всё равно после первой итерации обрываете с помощью break?
Для find вторым аргументом можно указать номер элемента и не нужен будет цикл.

@XOTAB · 16.08.2018, 12:16 **[ТС]**

Спасибо, дома буду гляну.

Сообщение от Para bellum

Кстати, зачем используете цикл, если всё равно после первой итерации обрываете с помощью break?

Да, это косяк. Я уже исправил это. Вынес break за цикл. Цикл нужен т.к. на странице может быть несколько компонентов.

@Para bellum · 16.08.2018, 12:17

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

Вынес break за цикл.

Он только в цикле работает. Просто уберите его.

@XOTAB · 16.08.2018, 12:20 **[ТС]**

Хорошо, спасибо.

@Para bellum · 16.08.2018, 12:21

Не по теме:

Кстати, если Вы планируете большое количество компонентов, то лучше использовать фабрику и шаблон Strategy вместо switch, а то код станет трудно поддерживать.

@tarasalk · 16.08.2018, 12:25

Хм, а вы уверены что нужно извращаться с PHP, когда на js есть отличные реализации компонентов, например в react и vue.js?

@XOTAB · 16.08.2018, 12:30 **[ТС]**

Не хотелось бы что бы был открытый исходник

@tarasalk · 16.08.2018, 12:54

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

Не хотелось бы что бы был открытый исходник

Там все эти компоненты через webpack проходят, на выходе нечитаемая белиберда. + можно использовать минификацию и обфускацию.

@XOTAB · 16.08.2018, 20:27 **[ТС]**

Сообщение от Para bellum

Не проверял, но попытайтесь так:

Эх, не работает. Но смысл понял, надо найти этот кусок в документе и заменить тем что сгенерировал парсер. Буду пытаться. Спасибо.

@XOTAB · 17.08.2018, 20:40 **[ТС]**

Что-то никак не получается. Странно, но и с помощью str_replace и даже с помощью js cmp.parentNode.removeChild(cmp) старый код все равно остается на странице. Визуально его конечно не видно, если сделаю просмотр кода страницы, то его там видно. Хоть и контекстное меню отключено, все равно не хочется что-бы этот код оставался. Как его убрать можно?

@XOTAB 19 / 18 / 5 Регистрация: 30.05.2010 Сообщений: 227
	17.08.2018, 20:40 [ТС]	11
	Что-то никак не получается. Странно, но и с помощью str_replace и даже с помощью js cmp.parentNode.removeChild(cmp) старый код все равно остается на странице. Визуально его конечно не видно, если сделаю просмотр кода страницы, то его там видно. Хоть и контекстное меню отключено, все равно не хочется что-бы этот код оставался. Как его убрать можно? 0

@XOTAB 19 / 18 / 5 Регистрация: 30.05.2010 Сообщений: 227
	16.08.2018, 12:16 [ТС]	3
	Спасибо, дома буду гляну. Сообщение от Para bellum Кстати, зачем используете цикл, если всё равно после первой итерации обрываете с помощью break? Да, это косяк. Я уже исправил это. Вынес break за цикл. Цикл нужен т.к. на странице может быть несколько компонентов. 0

@Para bellum 5753 / 4133 / 1507 Регистрация: 06.01.2011 Сообщений: 11,276
	16.08.2018, 12:17	4
	Сообщение от XOTAB Вынес break за цикл. Он только в цикле работает. Просто уберите его. 0

@XOTAB 19 / 18 / 5 Регистрация: 30.05.2010 Сообщений: 227
	16.08.2018, 12:20 [ТС]	5
	Хорошо, спасибо. 0

@Para bellum
	16.08.2018, 12:21 #6
	Не по теме: Кстати, если Вы планируете большое количество компонентов, то лучше использовать фабрику и шаблон Strategy вместо `switch`, а то код станет трудно поддерживать. 0

@tarasalk 1992 / 1216 / 440 Регистрация: 13.06.2013 Сообщений: 4,115
	16.08.2018, 12:25	7
	Хм, а вы уверены что нужно извращаться с PHP, когда на js есть отличные реализации компонентов, например в react и vue.js? 0

@XOTAB 19 / 18 / 5 Регистрация: 30.05.2010 Сообщений: 227
	16.08.2018, 12:30 [ТС]	8
	Не хотелось бы что бы был открытый исходник 0

@tarasalk 1992 / 1216 / 440 Регистрация: 13.06.2013 Сообщений: 4,115
	16.08.2018, 12:54	9
	Сообщение от XOTAB Не хотелось бы что бы был открытый исходник Там все эти компоненты через webpack проходят, на выходе нечитаемая белиберда. + можно использовать минификацию и обфускацию. 0

@XOTAB 19 / 18 / 5 Регистрация: 30.05.2010 Сообщений: 227
	16.08.2018, 20:27 [ТС]	10
	Сообщение от Para bellum Не проверял, но попытайтесь так: Эх, не работает. Но смысл понял, надо найти этот кусок в документе и заменить тем что сгенерировал парсер. Буду пытаться. Спасибо. 0