Да, это возможно: путем серьезного рефакторинга вашего явного кода. По сути, вам нужно аннотация , ie. генерируйте варианты на основе общих шаблонов, которые вы определили. Я не буду писать весь этот код за вас, но вот пошаговое руководство с большим количеством примеров.
Во-первых, давайте разберем код; глядя только на одно из множества повторений. Ниже мы отбираем необходимый код для одного текста, с заменой имени текста на заполнитель {{ TEXTNAME }}, чтобы вы могли увидеть, что все дублируется. Для каждого текста у вас есть HTML кнопки, как показано ниже:
<button id="lecture{{ TEXTNAME }}">Écoutez</button>
<button id="pause{{ TEXTNAME }}">Pause</button>
<button id="reprendre{{ TEXTNAME }}">Reprendre</button>
<button id="arret{{ TEXTNAME }}">Arrêtter</button>
Затем у вас есть JavaScript, как показано ниже.
/* You don't really need the following five "let"s.
Get the relevant DOM objects inside the functions. */
let btnLecturet{{ TEXTNAME }} = document.getElementById("lecture{{ TEXTNAME }}");
let btnPause{{ TEXTNAME }} = document.getElementById("pause{{ TEXTNAME }}");
let btnReprendre{{ TEXTNAME }} = document.getElementById("reprendre{{ TEXTNAME }}");
let btnArret{{ TEXTNAME }} = document.getElementById("arret{{ TEXTNAME }}");
let div{{ TEXTNAME }} = document.getElementById("{{ TEXTNAME }}");
/* Here we have four *explicit* functions that are
unnecessarily repeated for each event handler definition: */
btnArret{{ TEXTNAME }}.onclick = function () {
speechSynthesis.cancel();
}
btnLecture{{ TEXTNAME }}.onclick = function () {
speechSynthesis.cancel();
/*let texte = "Coucou";*/
let texte{{ TEXTNAME }} = div{{ TEXTNAME }}.textContent;
// instancier un objet d'énonciation
let parole = new SpeechSynthesisUtterance();
parole.lang = 'fr-Fr'; // language, default is 'en-US'
parole.text = texte{{ TEXTNAME }};
parole.pitch = 1; // 0 à 2 = hauteur
parole.rate = 1.3; // 0.1 à 10 = vitesse
parole.volume = 1; // 0 à 1 = volume
// fair parler
speechSynthesis.speak(parole);
}
btnPause{{ TEXTNAME }}.onclick = function () {
let texte{{ TEXTNAME }} = div{{ TEXTNAME }}.textContent;
// instancier un objet d'énonciation
let parole = new SpeechSynthesisUtterance();
parole.text = texte{{ TEXTNAME }};
// fair une pause
speechSynthesis.pause(parole);
}
btnReprendre{{ TEXTNAME }}.onclick = function () {
let texte{{ TEXTNAME }} = div{{ TEXTNAME }}.textContent;
// instancier un objet d'énonciation
let parole = new SpeechSynthesisUtterance();
parole.text = texte{{ TEXTNAME }};
// reprendre la lecture
speechSynthesis.resume(parole);
}
Вы заметите, что Javascript работает выше содержат ненужную явную информацию («ИМЯ ТЕКСТА»). Это делает их непригодными для повторного использования. Было бы неплохо сделать это, если бы у вас была только одна или две фиксированные реализации; но у вас их много, и вы хотите легко что-то обновлять.
Теперь самое интересное в функциях: они могут принимать аргументы, определяющие их действие или возвращаемое значение, что позволяет вам повторно использовать одно и то же код для любого количества вариантов вариантов. Предположим, вместо этого вы сделали следующее (например, вы бы сделали аналогичное «обобщение» для остальных функций):
function doPause(textName) {
// instancier un objet d'énonciation
let parole = new SpeechSynthesisUtterance();
/* simply get the DOM object right here: */
parole.text = document.getElementById(textName).textContent;
// fair une pause
speechSynthesis.pause(parole);
}
Тогда у нас есть функция generi c pause-action, которая принимает имя / идентификатор текста в качестве аргумента , который может применяться к любому количеству случаев (пример ниже соответствует вашему старому коду):
btnPauseWHATEVERTEXT.onclick = doPause("WHATEVERTEXT");
btnPauseQUESTCEQUECEST.onclick = doPause("QUESTCEQUECEST");
Это уже намного проще, правда? Вам нужно будет объявить только один набор функций: doArret(textName), doLecture(textName), doPause(textName) и doReprendre(textName).
Затем все, что останется, - это указать кнопки и обработчики событий. Теперь переключаемся на PHP. Предположим, у вас есть следующая функция:
function make_buttons($textname) {
$buttons = [];
$buttons[] = '<button id="lecture' . $textname . '">Écoutez</button>';
$buttons[] = '<button id="pause' . $textname . '">Pause</button>';
$buttons[] = '<button id="reprendre' . $textname . '">Écoutez</button>';
$buttons[] = '<button id="arret' . $textname . '">Arrêtter</button>';
return implode(" ", $buttons);
}
У вас есть маленькая «фабрика кнопок». И тогда у вас может быть другая общая функция c, которая занимается созданием наборов обработчиков событий кнопок:
function make_events($textname) {
$clicks = [];
$clicks[] = "document.getElementById('lecture{$textname}').onclick = doLecture('{$textname}');";
$clicks[] = "document.getElementById('pause{$textname}').onclick = doPause('{$textname}');";
$clicks[] = "document.getElementById('reprendre{$textname}').onclick = doReprendre('{$textname}');";
$clicks[] = "document.getElementById('arret{$textname}').onclick = doArret('{$textname}');";
return implode("\n", $clicks);
}
Это даст вам код JS для создания щелчков по заданному тексту. Теперь все, что вам нужно сделать, это собрать все вместе примерно так (снова с PHP):
$texts = ['Objectif', 'Subjectif', 'Reflectif', 'Asterix', 'Obelix'];
$buttons = [];
$events = [];
foreach($texts as $text) {
$buttons[$text] = make_buttons($text);
$events[$text] = make_events($text);
}
// If you want to flatten the $buttons array into a string,
// do this; and put $buttons to wherever all the buttons go
$buttons = implode("\n", $buttons);
// or otherwise, you can get a particular text's buttons like this:
echo "<div>Voici les buttons pour text Reflectif: {$buttons['Reflectif']}</div>";
// and put the events where your JS is, after the generic "doStuff()" functions
$events = implode("\n", $events);
С помощью описанных выше мер вы можете избавить себя от множества ненужных повторений. Подведем итоги:
- Очистите ваши явные JS функции до generi c функций (с аргументом), которые могут быть присвоены событиям onclick;
- Создайте PHP функции, которые генерируют кнопки и обработчики событий.
- L oop через ваши текстовые имена для данной страницы, используя эти функции; и поместите HTML и JS на свои места.
- Потратьте больше времени на размышления и изучение того, как абстрактные и повторно использовать ваш код.
Конечно, есть другие способы справиться с этим. Например, вы можете создать больше с помощью JS только на стороне клиента. Поскольку вы только начинаете программировать, это скорее простой и образовательный рефакторинг; не последнее слово в гладкости и оптимизации; но это должно сделать вашу жизнь немного проще. Удачных домашних заданий, дайте нам знать, как развивается ваш код! =(^o^)=