JavaScriptのコーディングスタイルが定まらない!!

最近C++にどっぷり浸かっており、JavaScript・PHPに違和感を覚える様になりました。C++等はコンパイラ自体がスクリプトより厳格な方で、言ってしまえばある程度コーディングの進め方って絞られて来るんですよね。 そもそもC/C++の`.h`の存在が格段とソースの把握に役立っていると言えるでしょう。 まず何から書けばいいのか、どの様な構造にすべきかが最近定まっておらず書き始める前に苦労してしまうのです。 下記は私が一番最初に記述するソースです。 ``` window.addEventListener('load', ()=>{ let FormEditor = new Editor("textarea"); }); ``` 結局の所DOMが読み込めないと意味が無いのでイベントリスナーで読み込み後に処理を開始しています。ここからが問題で、このイベントリスナー内にソースを直打ちすると、個別の処理が混ざって何がなんだかな状態になる。 やりたい事をズラーっと書いてもいいですが、後から読み返すのに苦労するので、今は全てオブジェクトにしています。 `let FormEditor = new Editor("textarea");`例としてこれですが、他にも機能別にこの様にオブジェクトを宣言して使う形を取りました。 今までイベントリスナー内で記述してた物は全てコンストラクタに記述し、各機能はメソッドとして定義する様にしました。 全てクラス内で完結するのですが、この方が個人的には見やすいかな?? ``` class Editor{ constructor(Selector){ this._publicEditorElement = document.querySelector(Selector); //ボタンのイベント登録 let buttonElement = document.querySelectorAll("#Toolbar .left .groupbutton button"); for(let Object of buttonElement){ switch (Object.dataset.method) { case "CodeInsertion": //文字列挿入メソッド Object.addEventListener('click', ()=>{ this.clickEventButton_CodeInsertion(Object); }); break; case "TableCode": //テーブル挿入メソッド Object.addEventListener('click', ()=>{ this.clickEventButton_TableCode(); }); break; } //--SWITCH END } //--FOR END } /* -- カーソルの位置を取得する -- * 戻り値 : 構造体 * * カーソルの現在位置を把握する為、 * カーソル前後の文字列を分割して構造体で返します。 */ get EDITOR_CURSOR_POSITION(){ let value = this._publicEditorElement.value; let length = value.length; let before = value.substr(0, this._publicEditorElement.selectionStart); let after = value.substr(this._publicEditorElement.selectionStart, length); //戻り値に構造体を渡す return { beforeCode : before, afterCode : after }; } /* -- エディタ内に指定コードを挿入 -- * 第一引数 : 挿入する文字列 * 第二引数 : EDITOR_CURSOR_POSITIONの構造体 */ CodeInsertion(code, Position){ this._publicEditorElement.value = Position.beforeCode + code + Position.afterCode; } /* -- イベントハンドラ -- */ clickEventButton_CodeInsertion(Object){ let value = Object.value; switch (value) { case "image": this.CodeInsertion("\n", this.EDITOR_CURSOR_POSITION); break; case "link": this.CodeInsertion("\n[text](url)", this.EDITOR_CURSOR_POSITION); break; case "quote": this.CodeInsertion("\r\n>\r\n>\r\n>\r\n", this.EDITOR_CURSOR_POSITION); break; } } } ```