眠い
今日はjsのUIに関する事で思った事をつらつらと。
思った事
- HTMLとjsを分離しよう
- CSSとjsを分離しよう
HTMLとjsを分離しよう
動的にHTMLを生成するjsを普通に書いてると、どうしてもHTMLと密接に関連してしまってごちゃっとしたコードになっちゃいます。
という事で、HTMLとjsをどうにかして分離しましょー。
HTML
js
new Class("geso");
こんな感じで、Classがdivタグの中に新しいタグをドバっと注入するような形式にします。
こうするとHTMLとjsが名前で結びつくようになって、分離しやすいと思います。
divタグ、spanタグ、articleタグのような、何もしないタグの中にタグを生成すべきだと思います。
例えば、selectタグをHTMLに書いて、Classでoptionタグを生成するような仕様があったとします。
これをリスト(olタグ、liタグとか)に変更したくなった場合、HTMLとjsを両方書き換える必要があるからです。
変更に強くするために、divタグをHTMLに書き、selectタグとoptionタグはjsで生成する、という方法を取った方が良いでしょう。
ちなみにこれはGoogleのjsライブラリがこんな感じの構造してたんで、参考にしてみました。
CSSとjsを分離しよう
さっき自家製のたんぶらークライアントのjsを見てたら目から鱗みたいな事してたので、ここでごしょーかい。
数ヶ月前の自分は別人だなぁ。
まぁ何をしてたかって、jsで生成するタグにclass属性を追加してたっていう、ただそれだけの事なのですが。
CSSでカスタマイズしたい所だけにclass属性を置いておけば、生成するタグの構造が変わってもCSSを適用しやすくなる、と。
なんかこう、最近class属性の存在を忘れやすいのでこれを機会に色々使い方を見極めようと思います、はい。
眠い
ねます。おやすみなさい
