00:06
神経質やせ男です。
今回は、PiWebView開発で避けて通れないテーマ、
HTMLからJavaScriptを切り出す方法についてお話しします。
AIにPiWebViewアプリを作らせると、
Pythonの中にHTML、CSS、JavaScriptが全部盛りで出てきますよね。
動くのはいいんですが、この状態だととにかく保守が辛い。
ということで、前回はPythonからHTMLを分離しました。
そして今回は第二段階。
HTMLからJavaScriptを外出し、ここに挑戦しました。
結論から言うと、ポイントは大きく二つだけです。
まず一つ目、HTMLのヘッダにあるこの部分。
以前はスクリプトタグの中にJavaScriptをベタ書きしていました。
これを外部ファイルに出して、相対パスで読み込ませます。
ここで出てくるDefer、これはHTMLの読み込みを邪魔せず、
後からJavaScriptを実行する指定。
体感ですが表示が安定します。
そして二つ目、ここが一番ハマりやすいポイントです。
ボタンの書き方。
分割前はHTMLにオンクリックが書いてありました。
これはHTML内にJavaScriptを書く前提の書き方。
このまま外部JSに分けると、かなりの確率で動きません。
そこで修正は以下になります。
設定を更新、オンクリックを削除してIDだけHTML側に残します。
そして処理の本体はJavaScript側でイベント登録。
ドキュメントアットイベントリスナー、ドムコンテントローデット、
コンストボタン、ドキュメントゲットエレメントバイID、セーブボタン。
イフボタン、ボタンアットイベントリスナー、クリックセーブコンフィグ。
つまり、押されたら何をするかHTMLではなくJSで管理する。
これが分割時の基本ルールです。
ここさえ押さえれば他のロジック部分はほぼ触らなくてOK。
正直もっと大工事になるかと確保していましたが、やってみると意外とシンプルでした。
全部もリコードからの卒業。
着実に進んでいます。
焦らずでも確実に。
ということで次回は箇所分タイマーを自分使用についてお話しする予定です。
ご静聴ありがとうございました。