是否可以使用單個 JavaScript 代碼（借助 PHP 或其他內容）來讀取所有不同的文本，而不是像我當前的代碼那樣為每個要讀取的文本使用一個代碼？在此示例中，只有 4 篇文本需要閱讀，但我的一個網頁包含大約 130 篇文本。以下是 4 個 PHP 不同頁面中的 HTML 代碼（我使用 include php 在需要的地方添加這些按鈕）：<div class="read"><button id="lectureObjectif">écoutez</button> <button id="pauseObjectif">Pause</button> <button id="reprendreObjectif">Reprendre</button> <button id="arretObjectif">Arrêtter</button></div><div class="read"><button id="lecturePourquoi">écoutez</button> <button id="pausePourquoi">Pause</button> <button id="reprendrePourquoi">Reprendre</button> <button id="arretPourquoi">Arrêtter</button></div><div class="read"><button id="lectureNouvelles">écoutez</button> <button id="pauseNouvelles">Pause</button> <button id="reprendreNouvelles">Reprendre</button> <button id="arretNouvelles">Arrêtter</button></div><div class="read"><button id="lectureDissonance">écoutez</button> <button id="pauseDissonance">Pause</button> <button id="reprendreDissonance">Reprendre</button> <button id="arretDissonance">Arrêtter</button></div>這是一頁上的 JavasCript 代碼（我不想使用第三方 JavaScript）。我是編程新手，對于 JavaScript 也很新手。
3 回答
慕雪6442864
TA貢獻1812條經驗 獲得超5個贊
我終于成功讓它工作了（除了我的手機瀏覽器）。
我不得不替換這段代碼：
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);
}
通過這段代碼：
function make_events( $textname ) {
$clicks = [];
$clicks[] = "document.getElementById('lecture{$textname}').onclick = function(){doLecture('{$textname}');};";
$clicks[] = "document.getElementById('pause{$textname}').onclick = function(){doPause('{$textname}');};";
$clicks[] = "document.getElementById('reprendre{$textname}').onclick = function(){doReprendre('{$textname}');};";
$clicks[] = "document.getElementById('arret{$textname}').onclick = function(){doArret('{$textname}');};";
return implode( "\n", $clicks );
}
再次感謝 Markus AO 的幫助。
但是，同樣，這在我的手機瀏覽器中不起作用（或無法正常工作）。例如，在某些瀏覽器中，我可以說出第一個文本，然后停止它，但其他文本不可播放。對于所有瀏覽器，暫停和恢復根本不起作用。
12345678_0001
TA貢獻1802條經驗 獲得超5個贊
我現在的處境是：事情已經開始成形，但閱讀卻沒有發生。
在本練習中，我僅使用一個 PHP 文件：
<body>
<?php
// "id"s of the "div"s to be spoken
$texts = ['Objectif', 'Pourquoi'];
$buttons = [];
$events = [];
foreach($texts as $text) {
$buttons[$text] = make_buttons($text);
$events[$text] = make_events($text);
}
function make_buttons($textname) {
$buttons = [];
$buttons[] = '<button id="lecture' . $textname . '">écouter</button>';
$buttons[] = '<button id="pause' . $textname . '">Pause</button>';
$buttons[] = '<button id="reprendre' . $textname . '">Reprendre</button>';
$buttons[] = '<button id="arret' . $textname . '">Arrêtter</button>';
return implode(" ", $buttons);
}
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);
}
?>
<?php // Show buttons for the div with the id Objectif to be spoken
echo "<div>{$buttons['Objectif']}</div>";?>
<!-- The div (with the Objectif id) to be spoken -->
<div id="Objectif" class="moi-wrap-text">
<p>L'objectif de ce site est important. </p>
</div>
<?php // Show buttons for the div with the id Pourquoi to be spoken
echo "<div>{$buttons['Pourquoi']}</div>";?>
<!-- The div (with the Pourquoi id) to be spoken -->
<div id="Pourquoi" class="moi-wrap-text">
<p>Pourquoi est-il important de savoir?</p>
</div>
<!-- External JavaScript file -->
<script src="scrypte.js" defer></script>
</body>
這是我的 JavaScript 文件
// Function for Speak
function doLecture(textName) {
/* Removes all utterances from the utterance queue and
if an utterance is currently being spoken, speaking will stop */
speechSynthesis.cancel();
// instancier un objet d'énonciation
let parole = new SpeechSynthesisUtterance();
parole.lang = 'fr-Fr'; // language, default is 'en-US'
parole.pitch = 1; // 0 à 2 = hauteur
parole.rate = 1.3; // 0.1 à 10 = vitesse
parole.volume = 1; // 0 à 1 = volume
// Get the DOM object
parole.text = document.getElementById(textName).textContent;
// Speak
speechSynthesis.speak(parole);
}
// Function for Pause
function doPause(textName) {
// instancier un objet d'énonciation
let parole = new SpeechSynthesisUtterance();
// Get the DOM object
parole.text = document.getElementById(textName).textContent;
// Pause speaking
speechSynthesis.pause(parole);
}
// Function for Resume
function doReprendre(textName) {
// instancier un objet d'énonciation
let parole = new SpeechSynthesisUtterance();
// Get the DOM object
parole.text = document.getElementById(textName).textContent;
// Resume speaking
speechSynthesis.resume(parole);
}
// Function for Stop
function doArret(textName) {
// instancier un objet d'énonciation
let parole = new SpeechSynthesisUtterance();
// Get the DOM object
parole.text = document.getElementById(textName).textContent;
// Stop speaking
speechSynthesis.stop(parole);
}
$events = implode("\n", $events);
白板的微信
TA貢獻1883條經驗 獲得超3個贊
是的，這是可能的：通過認真重構你的顯式代碼。基本上，你需要抽象，即。根據您確定的常見模式生成變體。我不會為您編寫所有代碼，但是這里有一個帶有大量示例的演練。
首先，我們把代碼拆開；僅查看許多重復中的一個。下面，我們對單個文本的必要代碼進行采樣，并將文本名稱替換為占位符，{{ 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 函數包含不必要的顯式信息（“TEXTNAME”）。這使得它們不可重復使用。如果您只有一兩個固定的實現，那么這樣做就可以了；但你有很多東西，并且你想輕松更新。
現在，函數的一個很酷的事情是：它們可以接受限定其操作或返回值的參數，從而允許您針對任意數量的變體情況重復使用相同的代碼。假設您執行了以下操作（例如，您將對其余函數執行類似的“概括”）：
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);
}
然后，我們有一個通用的暫停動作函數，它將文本的名稱/標識符作為參數，它可以應用于任意數量的情況（下面的示例遵循您的舊代碼）：
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);
}
你的小“紐扣工廠”就在那里。然后你可以有另一個通用函數來處理按鈕事件處理程序集：
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 函數清理為可以分配給 onclick-events 的通用函數（帶參數）；
創建生成按鈕和事件處理程序的 PHP 函數。
使用這些函數循環遍歷給定頁面的文本名稱；并將 HTML 和 JS 放在它們所屬的位置。
花更多時間思考和學習如何抽象和重用代碼。
當然還有其他方法可以處理這個問題。例如，您可以僅在客戶端使用 JS 生成更多內容。由于您剛剛開始編程，因此這更像是一個簡單且具有教育意義的重構；圓滑和優化并不是最終的定論；但它應該會讓你的生活變得更加輕松?？鞓返淖鳂I，讓我們知道你的代碼是如何演變的！=(^o^)=
- 3 回答
- 0 關注
- 199 瀏覽
添加回答
舉報
0/150
提交
取消