javascript - head.js で依存関係を設定する

Question

依存関係のある JS ファイルを非同期的に読み込むために head.js を使い始めました。

API のドキュメントと例を見ると、JS ファイルにラベルを適用し、読み込まれたときにいくつかの条件を実行できることがわかります。ドキュメントの例を次に示します。

// same as above, but pass files in as an Array
head.load([
    { label1: "file1.js" }, 
    { label2: "file2.js" }], 
    function() {
    // do something
});

// Labels are usually used in conjuntion with: head.ready()
head.ready("label1", function() {
    // do something
});

つまり、基本的に、file1.js が読み込まれると、コードの 2 番目のブロック (クロージャー内) で何でも実行されます。

私がやりたかったのは、他のファイルがロードされたときに、より多くのファイルを (非同期で) ロードすることです..

例えば..

まず、jquery ファイルをロードします: jquery.min.ks
それが正常に読み込まれた後、DataTables ファイルを非同期で読み込みます: [ dataTables.searchHighlight.min.js, dataTables.conditionalPaging.js, jquery.dataTables.yadcf.js ]
その後、メインのアプリケーションファイルをロードします: [ myapp_core.js, myapp_whatever.js ]

head.js を使用して、私が今持っているコードを次に示します。正常に動作しているように見えますが、正しくないようです (他の関数内で head.load() をスローする必要があります)。

// Step #1
head.load(
    // First, load the main JS library
    [
        { jquery_core: "/include/plugins/jquery-1.11.3/jquery-1.11.3.min.js" },
        { jquery_ui: "/include/plugins/jquery-ui-1.10.4/ui/minified/jquery-ui.min.js" }
    ],
    function() {
        console.debug('Loaded jQuery library files, loading jQuery plugin files..');
        jquery_plugins();
    }
);


// Step #2
function jquery_plugins() {
    head.load([
            // Load all the jQuery plugin files
            "/include/plugins/bootstrap-3.2.0/js/bootstrap.min.js",

            "/include/plugins/select2/select2.js",
            "/include/plugins/bootstrap3-editable/js/bootstrap-editable.min.js",
            "/include/plugins/bootstrap3-editable/inputs-ext/address/address.js",
            "/include/plugins/bootstrap3-editable/inputs-ext/typeaheadjs/lib/typeahead.js",
            "/include/plugins/bootstrap3-editable/inputs-ext/typeaheadjs/typeaheadjs.js",
            "/include/plugins/bootstrap3-editable/inputs-ext/wysihtml5/wysihtml5.js",

            "/include/plugins/mustache/mustache.js",

            "/include/plugins/slimscroll/jquery.slimscroll.min.js",
            "/include/plugins/jquery-cookie/jquery.cookie.js",
            "/include/plugins/gritter/js/jquery.gritter.js",
            "/include/plugins/jquery-tooltipster-master/js/jquery.tooltipster.js",
            "/include/plugins/bootstrap-wizard/js/bwizard.js",
            "/include/js/apps.js",
            "/include/js/enhanced-select.jquery.min.js",
            "/include/js/jquery.multi-select.js",
            "/include/plugins/intro/intro.js",
            "/include/plugins/switchery/switchery.min.js",
            "/include/js/jquery.multiselect.js",
            "/include/plugins/parsley/src/parsley.js",
            "/include/plugins/parsley/src/extra/validator/APPcustom.js",
            "/include/plugins/parsley/src/extra/plugin/parsley.remote.js",
            "/include/plugins/bootstrap3-timepicker2/js/bootstrap-timepicker.js",
            "/include/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js",
            "/include/plugins/SamWM/numeric/jquery.numeric.min.js",
            "/include/plugins/moment/moment.min.js",
            "/include/plugins/flot/jquery.flot.min.js",
            "/include/plugins/flot/jquery.flot.time.min.js",
            "/include/plugins/flot/jquery.flot.resize.min.js",
            "/include/plugins/flot/jquery.flot.pie.min.js",
            "/include/plugins/flot/jquery.flot.stack.min.js",
            "/include/plugins/flot/jquery.flot.crosshair.min.js",
            "/include/plugins/flot/jquery.flot.categories.js",
            "/include/plugins/sparkline/jquery.sparkline.js",
            "/include/plugins/bootstrap-tagsinput/bootstrap-tagsinput.min.js",
            "/include/plugins/bootstrap-tagsinput/bootstrap-tagsinput-typeahead.js",
            "/include/plugins/jquery-tag-it/js/tag-it.min.js",
            "/include/plugins/bootstrap-select/bootstrap-select.min.js",
            "/include/plugins/contextMenu/src/jquery.ui.position.js",
            "/include/plugins/contextMenu/src/jquery.contextMenu.js",
            "/include/js/jquery.mask.min.js",
            "/include/plugins/jquery-jstree/dist/jstree.min.js",
            "/include/plugins/jquery.expander.js",
            "/include/plugins/jquery-labelauty/source/jquery-labelauty.js",
            "/include/plugins/jquery-file-upload/js/vendor/jquery.ui.widget.js",

            "/include/plugins/jquery-jscroll/jquery.jscroll.js",
            "/include/js/modernizr.js",
            "/include/plugins/jquery-messi/dist/messi.js",

            "/include/plugins/jquery-tmpl/jquery.tmpl.min.js",

            { jquery_highlight: "/include/plugins/jquery-searchhighlight/jquery.highlight.js" },

            { datatables_core: "/include/plugins/DataTables/minify/datatables.min.js" },
            { datatables_searchHighlight: "/include/plugins/DataTables-Plugins/features/searchHighlight/dataTables.searchHighlight.min.js" },
            { datatables_conditionalPaging: "/include/plugins/DataTables-Plugins/features/conditionalPaging/dataTables.conditionalPaging.js" },
            { datatables_ellipsis: "/include/plugins/DataTables-Plugins/dataRender/ellipsis.js" },
            { datatables_yadcf: "/include/plugins/yadcf-0.8.8/jquery.dataTables.yadcf.js" },

            { ckeditor: "/include/plugins/ckeditor/ckeditor.js" }
        ],
        function() {
            console.log('All jQuery plugins loaded, loading APP js files...');
            APP_js_files();
        });
}

// Step #3
function APP_js_files(){
    head.load([
            // Load the application JS files
            { APP_plugins: "/include/js/APP_plugin.js" },
            { APP_intro: "/include/js/APP_intro.js" },
            { APP_app: "/include/js/APP_app.js" },
            { APP_confirmation: "/include/js/APP_confirmation.js" }
        ],
        function() {
            "use strict";
            console.log('Successfully loaded all APP js files!');

            $.ajaxSetup({
                cache:false
            });

            App.init();


            template.init();
            account.init();
            admin.init();
            assets.init();
            forms.init();
        });
}

上記のコードは init.js 内にあり、..

<script type="text/javascript" src="/include/js/head.min.js" data-headjs-load="/include/js/init.js"></script>

これは正しい方法ですか？head.js のドキュメントはかなり限られています。

ありがとう

javascript - head.js で依存関係を設定する

1 に答える 1

Related

Reference