外部js・cssファイル動的読み込み

レスポンシブでmediaQueryによって読み込むjsを振り分けたい場合があります。
今回はajaxを使わずに、head内にscript・linkタグを生成して外部ファイル読み込みするスクリプトを作ってみました。
非同期ロードとなるため、プラグインなどは呼び出しタイミングに注意する必要があります。
ロードが完了してから実行させたい時などは、jqueryの$getScriptなどコールバックが使えるajaxを利用した方が確実かと思います。

下記コードはロード時のみ動作となります。
必要な場合は適宜、resizeイベントなど追加してください。

js

(function() {
    'use strict';
    var loadFiles = [];
    if (window.matchMedia('(max-width: 767px)').matches) {
        loadFiles = [
            '/css/hoge-sp.css',
            '/js/fuga-sp.js'
        ];
        injectFile();
    } else if (window.matchMedia('(min-width: 768px)').matches) {
        loadFiles = [
            '/css/hoge-pc.css',
            '/js/fuga-pc.js'
        ];
        injectFile();
    }

    function injectFile() {
        var tags = document.createDocumentFragment();
        for(var i=0; i<loadFiles.length; i++) {
            if(loadFiles[i].match(/\.css$/)) {
                var link  = document.createElement('link');
                link.rel  = 'stylesheet';
                link.href = loadFiles[i];
                tags.appendChild(link);
            } else if (loadFiles[i].match(/\.js$/)){
                var script = document.createElement('script');
                script.src = loadFiles[i];
                tags.appendChild(script);
            }
            document.getElementsByTagName('head')[0].appendChild(tags);
        }
    }
}).call(this);

以上、ありがとうございました。