加载jQuery插件和多个脚本的最佳实践

I'm currently looking for a way to load in multiple scripts/plugins without having a laundry list listed out in the header.

我目前正在寻找一种方法来加载多个脚本/插件，而无需在标题中列出清单。

To simply have a load.js have everything load in would be very elegant to me.

只是有一堆东西。js把所有的东西都装进去对我来说都很优雅。

$(function() {
    var scripts = ['scripts/jquery1.5.js','scripts/easing.js','scripts/scroll.js','scripts/main.js'];

    for(var i = 0; i < scripts.length; i++) {
        $.getScript(scripts[i]);
    }
})

I currently have something like this but can't get it to work for some reason. Any ideas?

我现在有这样的东西，但是由于某种原因，我不能让它工作。什么好主意吗?

4 个解决方案

#1

Have you looked at head.js?

你看过head.js吗?

#2

Here is my conclusion for head.js, I have done some benchmarks myself:

这是我的结论。js，我自己做过一些基准:

http://blog.feronovak.com/2011/03/headjs-script-is-it-really-necessary.html

It is subjective opinion and benchmarks are not by any means scientific.

这是主观的意见，而标准绝不是科学的。

#3

This is my solution : check if file is added (stored in array) and then load one file after another. Works perfectly!

这是我的解决方案:检查是否添加了文件(存储在数组中)，然后依次加载一个文件。作品完美!

var filesadded = "" //list of files already added
function loadJSQueue(array, success) {

    if (array.length != 0) {
        if (filesadded.indexOf("[" + array[0] + "]") == -1) {
            filesadded += "[" + array[0] + "]" //List of files added in the form "[filename1],[filename2],etc"

            oHead = document.getElementsByTagName('head')[0];
            var oScript = document.createElement('script');
            oScript.type = 'text/javascript';
            oScript.src = array[0];
            array.shift();
            oScript.onreadystatechange = function () {
                if (this.readyState == 'complete') {
                    loadJSQueue(array, success);
                }
            }

            oHead.appendChild(oScript);
        }
        else {
            array.shift();
            loadJSQueue(array, success);
        }

    }
    else {
        success();
    }
}

call it with

调用的是

    loadJSQueue(["../../JavaScript/plupload/js/jquery.plupload.queue/jquery.plupload.queue.js",
                "../../JavaScript/plupload/js/plupload.js",
                "../../JavaScript/plupload/js/plupload.html4.js"
                ], function(){alert("success");})

#4

     loadScripts(['script1.js','script2.js'], function(){ alert('scripts loaded'); }    

     function loadScripts(scripts, callback){

                var scripts = scripts || new Array();
                var callback = callback || function(){};

                for(var i = 0; i < scripts.length; i++){
                (function(i) {
                    $.getScript(scripts[i], function() {

                      if(i + 1 == scripts.length){
                        callback();
                      }
                    });
                  })(i);  
                }
           }

#1