riot.util.xxxを使ってみる。

前置き

大袈裟なユーティリティライブラリを導入するまでもなく
かといって自分で作って参照ファイルを増やすまでもない時に、
しかもriot v3.xxを使ってる際に
riot内のユーティリティで済ましちゃえと言うときの
これから使ってみたい関数をご紹介します。
api仕様書
はこちらになります。
フレームワークをサポートするライブラリなので
安全重視がうかがえます。
一般的な開発時にはかゆい所に手は届きません。　
ちなみに現在の愛用ユーティリティライブラリは
Minified.jsです。
関数の量も多すぎず少なすぎずかゆいところに手が届き
何より、軽いです。
但し、どうやらriotとの相性が良くないようで
組み合わせると一部の関数が動作しない事がありました。

それはさておき本題です。
riotには内部的に利用しているユーティリティ関数があり
必要最小限の利用に留めるのであれば
いいかもと思い少し調べてみました。

1.dom操作

セレクタ

function riot.util.dom.$(selector, ctx)
function riot.util.dom.$$(selector, ctx)

第二引数で指定したdomを走査して選択します。
指定しなければ対象はdocumentオブジェクトになります。
指定対象が選択的なところが気に入りました。
また探す場所を限定すれば当然早いです。
※この関数は上記のapi仕様書に記載がありません。

var dom = riot.util.dom
dom.$('#test').value = "testValue"

みたいな使い方になるかと思います
でも値の設定、取得だけならrefsで事足りる気もしてきました・・・。

CSS

function riot.util.dom.toggleVisibility (dom, show)
表示、非表示の設定を切り替えます。
ただしやはりアニメーションを付けたくなるのが人の性か。

挿入

function riot.util.dom.mkEl (name)
createElementのショートカットです。
function riot.util.dom.setInnerHTML (container, html)
InnerHTMLへの設定に関するショートカットです。
ブラウザによってはsvgタグへの挿入がサポートされてません。

2.String系(miscに所属)

 function riot.util.misc.startsWith (str, value) 
 function riot.util.misc.toCamel (str)

名前で察して頂けると幸いです。

3.検証系

function riot.util.check.isBlank (value)
なんだかんだでこのシンプルなのが一番使う気がします。
isBlank,isEmptyなどnullチェックに類するものが
いろんなライブラリにありますが微妙に挙動が違ったりします。
が個人的に
「null or undefined or ''はtrueを返す」という仕様が
一番都合が良かったので使いそうです。

function riot.util.check.isString (value)
願わくばisNumの方が欲しかった。

4.misc

misc(miscellaneousの略)、雑多と言う意味だそうです。知らなかった・・・
なんて便利な言葉なんだ。これから一番使うのはこれかもしれない。
function riot.util.misc.each (list, fn)
指定したコールバック関数の引数に第一引数に渡した配列の要素を渡して繰り返し実行します。

function riot.util.misc.contains (array, item)
第一引数で指定した配列内に第二引数で指定した値があればtrueを返します（取得位置ではない）

すみません、
時間が来てしまいました。
そもそも本来の使われ方でないので仕方ないのですが
使用される状況によってはまったくこれでは足りません。
しかしelectron等でriot使ってて、ちょっとnullチェックしたい、
くらいにはつかえるかもしれません。
また使用する方によって他に使えるものもあると思いますので
良かったら以下の仕様書をご覧になってください。

api documentation for riot (v3.4.3)
※2017/6/25現在の最新v3.60のものではありません。