jQuery読み込み前にjQueryを書きたい

Posted on
javascript jQuery

事象

テンプレートエンジンを使用したWebアプリケーションの構築を複数人でやっていると、大体骨組みはリードエンジニアが作成して、そこにincludeするviewを各エンジニアが作成するという流れを採用すると思う。

各開発者が作成するviewも雛形があって、「ここにjavascriptを書いてね」とか「ここにスタイルを書いてね」とか、そういう指定がある。

Twigなら、ベースレイアウトが以下のようになっていて

{# layout.twig #}
<head>
{# ヘッダとか色々 #}
{% if block("style") is defined %}{{ block('style') }}{% endif %}
</head>
{{ block('content') }}
<script src="./path/to/jquery.js"></script>
{{ block('script') }}

各開発者は、以下のようにviewを作成する。

{# form.twig #}
{% extends 'layout' %}

{% block content %}
<form>
...
</form>
{% endblock %}

{% block style %}
form.text_form {
    color: red;
    //...
}
{% endblock %}

{% block style %}
<script>
    function func() {
        $forms = $('.form');
        //...
    }
</script>
{% endblock %}

このルールに則った(=layout.twigを継承した)viewを作成するには差し支えないが、例えば、色々なところでincludeできるパーツ(モーダルウィンドウとか)を作成したい場合、不都合が生じる。

最近は、レンダリングブロックを回避するために、jsのライブラリは最後に読み込むプロジェクトが多いと思う。

layout.twigを継承した場合、きちんとjsを書くためのblockが定義されており、そこに記述すればjquery読み込み後に挿入してくれるため、特に問題無くjqueryを使用することが可能である。

しかし、layout.twigを継承するパーツをさらに継承したパーツを作る場合

layout.twig←各開発者が作成したview←作成する共通パーツ

という順になるため、共通パーツはすべてlayout.twigでいうところのcontent blockにしか入れることができない。

すると、jqueryの文法($(‘hogehoge’)とか)を使用した時点でエラーが吐かれる。

解決方法

「どうすればいいですか」とリードエンジニアに聞いたら一瞬で回答が返ってきた。

作成した共通パーツのJS記述を下記のようにする。

<script>
(function () {
    var func = function () {
        // ここに実行したい処理
    }
    if (typeof($) === 'undefined') {
        window.addEventListener('load', func, false);
    } else {
        func();
    }
})();

やってることは単純で、jquery読み込み後に実行してほしいコードをfunc変数に関数として格納しといて、ページ読み込み完了後(=jquery読み込み完了後)に実行するようにイベントリスナーを設定しておく。

あとはloadイベントが発火したらそのスクリプトが実行されるね という感じ。