使用head.js設置依賴關係

Question

我剛開始使用head.js異步加載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時，將在第二個代碼塊（在關閉中）執行任何操作。

我想做的事，是負載更多的文件（異步），而其他的文件被加載..

例如..

1. 首先，加載jQuery的文件：jquery.min.ks
2. 這就是成功加載後，異步加載數據表文件：[dataTables.searchHighlight.min.js，dataTables.conditionalPaging.js，jquery.dataTables.yadcf.js]
3. 之後，加載主應用程序文件：[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上的文檔相當有限。

感謝

Answer 1

當前實現不支持加載查詢或訂購，我可以在源代碼SAS，這就是爲什麼你的問題的解決方案是最好的之一。