Question

我正在尝试在以下情况下将一些JavaScript文件加载到另一个JavaScript文件中：

JS / script1.js

var script_1_method = function () {
   console.log("Hello Script 1");
}

JS / INIT-的script.js

console.log("Initiating Scripts...");
loadScriptMethod('js/script1.js');
script_1_method();
console.log("Hello Script 2");

的index.html

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
      <meta charset="UTF-8">
      <title></title>
      <script type="text/javascript" src="js/init-script.js"></script>
    </head>
    <body>

    </body>
    </html>

控制台输出应为

Initiating Scripts...
Hello Script 1
Hello Script 2

我已经研究了许多JavaScript加载器，如curl.js，RequireJS，JSL几乎所有这些加载器都采用异步方式加载需要我的场景回调的文件。

是否有一个库以同步方式加载脚本，如上例所示，无需回调。

如果有任何JavaScript加载程序库满足上述情况，请告诉我。

Answer 1

可以使用同步XHR加载同源脚本：

var scr = getViaSynchronousXHR('js/script1.js'),
    el  = document.createElement("script");

el.appendChild(document.createTextNode(scr));
document.documentElement.firstChild.appendChild(el);
script_1_method();

没有源的脚本元素被同步解析和执行，因为没有等待从缓存中下载/获取文件。

Answer 2

如果所有脚本都在同一个域中，则可以运行同步ajax调用来获取脚本，使用eval运行它，然后继续

Answer 3

你想做的事情非常困难。我在同步AJAX请求中遇到了很多问题，无法动态地正确加载我的javascript文件。

实际上我实现了一些在我的项目中同步工作的东西，它与你想要的一样。

只有拥有服务器端脚本引擎（例如PHP）才能生成HTML页面。

我们的想法是在将它们包含在html代码中之前解析服务器端的init-scripts.js。

我没有在我的PHP脚本中编写echo <script type="text/javascript" src="js/init-script.js"></script>，而是编写：JavascriptLoader::addJavascript('js/init-script.js');

JavascriptLoader是一个PHP类，用于管理要加载的脚本。

这个addJavascript函数解析init-script.js，每次遇到一行以“ loadScriptMethod（”，

开头）

它解析并使用括号之间的字符串（例如loadScriptMethod('thisString')）作为scriptToLoad
然后递归调用JavascriptLoader::addJavascript($scriptToLoad);

JavascriptLoader::addJavascript然后执行echo '<script type="text/javascript" src="'.$scriptToLoad.'"></script>'编写

我无法从我的项目中发布JavascriptLoader代码，但这里是PHP代码的简化示例：

class JavascriptLoader{
...
public static function  addJavascript($filepath){

    self::init(); //Init to write the javascript loadScriptMethod definition into HTML output

    if (!self::isScriptAlreadyLoaded($filepath)){
        self::parseFile($filepath);
        echo '<script type="text/javascript" src="'.$urlScript.'"></script>',"\n";
        self::ajouterScriptDejaCharge($chemin);
    }
}
private static function parseFile($filepath){
    if (file_exists($filepath)){
        $lines = file($filepath, FILE_SKIP_EMPTY_LINES);

        foreach($lines as $line){
            $matches = array();
            $test = preg_match ('/^loadScriptMethod\(\s*[\'\"](.+)[\'\"]\s*\)/'  , $line , $matches);
            if ($test > 0){
                $scriptToLoad = $matches[1];

                //On inclut le fichier
                self::addJavascript($scriptToLoad);
            }
        }
    }
    else{
        throw new Exception('javascript source file '.$filepath.' does not exist.');
    }

这也将$ scriptToLoad存储到一个数组中，以避免加载两次相同的脚本（函数isScriptAlreadyLoaded和addScriptToAlreadyLoadedList）。

加载JavaScript内联

3 个答案: