コンパイラかく語りき

import { Fun } from 'programming'

jQuery脱却の第一歩 doc-readyをつかってみる

クライアントのJSを書くとき、DOMのロードを待つ必要がある時があります。そんなとき、jQueryなら、以下のように書きますね。

$(document).ready(function() {
  // your code comes here...
})

ただ、JSの小さなモジュールを作るためにいちいちjQueryを使うのかは悩みどころです。 DOMの取得やイベントの付与には、document.getElementByIdやaddEventListenerで事足りてしまうことがあります。

DOMのロード完了待機にも、jQuery以外の方法を使ってみましょう。

doc-ready

npmのパッケージにdoc-readyというものがあります。今回はこれを使ってみます。

公式の説明によると、

Cross browser document ready helper. Supported by IE8+ and good browsers.

とのこと。IE8にも対応しているのが特徴のように見えます。

使い方

まずはdoc-readyをインストール。

$ npm i doc-ready --save

JSファイルで以下のように書きます。

// main.js
import docReady from 'doc-ready'

docReady(() => {
  // your code comes here...
}) 

内部処理

内部的には、以下のようなことを行っています。

  1. docReady.isReadyというプロパティを保持。以下の処理が用意されており、それぞれがisReadyをtrueに変更します。

    • document.readyState === ‘complete’
    • documentのDOMContentLoadedあるいは、readystatechangeイベントが発生する。
    • windowのloadイベントが発生する。
  2. isReady === trueならば、渡された関数(上の//your code comes here…部分)を実行。

また、IE8に対応するため、イベントのバインドにはeventieというパッケージのbindを利用しています。

ライブラリのソースコードこちらです。

これで、jQueryに頼らずにDOMのロード完了を待つことができます。 IE8に対応しない場合は、documentのDOMContentLoadedイベントを使えば良さそうです。