Mithril.js でちょっとはまった(いや、かなり)

Mithril.jsを始めてみて、早速というか、すごく初歩的な事かもしれないけど

バーチャルDOMという事での罠にはまりました。

バーチャルDOMはバーチャルな訳ですよ。

バーチャル

ということは、実際にリアルにはそこに無いわけで

何を言っているかわからないと思うが

もう少し具体例を出すと

Mithril.jsで動的にul・liのリスト構造を表示させる。

このul・liの各アイテムは、ドラッグ&ドロップ出来るようにする。

ドラッグ&ドロップは、sortable.jsという感じの別のjsライブラリを使う。

といった感じでリストを出力したいと思います。

このリストをドラッグ&ドロップにしたいときに、最初は上記のように

m.mountの行の下に置いてみました。

この場合、たまに動くけど、たまに動かないといった微妙な挙動になり、結構悩みました。

で、よくよく考えたら、m.mountをした時点でバーチャルがギリギリリアルになっていないのではないか?

という事でした。

たぶんこれはビンゴで、実際どのように解決したのかというと

mというメソッドの第2パラメータにconfigアトリビュートを追加します。

configというのは、リアルDOMの描画が終わった後に処理をさせたい内容を定義できる特殊なアトリビュートという事のようです。

先ほどのコードを、このような形に修正することで、

$(‘#sortedList’)が実際に描画された後に、sortableLoadというメソッドが呼び出されるようになります。

めでたし!

Mithril.js 始めました

Mithril.js はじめました。

https://lhorie.github.io/mithril/

今回、社内で使う管理画面の一部に、動的な制御入れたいな~という要望があり

その要望に対して自前で作ると

データの流れとかを考えたときにかなりややこしくなりそうだなと思い

それならクライアントサイドのjavascriptフレームワークを使おう、という事で

React.jsとMithril.jsで比較検討しました。

比較内容としては、他のサイトでも出ていると思うので、それはググっていただくとして

今回自分がMithril.jsを選んだ理由

それは学習コストが低い!

これにつきると思います。

どう低いのか?というと

mithril-doc

覚えるメソッドがこれだけです。

サンプルコードそのままですが

これだけで、bodyに動的にレンダリングしてくれます。

m.componentの書き方とか、非同期でリクエスト取りに行ったりするであるとか

書き方として覚えなければいけない部分はありますが、それでも

他のフレームワークと比べて簡単に導入できました。

次回以降、使ってみた感想というか、はまった場所、解決方法etcなどを順次上げていけたらと思います。

JavaScriptで、imgタグのwidthとオリジナルの画像のwidthを簡単に取得する方法

JavaScriptでフツウに画像サイズを取得する場合

<img src=”https://gendosu.jp/wp-content/themes/twentyten/images/headers/cherryblossoms.jpg” width=”470″ height=”99″ id=”image”>

といった感じですが、オリジナルの画像サイズは940×198なので、そのサイズがとりたい。

という場合ですが

という感じで取得出来ます。

いまさらながら、古いJQuery(1.8以前)で$.browser.msieとかやっていた人に贈る

1.8以前のJQueryでは$.browser.msieという判定でIEとそれ以外の処理を分けていたりしました。

これがJQuery1.9以降は出来なくなります。

ということで、JQuery1.9以降でこのような判定に近い事が出来るかどうかを考えてみます。

まず、JQuery1.9では、browserが削除されます。

それにかわって、supportを使えという感じに書かれています。

このsupportというのは、ブラウザ毎に分けるのでは無く、ブラウザが対応している機能ごと、実装ごとに判定しようというメソッドのようです。

たとえば、$.support.opacityは、opacityによる透明度を指定する機能を実装しているブラウザであればtrueが返ってきます。

このsupportの判定機能を組み合わせて、MSIEであるかを判定してみます。

おおよそ、MSIEを区別する必要性がある場合、IE6IE7IE8を対象にすると思うので

この場合を想定します。

このIE6IE7IE8は、opacityが実装されていないので、この値で判定します。

と言う判定は

で代用可能かと思われます。

ページで画像を延滞ロードさせる

画像が多いサイトなどで、ローディング時間が長くて困る、なんて言う時は

画像の延滞ロードです。

最近のAmazonとか、スクロールして画像が表示される時に一瞬ローディング画像が出たりしてるやつです。

http://www.appelsiini.net/projects/lazyload

このプラグインを使うと、簡単に実現出来ます。

必要な物は、jQuaryとこのプラグイン。

あとは、延滞ロードしたい画像のタグにclass=”lazy”を追加します。
[javascript]$(“img.lazy”).lazyload();[/javascript]
という処理をどこかに置きます。

以上です。