趣味でプログラミングをしているのですが、以下の点が分からないので教えてください。
- JavaScriptの書き始め方
- 大量の要素管理方法
JavaScriptの書き始め方
JavaScriptでは基本的にDOM操作をする為、ウィンドウのイベントリスナーを設定します。
window.addEventListener('load', ()=>{ //!script });
ただ、ここ(!script)にやたい事をズラズラ書いてしまうと後で読み返す時に苦労するので、私はクラスを使って、主な処理をクラス内で記述しています。
クラス内であれば、インスタンス時にDOMが取れたら順序関係なくプロパティ・メソッドの定義が出来る為です。
これはあくまでも私の考えで一般的にはどの様な方法で書き始めているのかが知りたいです。
大量の要素の管理方法
大量の要素を取得する際、の管理方法が知りたいです。
クラスコンストラクタ内で以下の様にしていました。
class MyClass{ constructor(){ this.element = document.getElementById("postText"); //以下十個以上似た記述 } }
個人的な感想これだと、何がなんだよく分からなくなって来ます。
そこで、全てを一纏めにしようと感がえ次の様に構造化しました。
class MyClass{ constructor(){ this._publicElements = { 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
- 確かに読めば分かるけど、視認性が悪すぎる
この様な問題に直面しました。皆さんは大小の規模に限らずこの様な場合どの様に管理をしますか?
回答2件
あなたの回答
tips
プレビュー