読者です 読者をやめる 読者になる 読者になる

うならぼ

どうも。

ツイートをまとめてテキスト化するUserScript、もしくはjQuery風にDOMAPIを拡張した話

自分のメモ帳にツイートを引用したい、けど一応出典がわかるようにユーザー名とIDは残したい、で連ツイまとめるの面倒、ということで作りました。

gist.github.com

切り取り線botで試すとこんな感じ。

f:id:unarist:20160515011115p:plain

拡張したもの

基本的な方針として、コンテナオブジェクトを作ったりすることはせず、素材の味を生かす方向で。イベント周りもthisどうのとか戻り値どうのとかせず、addEventListenerそのまま。まあ今回はそれで十分だったというのも大きいですが。

  • $() 相当の関数:fragment(), $, $$
    こういう使い方だとJSで組み立てるのは実装も使う側も面倒なので、innerHtmlに丸投げするのが手軽ですね。$と$$はChromeのCommandLineAPIの真似。
  • 短縮:find, findAll
    これはquerySelectorとquerySelectorAllをそのままコピーしてます。
  • 短縮+メソッドチェイン化:on
    他にもあるとおもってchain関数を作ったのにここでしか使ってない。
  • メソッド化:text、val
  • 配列のあれこれ:map、filter等々
    全部・・・は流石にあれなのでピックアップして移植しましたが、実際に使ったのはmapだけ。ちなみにCommandLineAPIだとNodeListじゃなくてただの配列が返ってくるので普通に使えます。
  • 新規実装:hide/show
    これはjQuery本体でもv3でテコ入れが入ったように、最初から消えてる要素のshowをサポートすると面倒なので、あくまで隠して戻すという形に。元のdisplay値の置き場に悩んだ結果、showを動的生成することにしました。

DocumentFragmentやNodeListに対しての一括操作はちょっと迷ったので保留。あれは確かに便利だったけど、一要素なら直接Element触ればいいし。

結果として本体10行弱のために30行ほどかけて拡張した感じになりました。

プロトタイプ汚染がー

はい。C#の拡張メソッドみたいにusingできるといいんですけどね。

といいつつ今になってシンボルの存在を思い出した。気が向いたらこっちに書き直すかも。

qiita.com