質問: { editorInputInterface : { textArea : document.getElementById("postText"), input : { postTitle : document.getElementById("postTitle"), postLabel : document.querySelector("input[name='post_label']"), postSeo : document.querySelector("input[name='post_seo_about']") } }, editorControlInterface : { ControlButton : { addImage : document.querySelector("#Toolbar .left button[value='image']"), addLink : document.querySelector("#Toolbar .left button[value='link']"), addTable : document.querySelector("#Toolbar .left button[value='table']"), addTableWidget : { widgetBody : document.querySelector("div.tableInWidget"), input : document.querySelectorAll("div.tableInWidget input"), button : document.querySelector("div.tableInWidget button") }, addQuote : document.querySelector("#Toolbar .left button[value='quote']") }, RequestButton : { public : document.querySelector("#Toolbar div.right button.article"), preview : document.querySelector("#Toolbar div.right button.preview"), save : document.querySelector("#Toolbar div.right button.save") } } }; } } ``` 確かに構造化されて分かりやすい??? な状況で、デメリットも見えて来ました。 * 参照する時軽く数十文字行く`this._publicElements.editorControlInterface.ControlButton.addLink` * 確かに読めば分かるけど、視認性が悪すぎる この様な問題に直面しました。皆さんは大小の規模に限らずこの様な場合どの様に管理をしますか?
回答: まず、`MyClass`のままなのが相当ダメです。イケてません。 貴方は玩具を整理しようとおもちゃ箱を買ってきて、 それにMyClassというラベルを貼って管理しようと思いますか? 普通の人間は入れるものを抽象化してラベル名を決定します。 例えばゲーム機でまとめるならゲーム機というラベルを貼りますよね。 やってないでしょ?すぐやりましょ。 もしこれが例題であってもやってください。 コードを書くというのはやることに名前を付けるという行為なので、練習であっても、いやだからこそ命名の練習が必須です。 > > 私はクラスを使って、主な処理をクラス内で記述しています。 > > > オブジェクト指向でよくあるクラスを使うとコード量が増えますが この増えたコード量をペイ出来るか否かがオブジェクト指向のとてもむずかしい所になります。 > > そこで、全てを一纏めにしようと感がえ次の様に構造化しました。 > > > オブジェクト指向初心者が陥るやつですね。 ポリモーフィズムとDIを覚えない限り、オブジェクト指向の良さは1ミリも引き出せませんので、 この両方は確実に学習してください。 私の書いたオブジェクト指向の記事が多少は参考になるでしょう。 分かりそうで分からない少し分かるオブジェクト指向プログラミング - Qiita 軽く解説しておくと、インスタンスは情報とメソッドをカラクリ人形です。 今回の例だとこのクラスはインスタンス化して使うことを想定していませんので、 プレーンなオブジェクトを生成したほうが良いです。 そしてオブジェクトとは微塵も関係ない所で解決できそうですね。 ちょっと作ってみましょうか。 ``` var nodeList = { posts: { title: "#postText", text: "#postText", label: "input[name='post_label']", seo: "input[name='post_seo_about']" }, controller: { image: "#Toolbar .left button[value='image']", link: "#Toolbar .left button[value='link']", table: "#Toolbar .left button[value='table']", widget: { body: "div.tableInWidget", input: "div.tableInWidget input", button: "div.tableInWidget button" }, quote: "#Toolbar .left button[value='quote']" }, requests: { public: "#Toolbar div.right button.article", preview: "#Toolbar div.right button.preview", save: "#Toolbar div.right button.save" } }; var node = function (path) { var name = path.split(".").reduce((obj, n) => obj != null ? obj[n] : "", nodeList); return name; // 本当はquerySelectorで包んで返したいのでこっちに変更してね // return document.querySelector(name); } console.log(node("controller.image")); // "#Toolbar .left button[value='image']" console.log(node("requests.public")); // "#Toolbar div.right button.article" console.log(node("controller.widget.input")); // "div.tableInWidget input" console.log(node("hoge.piko")); // "" window.addEventListener('load', ()=>{ // あとはやりたいことをこの中で記述する // 必要になったらこんな風に実行する // var input = node("controller.widget.input"); }); ``` ちょっと`node`関数の中身でイディオム使ってますが、 JavaScriptはnullやundefined値はプロパティを所持してないのでエラー回避の為に三項演算子使ってます。 また、文字列の`.`を元に再帰的にプロパティを読みに行く仕組みを作る為にreduce使ってます。