ฉันกำลังพยายามรวมไฟล์ javascript ลงในไฟล์ js ของฉันแบบไดนามิก ฉันได้ค้นคว้าเกี่ยวกับเรื่องนี้และพบว่าวิธีการ jQuery $ .getScript () น่าจะเป็นวิธีที่ต้องการ

// jQuery
$.getScript('/path/to/imported/script.js', function()
{
    // script is now loaded and executed.
    // put your dependent JS here.
    // what if the JS code is dependent on multiple JS files? 
});

แต่ฉันสงสัยว่าวิธีนี้สามารถโหลดหลายสคริปต์พร้อมกันได้หรือไม่? สาเหตุที่ฉันถามสิ่งนี้เป็นเพราะบางครั้งไฟล์จาวาสคริปต์ของฉันขึ้นอยู่กับไฟล์ js มากกว่าหนึ่งไฟล์

ขอบคุณล่วงหน้า.

คำตอบคือ

คุณสามารถใช้คำมั่นสัญญาgetScript()และรอจนกว่าสคริปต์ทั้งหมดจะโหลดขึ้นมาเช่น:

$.when(
    $.getScript( "/mypath/myscript1.js" ),
    $.getScript( "/mypath/myscript2.js" ),
    $.getScript( "/mypath/myscript3.js" ),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(function(){
    
    //place your code here, the scripts are all loaded
    
});

ซอ

FIDDLE อีก

ในโค้ดด้านบนการเพิ่ม Deferred และแก้ไขภายใน$()ก็เหมือนกับการวางฟังก์ชั่นอื่น ๆ ในการเรียก jQuery เช่น$(func)มันเหมือนกับ

$(function() { func(); });

กล่าวคือรอให้ DOM พร้อมดังนั้นในตัวอย่างด้านบน$.whenจะรอให้สคริปต์ทั้งหมดถูกโหลดและ DOM จะพร้อมเนื่องจากการ$.Deferredเรียกที่แก้ไขในการเรียกกลับพร้อม DOM

สำหรับการใช้งานทั่วไปฟังก์ชันที่มีประโยชน์

ฟังก์ชันยูทิลิตี้ที่ยอมรับอาร์เรย์ของสคริปต์สามารถสร้างได้ดังนี้:

$.getMultiScripts = function(arr, path) {
    var _arr = $.map(arr, function(scr) {
        return $.getScript( (path||"") + scr );
    });
        
    _arr.push($.Deferred(function( deferred ){
        $( deferred.resolve );
    }));
        
    return $.when.apply($, _arr);
}

ซึ่งสามารถใช้ได้เช่นนี้

var script_arr = [
    'myscript1.js', 
    'myscript2.js', 
    'myscript3.js'
];

$.getMultiScripts(script_arr, '/mypath/').done(function() {
    // all scripts loaded
});

โดยที่พา ธ จะถูกนำหน้าสคริปต์ทั้งหมดและเป็นทางเลือกซึ่งหมายความว่าหากอาร์เรย์มี URL แบบเต็มก็สามารถทำได้เช่นกันและละทิ้งเส้นทางทั้งหมดไว้ด้วยกัน

$.getMultiScripts(script_arr).done(function() { ...

ข้อโต้แย้งข้อผิดพลาด ฯลฯ

นอกจากนี้โปรดทราบว่าการdoneเรียกกลับจะมีอาร์กิวเมนต์จำนวนหนึ่งที่ตรงกับสคริปต์ที่ส่งผ่านโดยแต่ละอาร์กิวเมนต์แสดงอาร์เรย์ที่มีการตอบสนอง

$.getMultiScripts(script_arr).done(function(response1, response2, response3) { ...

[content_of_file_loaded, status, xhr_object]ซึ่งแต่ละอาร์เรย์จะมีสิ่งที่ชอบ โดยทั่วไปเราไม่จำเป็นต้องเข้าถึงอาร์กิวเมนต์เหล่านั้นเนื่องจากสคริปต์จะถูกโหลดโดยอัตโนมัติอยู่แล้วและส่วนใหญ่แล้วการdoneโทรกลับเป็นสิ่งที่เรารู้ว่ามีการโหลดสคริปต์ทั้งหมดแล้วฉันแค่เพิ่มเพื่อความสมบูรณ์ และสำหรับบางครั้งที่หายากเมื่อต้องเข้าถึงข้อความจริงจากไฟล์ที่โหลดหรือเมื่อต้องการเข้าถึงวัตถุ XHR แต่ละชิ้นหรือสิ่งที่คล้ายกัน

นอกจากนี้หากสคริปต์ใดไม่สามารถโหลดได้ระบบจะเรียกตัวจัดการความล้มเหลวและสคริปต์ที่ตามมาจะไม่ถูกโหลด

$.getMultiScripts(script_arr).done(function() {
     // all done
}).fail(function(error) {
     // one or more scripts failed to load
}).always(function() {
     // always called, both on success and error
});

ฉันใช้ฟังก์ชันง่ายๆในการโหลดหลายสคริปต์แบบขนาน:

ฟังก์ชัน

function getScripts(scripts, callback) {
    var progress = 0;
    scripts.forEach(function(script) { 
        $.getScript(script, function () {
            if (++progress == scripts.length) callback();
        }); 
    });
}

การใช้

getScripts(["script1.js", "script2.js"], function () {
    // do something...
});

โหลดสคริปต์ที่จำเป็นต่อไปนี้ในการเรียกกลับของก่อนหน้านี้เช่น:

$.getScript('scripta.js', function()
{
   $.getScript('scriptb.js', function()
   {
       // run script that depends on scripta.js and scriptb.js
   });
});

บางครั้งจำเป็นต้องโหลดสคริปต์ตามลำดับที่ระบุ ตัวอย่างเช่นต้องโหลด jQuery ก่อน jQuery UI ตัวอย่างส่วนใหญ่ในหน้านี้โหลดสคริปต์แบบขนาน (แบบอะซิงโครนัส) ซึ่งหมายความว่าไม่รับประกันลำดับการดำเนินการ โดยไม่ต้องสั่งซื้อสคริปต์yที่ขึ้นอยู่กับxอาจพังได้หากโหลดทั้งสองสำเร็จ แต่เรียงลำดับไม่ถูกต้อง

ฉันเสนอแนวทางไฮบริดซึ่งอนุญาตให้โหลดตามลำดับของสคริปต์ที่ขึ้นต่อกัน + การโหลดแบบขนานที่เป็นทางเลือก + อ็อบเจ็กต์ที่เลื่อนออกไป :

/*
 * loads scripts one-by-one using recursion
 * returns jQuery.Deferred
 */
function loadScripts(scripts) {
  var deferred = jQuery.Deferred();

  function loadScript(i) {
    if (i < scripts.length) {
      jQuery.ajax({
        url: scripts[i],
        dataType: "script",
        cache: true,
        success: function() {
          loadScript(i + 1);
        }
      });
    } else {
      deferred.resolve();
    }
  }
  loadScript(0);

  return deferred;
}

/*
 * example using serial and parallel download together
 */

// queue #1 - jquery ui and jquery ui i18n files
var d1 = loadScripts([
  "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js",
  "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/i18n/jquery-ui-i18n.min.js"
]).done(function() {
  jQuery("#datepicker1").datepicker(jQuery.datepicker.regional.fr);
});

// queue #2 - jquery cycle2 plugin and tile effect plugin
var d2 = loadScripts([
  "https://cdn.rawgit.com/malsup/cycle2/2.1.6/build/jquery.cycle2.min.js",
  "https://cdn.rawgit.com/malsup/cycle2/2.1.6/build/plugin/jquery.cycle2.tile.min.js"

]).done(function() {
  jQuery("#slideshow1").cycle({
    fx: "tileBlind",
    log: false
  });
});

// trigger a callback when all queues are complete
jQuery.when(d1, d2).done(function() {
  console.log("All scripts loaded");
});

@import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/blitzer/jquery-ui.min.css");

#slideshow1 {
  position: relative;
  z-index: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<p><input id="datepicker1"></p>

<div id="slideshow1">
  <img src="https://dummyimage.com/300x100/FC0/000">
  <img src="https://dummyimage.com/300x100/0CF/000">
  <img src="https://dummyimage.com/300x100/CF0/000">
</div>

สคริปต์ในคิวทั้งสองจะดาวน์โหลดพร้อมกันอย่างไรก็ตามสคริปต์ในแต่ละคิวจะดาวน์โหลดตามลำดับเพื่อให้แน่ใจว่ามีการดำเนินการตามลำดับ แผนภูมิน้ำตก:

ใช้yepnope.jsหรือModernizr (ซึ่งรวมถึง yepnope.js เป็นไฟล์Modernizr.load )

UPDATE

เพื่อติดตามผลต่อไปนี้เป็นสิ่งที่ดีเทียบเท่ากับสิ่งที่คุณใช้อยู่ในปัจจุบันซึ่งแสดงการอ้างอิงในหลายสคริปต์:

yepnope({
  load: ['script1.js', 'script2.js', 'script3.js'],
  complete: function () {
      // all the scripts have loaded, do whatever you want here
  }
});

ฉันพบปัญหาหลายประการเกี่ยวกับการโหลดหลายสคริปต์ซึ่งรวมถึงปัญหาหนึ่งที่ (อย่างน้อยใน Chrome) การโหลดสคริปต์แบบร้อนในโดเมนเดียวกันไม่ทำงานจริงหลังจากที่ Ajax โหลดสำเร็จโดยที่ Cross Domain ทำงานได้ดีอย่างสมบูรณ์! :(

คำตอบที่เลือกสำหรับคำถามเดิมใช้งานไม่ได้อย่างน่าเชื่อถือ

หลังจากการทำซ้ำหลายครั้งนี่คือคำตอบสุดท้ายของฉันสำหรับ getScript และการโหลดสคริปต์หลาย ๆ แบบอะซิงโครนัสตามลำดับที่เข้มงวดโดยเฉพาะโดยมีตัวเลือกการโทรกลับที่โหลดต่อสคริปต์และการโทรกลับโดยรวมเมื่อเสร็จสิ้นทดสอบใน jQuery 2.1+ และ Chrome เวอร์ชันที่ทันสมัย, Firefox และ ละทิ้ง Internet Explorer

กรณีทดสอบของฉันกำลังโหลดไฟล์สำหรับการเรนเดอร์ THREE.JS webGL จากนั้นเริ่มสคริปต์การแสดงผลเมื่อ THREE global พร้อมใช้งานโดยใช้การตรวจสอบช่วงเวลาที่ส่งผ่านไปยังการเรียกใช้ฟังก์ชันแบบไม่ระบุชื่อไปที่ onComplete

ฟังก์ชัน Prototype (getScripts)

function getScripts( scripts, onScript, onComplete )
{
    this.async = true;
    this.cache = false;
    this.data = null;
    this.complete = function () { $.scriptHandler.loaded(); };
    this.scripts = scripts;
    this.onScript = onScript;
    this.onComplete = onComplete;
    this.total = scripts.length;
    this.progress = 0;
};

getScripts.prototype.fetch = function() {
    $.scriptHandler = this;
    var src = this.scripts[ this.progress ];
    console.log('%cFetching %s','color:#ffbc2e;', src);

    $.ajax({
        crossDomain:true,
        async:this.async,
        cache:this.cache,
        type:'GET',
        url: src,
        data:this.data,
        statusCode: {
            200: this.complete
        },
        dataType:'script'
    });
};

getScripts.prototype.loaded = function () {
    this.progress++;
    if( this.progress >= this.total ) {
        if(this.onComplete) this.onComplete();
    } else {
        this.fetch();
    };
    if(this.onScript) this.onScript();
};

วิธีใช้

var scripts = new getScripts(
    ['script1.js','script2.js','script.js'],
    function() {
        /* Optional - Executed each time a script has loaded (Use for Progress updates?) */
    },
    function () {
        /* Optional - Executed when the entire list of scripts has been loaded */
    }
);
scripts.fetch();

ฟังก์ชั่นเป็นไปตามที่ฉันพบโดยใช้ Deferred (เลิกใช้แล้วตอนนี้?) เมื่อใดความสำเร็จและเสร็จสมบูรณ์ในการทดลองของฉันจะไม่น่าเชื่อถือ 100% ดังนั้นฟังก์ชันนี้และการใช้ statusCode เป็นต้น

คุณอาจต้องการเพิ่มพฤติกรรมการจัดการข้อผิดพลาด / ล้มเหลวหากคุณต้องการ

คุณสามารถใช้ประโยชน์จาก$.when-method ได้โดยลองใช้ฟังก์ชันต่อไปนี้:

function loadScripts(scripts) {
  scripts.forEach(function (item, i) {
    item = $.getScript(item);
  });
  return $.when.apply($, scripts);
}

ฟังก์ชันนี้จะใช้ในลักษณะนี้:

loadScripts(['path/to/script-a.js', 'path/to/script-b.js']).done(function (respA, respB) {
    // both scripts are loaded; do something funny
});

นั่นคือวิธีการใช้สัญญาและมีค่าใช้จ่ายขั้นต่ำ

คำตอบที่ดี adeneo

ฉันใช้เวลาสักครู่ในการหาวิธีทำให้คำตอบของคุณเป็นแบบทั่วไปมากขึ้น (เพื่อที่ฉันจะโหลดอาร์เรย์ของสคริปต์ที่กำหนดรหัสได้) การโทรกลับจะถูกเรียกเมื่อสคริปต์ทั้งหมดโหลดและดำเนินการ นี่คือทางออกของฉัน:

    function loadMultipleScripts(scripts, callback){
        var array = [];

        scripts.forEach(function(script){
            array.push($.getScript( script ))
        });

        array.push($.Deferred(function( deferred ){
                    $( deferred.resolve );
                }));

        $.when.apply($, array).done(function(){
                if (callback){
                    callback();
                }
            });
    }

ต่อท้ายสคริปต์ด้วย async = false

นี่เป็นวิธีการที่แตกต่าง แต่ง่ายสุด ๆ ในการโหลดสคริปต์หลาย ๆ สคริปต์คุณสามารถผนวกเข้ากับเนื้อหาได้

• โหลดแบบอะซิงโครนัสเนื่องจากเป็นวิธีที่เบราว์เซอร์เพิ่มประสิทธิภาพการโหลดหน้าเว็บ
• เรียกใช้สคริปต์ตามลำดับเนื่องจากเป็นวิธีที่เบราว์เซอร์แยกวิเคราะห์แท็ก HTML
• ไม่จำเป็นต้องโทรกลับเนื่องจากสคริปต์ถูกดำเนินการตามลำดับ เพียงเพิ่มสคริปต์อื่นและจะดำเนินการต่อจากสคริปต์อื่น

ข้อมูลเพิ่มเติมที่นี่: https://www.html5rocks.com/en/tutorials/speed/script-loading/

var scriptsToLoad = [
   "script1.js", 
   "script2.js",
   "script3.js",
]; 
    
scriptsToLoad.forEach(function(src) {
  var script = document.createElement('script');
  script.src = src;
  script.async = false;
  document.body.appendChild(script);
});

สิ่งที่คุณกำลังมองหาคือตัวโหลดที่รองรับ AMD (เช่น require.js)

http://requirejs.org/

http://requirejs.org/docs/whyamd.html

มีโอเพ่นซอร์สที่ดีมากมายหากคุณค้นหา โดยทั่วไปจะช่วยให้คุณสามารถกำหนดโมดูลของโค้ดและหากขึ้นอยู่กับโมดูลอื่น ๆ ของโค้ดก็จะรอจนกว่าโมดูลเหล่านั้นจะดาวน์โหลดเสร็จสิ้นก่อนที่จะดำเนินการเรียกใช้ ด้วยวิธีนี้คุณสามารถโหลดโมดูล 10 โมดูลแบบอะซิงโครนัสได้และไม่ควรมีปัญหาแม้ว่าจะขึ้นอยู่กับโมดูลอื่น ๆ ที่จะรันก็ตาม

ฟังก์ชันนี้จะตรวจสอบให้แน่ใจว่าไฟล์ถูกโหลดหลังจากโหลดไฟล์อ้างอิงอย่างสมบูรณ์ คุณเพียงแค่ต้องจัดเตรียมไฟล์ตามลำดับโดยคำนึงถึงการพึ่งพาไฟล์อื่น ๆ

function loadFiles(files, fn) {
    if (!files.length) {
        files = [];
    }
    var head = document.head || document.getElementsByTagName('head')[0];

    function loadFile(index) {
        if (files.length > index) {
            var fileref = document.createElement('script');
            fileref.setAttribute("type", "text/javascript");
            fileref.setAttribute("src", files[index]);
            head.appendChild(fileref);
            index = index + 1;
            // Used to call a callback function
            fileref.onload = function () {
                loadFile(index);
            }
        } else if(fn){
            fn();
        }
    }
    loadFile(0);
}

สิ่งนี้ใช้ได้กับฉัน:

function getScripts(scripts) {
    var prArr = [];
    scripts.forEach(function(script) { 
        (function(script){
            prArr .push(new Promise(function(resolve){
                $.getScript(script, function () {
                    resolve();
                });
            }));
        })(script);
    });
    return Promise.all(prArr, function(){
        return true;
    });
}

และใช้มัน:

var jsarr = ['script1.js','script2.js'];
getScripts(jsarr).then(function(){
...
});

นี่คือคำตอบโดยใช้ Maciej Sawicki และใช้งานPromiseเป็นโทรกลับ:

function loadScripts(urls, path) {
    return new Promise(function(resolve) {
        urls.forEach(function(src, i) {

            let script = document.createElement('script');        
            script.type = 'text/javascript';
            script.src = (path || "") + src;
            script.async = false;

            // If last script, bind the callback event to resolve
            if(i == urls.length-1) {                    
                // Multiple binding for browser compatibility
                script.onreadystatechange = resolve;
                script.onload = resolve;
            }

            // Fire the loading
            document.body.appendChild(script);
        });
    });
}

ใช้:

let JSDependencies = ["jquery.js",
                      "LibraryNeedingJquery.js",
                      "ParametersNeedingLibrary.js"];

loadScripts(JSDependencies,'JavaScript/').then(taskNeedingParameters);

ไฟล์ Javascript ทั้งหมดจะถูกดาวน์โหลดโดยเร็วที่สุดและดำเนินการตามลำดับที่กำหนด แล้วtaskNeedingParametersเรียกว่า.

คำตอบที่ครอบคลุมของ Andrew Marc Newton ที่สั้นกว่าข้างต้น อันนี้ไม่ได้ตรวจสอบรหัสสถานะสำหรับความสำเร็จซึ่งคุณควรทำเพื่อหลีกเลี่ยงพฤติกรรม UI ที่ไม่ได้กำหนด

อันนี้มีไว้สำหรับระบบที่น่ารำคาญซึ่งฉันสามารถรับประกัน jQuery ได้ แต่ไม่มีอื่น ๆ รวมอยู่ด้วยดังนั้นฉันจึงต้องการเทคนิคที่สั้นพอที่จะไม่ถูกนำไปใช้ในสคริปต์ภายนอกหากถูกบังคับ (คุณสามารถทำให้มันสั้นลงได้โดยการส่งดัชนี 0 ไปยังการเรียก "เรียกซ้ำ" ครั้งแรก แต่ลักษณะนิสัยบังคับทำให้ฉันเพิ่มน้ำตาล)

ฉันยังกำหนดรายการการอ้างอิงให้กับชื่อโมดูลดังนั้นจึงสามารถรวมบล็อกนี้ได้ทุกที่ที่คุณต้องการ "module1" และสคริปต์และการเริ่มต้นที่ขึ้นอยู่กับการเริ่มต้นจะรวม / เรียกใช้เพียงครั้งเดียว (คุณสามารถเข้าสู่ระบบindexการโทรกลับและดูคำสั่งเดียว ชุดของคำขอ AJAX ที่ทำงานอยู่)

if(typeof(__loaders) == 'undefined') __loaders = {};

if(typeof(__loaders.module1) == 'undefined')
{
    __loaders.module1 = false;

    var dependencies = [];

    dependencies.push('/scripts/loadmefirst.js');
    dependencies.push('/scripts/loadmenext.js');
    dependencies.push('/scripts/loadmelast.js');

    var getScriptChain  = function(chain, index)        
    {
        if(typeof(index) == 'undefined')
            index = 0;

        $.getScript(chain[index], 
            function()
            {
                if(index == chain.length - 1)
                {
                    __loaders.module1 = true;

                    /* !!!
                        Do your initialization of dependent stuff here 
                    !!! */
                }
                else 
                    getScriptChain(chain, index + 1);
            }
        );
    };

    getScriptChain(dependencies);       
}

มีปลั๊กอินที่ขยายเมธอด getScript ของ jQuery อนุญาตให้โหลดแบบอะซิงโครนัสและซิงโครนัสและใช้กลไกการแคชของ jQuery การเปิดเผยข้อมูลทั้งหมดฉันเขียนสิ่งนี้ โปรดอย่าลังเลที่จะมีส่วนร่วมหากคุณพบวิธีการที่ดีกว่านี้

https://github.com/hudsonfoo/jquery-getscripts

โหลดnสคริปต์ทีละรายการ (มีประโยชน์หากตัวอย่างเช่นไฟล์ที่ 2 ต้องการไฟล์ที่ 1):

(function self(a,cb,i){
    i = i || 0; 
    cb = cb || function(){};    
    if(i==a.length)return cb();
    $.getScript(a[i++],self.bind(0,a,cb,i));                    
})(['list','of','script','urls'],function(){console.log('done')});

ตามคำตอบจาก @adeneo ด้านบน: รวมทั้งการโหลดไฟล์ css และ js

ข้อเสนอแนะสำหรับการปรับปรุง ??

// Usage
//$.getMultiResources(['script-1.js','style-1.css'], 'assets/somePath/')
//  .done(function () {})
//  .fail(function (error) {})
//  .always(function () {});

(function ($) {
  $.getMultiResources = function (arr, pathOptional, cache) {
    cache = (typeof cache === 'undefined') ? true : cache;
    var _arr = $.map(arr, function (src) {
      var srcpath = (pathOptional || '') + src;
      if (/.css$/i.test(srcpath)) {
        return $.ajax({
          type: 'GET',
          url: srcpath,
          dataType: 'text',
          cache: cache,
          success: function () {
            $('<link>', {
              rel: 'stylesheet',
              type: 'text/css',
              'href': srcpath
            }).appendTo('head');
          }
        });

      } else {
        return $.ajax({
          type: 'GET',
          url: srcpath,
          dataType: 'script',
          cache: cache
        });
      }
    });
    //
    _arr.push($.Deferred(function (deferred) {
      $(deferred.resolve);
    }));
    //
    return $.when.apply($, _arr);
  };
})(jQuery);

คุณสามารถลองใช้การเรียกซ้ำ การดำเนินการนี้จะดาวน์โหลดโดยซิงค์ทีละรายการจนกว่าจะดาวน์โหลดรายการทั้งหมดเสร็จสิ้น

var queue = ['url/links/go/here'];

ProcessScripts(function() { // All done do what ever you want

}, 0);

function ProcessScripts(cb, index) {
    getScript(queue[index], function() {
        index++;
        if (index === queue.length) { // Reached the end
            cb();
        } else {
            return ProcessScripts(cb, index);
        }
    });
}

function getScript(script, callback) {
    $.getScript(script, function() {
        callback();
    });
}