blocks|key|1244280|text|只有一种方法可以同步加载和执行脚本资源，那就是使用同步XHR|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1244281|这是一个如何做到这一点的示例|1244282|//+get+some+kind+of+XMLHttpRequest
var+xhrObj+=+createXMLHTTPObject();
//+open+and+send+a+synchronous+request
xhrObj.open('GET',+"script.js",+false);
xhrObj.send('');
//+add+the+returned+content+to+a+newly+created+script+tag
var+se+=+document.createElement('script');
se.type+=+"text/javascript";
se.text+=+xhrObj.responseText;
document.getElementsByTagName('head')[0].appendChild(se);|code-block|syntax|javascript|1244283|但是你一般不应该使用同步请求，因为这会阻塞其他所有东西。但话虽如此，当然也有一些场景适合这样做。|1244284|我可能会使用onload处理程序将包含的函数重构为异步模式。|1244285|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>There is only one way to synchronously load and execute a script resource, and that is using a synchronous XHR</p>

<p>This is an example of how to do this</p>

<pre><code>// get some kind of XMLHttpRequest
var xhrObj = createXMLHTTPObject();
// open and send a synchronous request
xhrObj.open('GET', "script.js", false);
xhrObj.send('');
// add the returned content to a newly created script tag
var se = document.createElement('script');
se.type = "text/javascript";
se.text = xhrObj.responseText;
document.getElementsByTagName('head')[0].appendChild(se);
</code></pre>

<p>But you shouldn't in general use synchronous requests as this will block everything else.
But that being said, there are of course scenarios where this is appropriate.</p>

<p>I would probably refactor the containing function into an asynchronous pattern though using an onload handler.</p>


blocks|key|1029372|text|与Sean的答案相同，但不用创建脚本标记，只需计算它即可。这确保了代码实际上是可以使用的。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1029373|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>same as Sean's answer, but instead of creating a script tag, just evaluate it.  this ensures that the code is actually ready to use.</p>


blocks|key|1029411|text|这是我用来在我的应用中加载多个文件的代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1029412|Utilities.require+=+function+(file,+callback)+{
++++callback+=+callback+%7C%7C
++++function+()+{};
++++var+filenode;
++++var+jsfile_extension+=+/(.js)$/i;
++++var+cssfile_extension+=+/(.css)$/i;

++++if+(jsfile_extension.test(file))+{
++++++++filenode+=+document.createElement('script');
++++++++filenode.src+=+file;
++++++++//+IE
++++++++filenode.onreadystatechange+=+function+()+{
++++++++++++if+(filenode.readyState+===+'loaded'+%7C%7C+filenode.readyState+===+'complete')+{
++++++++++++++++filenode.onreadystatechange+=+null;
++++++++++++++++callback();
++++++++++++}
++++++++};
++++++++//+others
++++++++filenode.onload+=+function+()+{
++++++++++++callback();
++++++++};
++++++++document.head.appendChild(filenode);
++++}+else+if+(cssfile_extension.test(file))+{
++++++++filenode+=+document.createElement('link');
++++++++filenode.rel+=+'stylesheet';
++++++++filenode.type+=+'text/css';
++++++++filenode.href+=+file;
++++++++document.head.appendChild(filenode);
++++++++callback();
++++}+else+{
++++++++console.log("Unknown+file+type+to+load.")
++++}
};

Utilities.requireFiles+=+function+()+{
++++var+index+=+0;
++++return+function+(files,+callback)+{
++++++++index+%2B=+1;
++++++++Utilities.require(files[index+-+1],+callBackCounter);

++++++++function+callBackCounter()+{
++++++++++++if+(index+===+files.length)+{
++++++++++++++++index+=+0;
++++++++++++++++callback();
++++++++++++}+else+{
++++++++++++++++Utilities.requireFiles(files,+callback);
++++++++++++}
++++++++};
++++};
}();|code-block|syntax|javascript|1029413|并且此实用程序可用于|1029414|Utilities.requireFiles(["url1",+"url2",....],+function(){
++++//Call+the+init+function+in+the+loaded+file.
++++})|1029415|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>This is the code that I'm using for multiple file load in my app.</p>

<pre><code>Utilities.require = function (file, callback) {
    callback = callback ||
    function () {};
    var filenode;
    var jsfile_extension = /(.js)$/i;
    var cssfile_extension = /(.css)$/i;

    if (jsfile_extension.test(file)) {
        filenode = document.createElement('script');
        filenode.src = file;
        // IE
        filenode.onreadystatechange = function () {
            if (filenode.readyState === 'loaded' || filenode.readyState === 'complete') {
                filenode.onreadystatechange = null;
                callback();
            }
        };
        // others
        filenode.onload = function () {
            callback();
        };
        document.head.appendChild(filenode);
    } else if (cssfile_extension.test(file)) {
        filenode = document.createElement('link');
        filenode.rel = 'stylesheet';
        filenode.type = 'text/css';
        filenode.href = file;
        document.head.appendChild(filenode);
        callback();
    } else {
        console.log("Unknown file type to load.")
    }
};

Utilities.requireFiles = function () {
    var index = 0;
    return function (files, callback) {
        index += 1;
        Utilities.require(files[index - 1], callBackCounter);

        function callBackCounter() {
            if (index === files.length) {
                index = 0;
                callback();
            } else {
                Utilities.requireFiles(files, callback);
            }
        };
    };
}();
</code></pre>

<p>And this utilities can be used by</p>

<pre><code>Utilities.requireFiles(["url1", "url2",....], function(){
    //Call the init function in the loaded file.
    })
</code></pre>


blocks|key|1029451|text|var+xhrObj+=+new+XMLHttpRequest();
xhrObj.open('GET',+'/filename.js',+false);
xhrObj.send(null);
eval(xhrObj.responseText);|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|1029452|如果这是一个跨域的请求，它将无法工作。在这种情况下，您必须将请求的文件上传到您的服务器，或者创建一个镜像php来输出它，并需要该php。|unstyled|1029453|使用jquery+(也适用于跨域请求)：|1029454|$.getScript('/filename.js',callbackFunction);|1029455|callbackFunction将被同步调用。|offset|length|style|CODE|1029456|有关加载更多脚本的信息，请参阅this线程。|1029457|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/q/11803215/669677^0|0|0|0|0|0|G|0|F|4|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|11|8|@]|9|@]|A|$]]|$1|G|3|H|5|F|7|12|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$B|C]]|$1|K|3|L|5|F|7|14|8|@$M|15|N|16|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|F|7|17|8|@]|9|@$M|18|N|19|1|1A]]|A|$]]|$1|S|3|-4|5|F|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<pre><code>var xhrObj = new XMLHttpRequest();
xhrObj.open('GET', '/filename.js', false);
xhrObj.send(null);
eval(xhrObj.responseText);
</code></pre>

<p>If this is a cross-domain request, it will not work. In that case you have to upload the requested file to your server, or make a mirror php that outputs it, and require that php.</p>

<p>With jquery (works with cross-domain request too):</p>

<pre><code>$.getScript('/filename.js',callbackFunction);
</code></pre>

<p><code>callbackFunction</code> will be called synchronously.</p>

<p>For loading more scripts see <a href="https://stackoverflow.com/q/11803215/669677">this</a> thread.</p>


blocks|key|1244407|text|我的攻略，经典的加载jQuery+UI的例子，希望能对你有所帮助|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1244408|​|1244409|(+function(+tools,+libs+){
	
++++//+Iterator
++++var+require+=+function(+scripts,+onEnd+){
++++++++
++++++++onEnd+=+onEnd+%7C%7C+function(){};
++++++++
++++++++if(+!scripts+%7C%7C+scripts.length+<+1+)return+onEnd();
++++++++
++++++++var+src++++=+scripts.splice(+0,+1),
++++++++++++script+=+document.createElement(+"script"+);
++++++++
++++++++script.setAttribute(+"src",+src+);
++++++++
++++++++tools.addEvent(+"load",+script,+function(){
++++++++++++
++++++++++++require(+scripts,+onEnd+);
++++++++++++
++++++++}+);
++++++++
++++++++document.getElementsByTagName(+"head"+)[+0+].appendChild(+script+);
++++++++
++++};
++++
++++//+Install+all+scripts+with+a+copy+of+scripts
++++require(+libs.slice(),+function(){
++++
++++++++alert(+"Enjoy+:)"+);
++++
++++}+);
++++
++++//+Timeout+information
++++var+ti+=+setTimeout(+function(){
++++++++
++++++++if(+!window.jQuery+%7C%7C+!window.jQuery.ui+)alert(+"Timeout+!"+);
++++++++
++++++++clearTimeout(+ti+);
++++++++
++++},+5000+);

}+)(

++++{+//+Tools
++++
++++++++addEvent+:+function(+evnt,+elem,+func+){
++++++++
++++++++++++try{

++++++++++++++++if(+elem.addEventListener+){

++++++++++++++++++++elem.addEventListener(+evnt,+func,+false+);

++++++++++++++++}else+if(+elem.attachEvent+){

+++++++++++++++++++++var+r+=+elem.attachEvent(+"on"+%2B+evnt,+func+);

++++++++++++++++}

++++++++++++++++return+true;

++++++++++++}catch(+e+){

++++++++++++++++return+false;

++++++++++++}		++++

++++++++}
++++
++++},
++++[+//+Scripts
++++
++++++++"https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js",
++++++++"https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"
++++++++
++++]

);|code-block|syntax|javascript|1244410|1244411|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>My strategy, classic example when load jQuery UI, i hope this can help you </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>( function( tools, libs ){
	
    // Iterator
    var require = function( scripts, onEnd ){
        
        onEnd = onEnd || function(){};
        
        if( !scripts || scripts.length &lt; 1 )return onEnd();
        
        var src    = scripts.splice( 0, 1),
            script = document.createElement( "script" );
        
        script.setAttribute( "src", src );
        
        tools.addEvent( "load", script, function(){
            
            require( scripts, onEnd );
            
        } );
        
        document.getElementsByTagName( "head" )[ 0 ].appendChild( script );
        
    };
    
    // Install all scripts with a copy of scripts
    require( libs.slice(), function(){
    
        alert( "Enjoy :)" );
    
    } );
    
    // Timeout information
    var ti = setTimeout( function(){
        
        if( !window.jQuery || !window.jQuery.ui )alert( "Timeout !" );
        
        clearTimeout( ti );
        
    }, 5000 );

} )(

    { // Tools
    
        addEvent : function( evnt, elem, func ){
        
            try{

                if( elem.addEventListener ){

                    elem.addEventListener( evnt, func, false );

                }else if( elem.attachEvent ){

                     var r = elem.attachEvent( "on" + evnt, func );

                }

                return true;

            }catch( e ){

                return false;

            }		    

        }
    
    },
    [ // Scripts
    
        "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js",
        "https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"
        
    ]

);</code></pre>
</div>
</div>
</p>


blocks|key|1244456|text|使用Angular时，您可以利用这样一个事实，即每个提供者都是在实例化其他服务之前实例化的。您可以将这一事实与使用xhr和@Neil提到的eval()结合使用。代码如下：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1244457|app.provider('SomeScriptSyncLoader',+function()+{

++++var+resourceUrl+=++'http://some/script.js';
++++var+dummy+=+{};

++++this.$get+=+function()+{

++++++++var+q+=+jQuery.ajax({
++++++++++++type:+'GET',+url:+resourceUrl,+cache:+false,+async:+false
++++++++});

++++++++if+(q.status+===+200)+{
++++++++++++eval(q.responseText);+//+execute+some+script+synchronously+as+inline+script+-+eval+forces+sync+processing
++++++++}
++++++++return+dummy;
++++};
});|code-block|syntax|javascript|1244458|要强制提供程序被初始化，您需要将其注入至少一个其他指令/服务中。优选地，这将是利用由脚本加载的代码的服务。|1244459|app.directive('myDirective',+['SomeScriptSyncLoader',+function(someScriptSyncLoader)+{

return+{
++++restrict:+'E',
++++link:+function(scope,+element,+attrs)+{
++++++++//+some+ode
++++},
++++template:+"this+is+my+template"
+++};
}]);|1244460|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>When using Angular you can take advantage of the fact that every Provider is instantiated before other services are instantiated. You can combine this fact with using xhr and the eval() as mentioned by @Neil. The code would be following:</p>

<pre><code>app.provider('SomeScriptSyncLoader', function() {

    var resourceUrl =  'http://some/script.js';
    var dummy = {};

    this.$get = function() {

        var q = jQuery.ajax({
            type: 'GET', url: resourceUrl, cache: false, async: false
        });

        if (q.status === 200) {
            eval(q.responseText); // execute some script synchronously as inline script - eval forces sync processing
        }
        return dummy;
    };
});
</code></pre>

<p>To force the Provider to be inialized you need to inject it in at least one other directive/service. Preferably this would be the service which takes advantage of the code loaded by script.</p>

<pre><code>app.directive('myDirective', ['SomeScriptSyncLoader', function(someScriptSyncLoader) {

return {
    restrict: 'E',
    link: function(scope, element, attrs) {
        // some ode
    },
    template: "this is my template"
   };
}]);
</code></pre>


blocks|key|1244510|text|我能想到的最类似Node.js的实现是能够同步加载JS文件，并将它们用作对象/模块|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1244511|var+scriptCache+=+[];
var+paths+=+[];
function+Import(path)
{
++++var+index+=+0;
++++if((index+=+paths.indexOf(path))+!=+-1)+//If+we+already+imported+this+module
++++{
++++++++return+scriptCache+[index];
++++}

++++var+request,+script,+source;
++++var+fullPath+=+window.location.protocol+%2B+'//'+%2B+window.location.host+%2B+'/'+%2B+path;

++++request+=+new+XMLHttpRequest();
++++request.open('GET',+fullPath,+false);
++++request.send();

++++source+=+request.responseText;

++++var+module+=+(function+concealedEval()+{
++++++++eval(source);
++++++++return+exports;
++++})();

++++scriptCache.push(module);
++++paths.push(path);

++++return+module;
}|code-block|syntax|javascript|1244512|示例源代码(addobjects.js)：|offset|length|style|CODE|1244513|function+AddTwoObjects(a,+b)
{
++++return+a+%2B+b;
}

this.exports+=+AddTwoObjects;|1244514|并像这样使用它：|1244515|var+AddTwoObjects+=+Import('addobjects.js');
alert(AddTwoObjects(3,+4));+//7
//or+even+like+this:
alert(Import('addobjects.js')(3,+4));+//7|1244516|entityMap^0|0|0|6|D|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@$I|X|J|Y|K|L]]|9|@]|A|$]]|$1|M|3|N|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|O|3|P|5|6|7|10|8|@]|9|@]|A|$]]|$1|Q|3|R|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|S|3|-4|5|6|7|12|8|@]|9|@]|A|$]]]|T|$]]

<p>The most Node.js-like implementation I could come up with was able to load JS files synchonously, and use them as objects/modules</p>

<pre><code>var scriptCache = [];
var paths = [];
function Import(path)
{
    var index = 0;
    if((index = paths.indexOf(path)) != -1) //If we already imported this module
    {
        return scriptCache [index];
    }

    var request, script, source;
    var fullPath = window.location.protocol + '//' + window.location.host + '/' + path;

    request = new XMLHttpRequest();
    request.open('GET', fullPath, false);
    request.send();

    source = request.responseText;

    var module = (function concealedEval() {
        eval(source);
        return exports;
    })();

    scriptCache.push(module);
    paths.push(path);

    return module;
}
</code></pre>

<p>An example source (<code>addobjects.js</code>):</p>

<pre><code>function AddTwoObjects(a, b)
{
    return a + b;
}

this.exports = AddTwoObjects;
</code></pre>

<p>And use it like this:</p>

<pre><code>var AddTwoObjects = Import('addobjects.js');
alert(AddTwoObjects(3, 4)); //7
//or even like this:
alert(Import('addobjects.js')(3, 4)); //7
</code></pre>


blocks|key|1029650|text|我知道这是一个古老的问题，但也许其他人读了这篇文章后会发现它很有用！刚刚创建了一个新组件，使用ES6以同步的方式动态加载脚本。项目详细信息和源代码位于GitHub+https://github.com/amgadfahmi/scripty上|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1029651|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/amgadfahmi/scripty^0|2A|11|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>I know this is an old question, but maybe someone else read this and find it useful ! 
Just created a new components uses ES6 to load scripts dynamically in synchronous way. 
The Project details and source code are on GitHub <a href="https://github.com/amgadfahmi/scripty" rel="nofollow">https://github.com/amgadfahmi/scripty</a></p>


blocks|key|1029682|text|在回答这个问题时，我可能会迟到。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1029683|我目前的解决方案是递归地添加<script>标记，这样后续脚本的添加就会在其前一个脚本的回调中进行。它假设每个函数包含一个函数，并且该函数与文件名相同(没有扩展名)。这可能不是做事情的最好方法，但它工作得很好。|offset|length|style|CODE|1029684|要考虑的代码|1029685|代码目录结构：|1029686|-+directory
----+index.html
----+bundle.js
----+test_module/
--------+a.js
--------+b.js
--------+log_num.js
--------+many_parameters.js|code-block|syntax|javascript|1029687|index.html|1029688|<head>
++<script+src="bundle.js"></script>
</head>|1029689|bundle.js|1029690|//+Give+JS+arrays+the+.empty()+function+prototype
if+(!Array.prototype.empty){
++++Array.prototype.empty+=+function(){
++++++++return+this.length+==+0;
++++};
};

function+bundle(module_object,+list_of_files,+directory="")+{
++if+(!list_of_files.empty())+{
++++var+current_file+=+list_of_files.pop()
++++var+[function_name,+extension]+=+current_file.split(".")
++++var+new_script+=+document.createElement("script")
++++document.head.appendChild(new_script)

++++new_script.src+=+directory+%2B+current_file

++++new_script.onload+=+function()+{
++++++module_object[function_name]+=+eval(function_name)
++++++bundle(module_object,+list_of_files,+directory)
++++++/*
++++++nullify+the+function+in+the+global+namespace+as+-+assumed+-++last
++++++reference+to+this+function+garbage+collection+will+remove+it.+Thus+modules
++++++assembled+by+this+function+-+bundle(obj,+files,+dir)+-+must+be+called
++++++FIRST,+else+one+risks+overwritting+a+funciton+in+the+global+namespace+and
++++++then+deleting+it
++++++*/
++++++eval(function_name+%2B+"=+undefined")
++++}
++}
}

var+test_module+=+{}
bundle(test_module,+["a.js",+"b.js",+"log_num.js",+"many_parameters.js"],+"test_module/")|1029691|a.js|1029692|function+a()+{
++console.log("a")
}|1029693|b.js|1029694|function+b()+{
++console.log("b")
}|1029695|log_num.js|1029696|//+it+works+with+parameters+too
function+log_num(num)+{
++console.log(num)
}|1029697|many_parameters.js|1029698|function+many_parameters(a,+b,+c)+{
++var+calc+=+a+-+b+*+c
++console.log(calc)
}|1029699|entityMap^0|0|E|8|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1G|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1H|8|@$D|1I|E|1J|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1K|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1L|8|@]|9|@]|A|$]]|$1|L|3|M|5|N|7|1M|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1N|8|@]|9|@]|A|$]]|$1|S|3|T|5|N|7|1O|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1P|8|@]|9|@]|A|$]]|$1|W|3|X|5|N|7|1Q|8|@]|9|@]|A|$O|P]]|$1|Y|3|Z|5|6|7|1R|8|@]|9|@]|A|$]]|$1|10|3|11|5|N|7|1S|8|@]|9|@]|A|$O|P]]|$1|12|3|13|5|6|7|1T|8|@]|9|@]|A|$]]|$1|14|3|15|5|N|7|1U|8|@]|9|@]|A|$O|P]]|$1|16|3|17|5|6|7|1V|8|@]|9|@]|A|$]]|$1|18|3|19|5|N|7|1W|8|@]|9|@]|A|$O|P]]|$1|1A|3|1B|5|6|7|1X|8|@]|9|@]|A|$]]|$1|1C|3|1D|5|N|7|1Y|8|@]|9|@]|A|$O|P]]|$1|1E|3|-4|5|6|7|1Z|8|@]|9|@]|A|$]]]|1F|$]]

<p>I may be late to answering this question.</p>

<p>My current solution is to recursively add <code>&lt;script&gt;</code> tags such that the addition of the subsequent script is in the callback of its predecessor. It assumes that each function contains one function and that function is the same as the file name (minus the extension).  This probably isn't the best way to do things, but it works ok.</p>

<h1>Code to consider</h1>

<p>Code directory structure:</p>

<pre><code>- directory
---- index.html
---- bundle.js
---- test_module/
-------- a.js
-------- b.js
-------- log_num.js
-------- many_parameters.js
</code></pre>

<h3>index.html</h3>

<pre><code>&lt;head&gt;
  &lt;script src="bundle.js"&gt;&lt;/script&gt;
&lt;/head&gt;
</code></pre>

<h3>bundle.js</h3>

<pre><code>// Give JS arrays the .empty() function prototype
if (!Array.prototype.empty){
    Array.prototype.empty = function(){
        return this.length == 0;
    };
};

function bundle(module_object, list_of_files, directory="") {
  if (!list_of_files.empty()) {
    var current_file = list_of_files.pop()
    var [function_name, extension] = current_file.split(".")
    var new_script = document.createElement("script")
    document.head.appendChild(new_script)

    new_script.src = directory + current_file

    new_script.onload = function() {
      module_object[function_name] = eval(function_name)
      bundle(module_object, list_of_files, directory)
      /*
      nullify the function in the global namespace as - assumed -  last
      reference to this function garbage collection will remove it. Thus modules
      assembled by this function - bundle(obj, files, dir) - must be called
      FIRST, else one risks overwritting a funciton in the global namespace and
      then deleting it
      */
      eval(function_name + "= undefined")
    }
  }
}

var test_module = {}
bundle(test_module, ["a.js", "b.js", "log_num.js", "many_parameters.js"], "test_module/")
</code></pre>

<h3>a.js</h3>

<pre><code>function a() {
  console.log("a")
}
</code></pre>

<h3>b.js</h3>

<pre><code>function b() {
  console.log("b")
}
</code></pre>

<h3>log_num.js</h3>

<pre><code>// it works with parameters too
function log_num(num) {
  console.log(num)
}
</code></pre>

<h3>many_parameters.js</h3>

<pre><code>function many_parameters(a, b, c) {
  var calc = a - b * c
  console.log(calc)
}
</code></pre>


blocks|key|1029761|text|可接受的答案不正确：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1029762|script.async+=+false;指令仅意味着html解析将在脚本执行期间暂停。这并不能保证javascript代码的运行顺序。请参阅https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/|offset|length|style|CODE|1029763|这里还没有提到的最简单、最优雅的解决方案是使用promises，如下所示：|1029764|++++function+loadScript(url)+{
++++++return+new+Promise((resolve,+reject)+=>+{
++++++++var+script+=+document.createElement('script')
++++++++script.src+=+url
++++++++script.onload+=+()+=>+{
++++++++++resolve()
++++++++}
++++++++script.onerror+=+()+=>+{
++++++++++reject('cannot+load+script+'%2B+url)
++++++++}
++++++++document.body.appendChild(script)
++++++})
++++}|code-block|syntax|javascript|1029765|然后，当您想要按顺序执行脚本时：|1029766|++++++++loadScript('myfirstscript.js').then(()+=>+{
++++++++++console.log('first+script+ran');
++++++++++loadScript('index.js').then(()+=>+{
++++++++++++console.log('second+script+ran');
++++++++++})
++++++++})|1029767|entityMap|0|LINK|mutability|MUTABLE|url|https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/^0|0|0|L|1Z|3C|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@$D|12|E|13|F|G]]|9|@$D|14|E|15|1|16]]|A|$]]|$1|H|3|I|5|6|7|17|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|18|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|19|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1A|8|@]|9|@]|A|$M|N]]|$1|S|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]]]

<p>the accepted answer is not correct:</p>

<p>the <code>script.async = false;</code> directive only means that html parsing will be paused during script execution. this does not guarantee in which order javascript code will run. see <a href="https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/" rel="nofollow noreferrer">https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript/</a></p>

<p>the easiest and most elegant solution which was yet to be mentioned here is using promises, like so:</p>

<pre><code>    function loadScript(url) {
      return new Promise((resolve, reject) =&gt; {
        var script = document.createElement('script')
        script.src = url
        script.onload = () =&gt; {
          resolve()
        }
        script.onerror = () =&gt; {
          reject('cannot load script '+ url)
        }
        document.body.appendChild(script)
      })
    }
</code></pre>

<p>and then when you want to execute scripts in order:</p>

<pre><code>        loadScript('myfirstscript.js').then(() =&gt; {
          console.log('first script ran');
          loadScript('index.js').then(() =&gt; {
            console.log('second script ran');
          })
        })
</code></pre>


blocks|key|1244749|text|以下是我的代码|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1244750|var+loaded_script+=+[];
function+loadScript(urls,+callback,+sync)+{
++++var+len+=+urls.length,+count+=+0;

++++//+check+are+all+js+loaded,+then+execute+callback+(if+any)
++++var+check+=+function()+{
++++++++if+(count+==+len)+{
++++++++++++callback+&&+typeof+callback=="function"+&&+callback();
++++++++}
++++};

++++for+(var+i+=+0;+i+<+len;+i%2B%2B)+{
++++++++var+url+=+urls[i];

++++++++//+check+if+script+not+loaded+(prevent+load+again)
++++++++if+(loaded_script.indexOf(url)+==+-1)+{
++++++++++++var+script+=+document.createElement("script");
++++++++++++script.type+=+"text/javascript";

++++++++++++//+set+sync+loading+here+(default+is+async)
++++++++++++if+(sync)+{
++++++++++++++++script.async+=+false;
++++++++++++}

++++++++++++//+script+onload+event
++++++++++++if+(script.readyState)+{++++//+IE
++++++++++++++++script.onreadystatechange+=+function()+{
++++++++++++++++++++if+(script.readyState=="loaded"+%7C%7C+script.readyState=="complete")+{
++++++++++++++++++++++++script.onreadystatechange+=+null;
++++++++++++++++++++++++count%2B%2B,+check();
++++++++++++++++++++}
++++++++++++++++};
++++++++++++}+else+{++++//+Others
++++++++++++++++script.onload+=+function()+{
++++++++++++++++++++count%2B%2B,+check();
++++++++++++++++};
++++++++++++}

++++++++++++//+add+script+to+head+tag
++++++++++++script.src+=+url;
++++++++++++document.getElementsByTagName("head")[0].appendChild(script);

++++++++++++//+mark+this+script+has+loaded
++++++++++++loaded_script.push(url);
++++++++}+else+{
++++++++++++count%2B%2B,+check();
++++++++}
++++}
}|code-block|syntax|javascript|1244751|我在pjax网站上使用这个。|1244752|loadScript(
++++[
++++++++"js/first.js",
++++++++"js/second.js",
++++],
++++function()+{
++++++++alert("Scripts+loaded.");
++++},
++++true
);|1244753|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>here is my code</p>

<pre><code>var loaded_script = [];
function loadScript(urls, callback, sync) {
    var len = urls.length, count = 0;

    // check are all js loaded, then execute callback (if any)
    var check = function() {
        if (count == len) {
            callback &amp;&amp; typeof callback=="function" &amp;&amp; callback();
        }
    };

    for (var i = 0; i &lt; len; i++) {
        var url = urls[i];

        // check if script not loaded (prevent load again)
        if (loaded_script.indexOf(url) == -1) {
            var script = document.createElement("script");
            script.type = "text/javascript";

            // set sync loading here (default is async)
            if (sync) {
                script.async = false;
            }

            // script onload event
            if (script.readyState) {    // IE
                script.onreadystatechange = function() {
                    if (script.readyState=="loaded" || script.readyState=="complete") {
                        script.onreadystatechange = null;
                        count++, check();
                    }
                };
            } else {    // Others
                script.onload = function() {
                    count++, check();
                };
            }

            // add script to head tag
            script.src = url;
            document.getElementsByTagName("head")[0].appendChild(script);

            // mark this script has loaded
            loaded_script.push(url);
        } else {
            count++, check();
        }
    }
}
</code></pre>

<p>I use this on pjax site.</p>

<pre><code>loadScript(
    [
        "js/first.js",
        "js/second.js",
    ],
    function() {
        alert("Scripts loaded.");
    },
    true
);
</code></pre>


<p>I'm using the <a href="http://yuiblog.com/blog/2007/06/12/module-pattern/" rel="noreferrer">module pattern</a>, one of the things I want to do is dynamically include an external JavaScript file, execute the file, and then use the functions/variables in the file in the <code>return { }</code> of my module.</p>

<p>I can't figure out how to do this easily.  Are there any standard ways of performing a pseudo synchronous external script load?</p>

<pre><code>function myModule() {
    var tag = document.createElement("script");
    tag.type = "text/javascript";
    tag.src = "http://some/script.js";
    document.getElementsByTagName('head')[0].appendChild(tag);

    //something should go here to ensure file is loaded before return is executed

    return {
        external: externalVariable 
    }
}
</code></pre>


Dynamically loading JavaScript synchronously

服务器

jQuery

GitHub

我使用的是，我想做的一件事是动态地包含一个外部JavaScript文件，执行该文件，然后在我的模块的return { }中使用该文件中的函数/变量。我想不出怎么才能轻松做到这一点。有没有执行伪同步外部脚本加载的标准方法？function myModule() {    var tag = document.create...

问同步动态加载JavaScript
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问同步动态加载JavaScriptEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问同步动态加载JavaScript
EN