おさらい
Re: 「はてブのフッターを小さく固定にする」をグリモンにしてみたでid:rikuoさんに添削してもらったグリモンをおさらいする。
textContent
最初に目に付いたのはtextContentでボタンのテキストを設定してる部分。
elmSPAN.textContent = btn_open;
自分はinnerHTMLでやってたんだけど、グリモンの時点でFirefox限定なんだから、innerHTMLよりもテキストノードとして代入出来るtextContentにすべきですよね。
GM_addStyle関数
今回のキモの部分。一つ一つスタイルを設定してやるのではなく、この関数使って一度にやる方が速く出来ますね。ちなみにGM_〜ってGreasemonkeyのAPI関数だったんですね。*1
//スタイルの設定 GM_addStyle(<><![CDATA[ #footer{ position: fixed; left: auto; bottom: 0px; z-index: 100; border-top-width: 3px; height: 2.5em; opacity: 0.8; /* 透過したくない時はここをコメントアウト */ } #HB_footerbtn{ position: fixed; bottom: 0px; width: 99%; height: 1.5em; z-index: 101; text-align: right; margin: 0; /* 継承があるので追加 */ } #HB_footerbtn span{ cursor: pointer; color: #00f; } ]]></>);
CDATAセクション*2使えば、まんまcssな記述が出来、可読性も高くていいですね！あと、たまにボタンの位置が上下してたのは、marginが継承されてたからだったんですね。気付いてた*3んですが、原因がよくわかってなかったんで助かりました。
余計な処理はしない
今回はオンかオフしかないので、その判定を1回だけにまとめた方が効率が良いのでは？と考えました。
ボタンのオンオフとフッターのスタイルは連動してる訳だし、▲か▼かを判定するだけで充分ですね。
this
ボタンに割り当ててる関数内で、そのボタン自体を自分はe.target
e.target.innerHTML = t;
で取得してたんですが、イベントハンドラに割り当てられた関数内でthis
this.textContent = t;
とすれば関数の呼び出し元を取得出来るんですね。「.」の数も減らせられるし、極々微少なんだろうけど、こういうのが高速化に繋がるんだろうなぁ。
という事で
件のエントリーが自身初のマルチブクマエントリーにもなったしｗｗ色々教えてもらえて勉強になりました。
あらためて、id:rikuoさん、ありがとうございました！！( ^ω^)
