こんな事を実装しちまったので、おそるおそる報告します：
JavaScriptの骨組みに、ページの内容によって異なるパーツをPHPで突っ込んで、HTMLのbodyの閉じタグ手前にベタ貼りしました。
何をしたのか
最終的なWEBページのソースは、たとえばこんな仕上がりになります。(簡略化)(ちゃんと動きます)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>入力テスト</title>
</head>
<body>
<div id="field" style="width:50%;min-height:30px;border:1px solid #666;margin:20px auto;word-wrap:break-word;"></div>
<script>//main-js.php
var field = document.getElementById("field");
document.onkeydown = function(event){
var key = event.key;
switch(key){
//a→
case "a":
field.textContent = "";
break;
//a//
default:
//default→
field.textContent += key;
//default//
}
}
document.onkeyup = function(event){
var key = event.key;
switch(key){
//a→
case "a":
field.textContent = "aaaaaaaa!!!!";
break;
//a//
}
}
</script>
</body>
</html>
作り方
まずJavaScriptの開発は、上記のような一枚ペラで行います。
後からPHPへ切り出す部分には、コメントで目印を付けておきます。
動作確認ができたら、コメントを目印にしてPHPへ切り出し、必要な条件分岐を書きます。(今回のサンプルは分岐ナシですが)
元のJavaScriptは、切り出した跡地にinclude文を置きます。
すると、こんな一式が出来上がります▼
<!-- sample.php -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>入力テスト</title>
</head>
<body>
<div id="field" style="width:50%;min-height:30px;border:1px solid #666;margin:20px auto;word-wrap:break-word;"></div>
<?php include('main-js.php'); ?>
</body>
</html>
<script>//main-js.php
var field = document.getElementById("field");
document.onkeydown = function(event){
var key = event.key;
switch(key){
<?php include('a-js.php'); ?>
default:
<?php include('default-js.php'); ?>
}
}
document.onkeyup = function(event){
var key = event.key;
switch(key){
<?php include('up-a-js.php'); ?>
}
}
</script>
/* a-js.php */
//a→
case "a":
field.textContent = "";
break;
//a//
/* default-js.php */
//default→
field.textContent += key;
//default//
/* up-a-js.php */
//a→
case "a":
field.textContent = "aaaaaaaa!!!!";
//a//
新しいパターンを作る・追加するときは、PHPで出力したものをコピペして、下敷きにするとやりやすいです。
こんなことをした理由
分かる人は、何やってんのこいつ、とお思いだと拝察します。
JavaScriptならJavaScriptで、ふつーに関数内で関数呼び出せばいいやん、と。
条件分岐でも何でも使えばいいじゃないか、と。
なんでわざわざPHPで繋げるのか理解できないと。
テキストエディタで編集する時も見にくいし。
おっしゃる通り。
使いどころによっては、私も普通に関数内で関数を呼び出します。
設定画面の開け閉めとか、画像の表示切り替えとか。
速度を出したい！
問題は、キー入力を受け取って反応を返す部分です。タイピング練習サイトなんで。
この部分の処理時間を、できる限り縮めたいと思ったんです。
javascriptの動作が遅くなる要因は、たとえば関数呼び出しをしたり、呼び出す相手がグローバル変数やオブジェクトだったり・・・と色々あるようです。
処理時間といっても、私の環境で動かす分には、せいぜい長くて1ミリ秒。(console.timeで計った) シフトキーの反応ゆとりを30～50ミリ秒ほど見ているので、この数字から見れば誤差程度です。
でも、サイトには色々な環境の人が来ますから、中には無視しがたいほど処理時間がかかることもあるかもしれません。
あとは、完全に私の理解力の問題ですが・・・
タイピング中の処理は、感覚的にも瞬間のできごとです。
だからその中で、あっちを参照してこっちのフラグ見て、と行ったり来たりしていると、理解が追いつかなくなってきます。
ベターっと書いてある方が、感覚と一致します。(とはいえ、これは副次的なもので、主な理由はやはり「処理時間をできるだけ縮めたい！」です)
落としどころが「PHPで貼る」だった
入力モードの違いや、タイマーの動作によって分岐を作ると、分岐だらけ・関数内関数だらけのコードになってきます。
しかも、特定のモードでは、特定の分岐しか使わなかったりします。
一方で、骨組みの部分は全モード共通なので、モードごとにスクリプトを完全に分けると、今度はメンテナンスが面倒になります。(ひとつの変更に対して、あちこちのファイルを直すことになります)
で、javascriptをPHPで組み合わせて貼る、が落としどころになりました。
これなら今の私の頭で、理解が追いつきます。
実際のメンテナンス性がどれほどかは、忘れた頃のお楽しみです。
忘れた頃に改造した結果▼
コメント