アプリ内でJavascriptで実装する機能が増えてきたので、適用するjsファイルを整理しようとしていますが、どのような考え方に基づいてjsファイルを分割・適用するのが、運用上好ましいか、アドバイスをいただけないでしょうか。
案1：機能毎にJSファイルを分割
・イベントA及びBのときに処理aを実行する ・・・aaa.js
・イベントA及びBのときに処理bを実行する ・・・bbb.js
案2：イベント毎にJSファイルを分割
・イベントAのときに、処理a及びbを実行する ・・・AAA.js
・イベントBのときに、処理a及びbを実行する ・・・BBB.js
他によりよい方法がありましたら、アドバイスいただけると幸いです。
**nagayama**さん
私も他の方がどのようにJSファイルの構成を考えているのか気になります。
個人的には、問題が発生したときに処理を追いやすい/切り分けしやすい構成、機能を追加・修正しやすい構成にすることを考えると運用するのが楽になると思います。
私の場合、案1と案2のハイブリッドパターンが多いですね。
・処理の起点となるJS ・・・ main.js
すべてのイベントはここに集約させています。
細々とした機能もここに記載することが多いです。
・共通処理用のJS ・・・ common.js
使い回せるような機能は共通の関数群として1ファイルにまとめています。
・量の多い処理用JS ・・・ functionN.js
一連の処理で何百行以上になるようなものは、それだけを1ファイルにしています。
(呼び出し元は基本的にmain.js)
main.jsの機能が多い場合は、機能用のJSファイルを新たに用意して外出しします。
機能用のJSファイルを「データに対する処理/デザインに対する処理」などで区分すれば、
「どこの処理を参照すべきか/どこに処理を追加すべきか」追いやすくなりそうです。
川端様
アドバイスありがとうございます。参考になります。
一度試してみようと思います。
川端様
お世話になります。
上記アドバイスの場合、JSファイル(main.js、common.js、functionN.js)の適用順番は、どうなるでしょうか。
初歩的な質問で申し訳ありません。
nagayama さん
こんばんば、川崎です。
main.js、common.js、functionN.jsの構成ですと、
common.js
functionN.js
main.js
の順番になります。
1は2,3それぞれから呼ばれる可能性があり、2は3から呼ばれ、3は他から呼ばれることはないので、上記の並びになります。
例えば、ボタンを新しく作成する処理をかく場合、それぞれ以下のようにプログラムを配置することが考えられます。
common.js ：ボタンのDOM要素を作成する処理(document.createElement(‘button’)など)
functionN.js：レコードの情報による分岐処理や、その中でボタンを作成する処理(1の処理を呼び出す)
main.js：レコードの詳細画面を開いた際のイベントハンドラを記載。
分岐があるなら2の処理を、分岐がないなら1の処理をハンドラ内に記載。
3の例えがあまりよろしくないかも知れませんが、参考になれば幸いです。
川崎様
ご丁寧にアドバイスいただき、ありがとうございます。
理解できました。
参考にさせていただきます。
このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。