使用 Rawgit 获取 Javascript 文件

Posted 2023-05-07

【中文标题】使用 Rawgit 获取 Javascript 文件

【英文标题】：Getting Javascript files using Rawgit

【发布时间】：2017-07-22 08:56:28

【问题描述】：

我正在尝试通过 Ajax 在我的网站中包含一个 JS 文件，方法是使用 Rawgit 从我的 GitHub 存储库之一获取它。出于某种原因，当我使用开发或生产 URL 时它不起作用，但是当我直接从 Github 使用我的文件的原始版本时，问题就停止了。将开发 URL 用于 CSS 文件时，我没有遇到任何问题。有谁知道为什么会这样？

这是我的代码：

$.get("https://rawgit.com/Larpee/The-Khan-Quiz/master/game.js", function (game) 
    var sketchProc = function (processingInstance) 
        with (processingInstance) 
            size(400, 400);
            frameRate(30);
            eval(game);
        
    ;

    var canvas = document.getElementById("game");
    var processingInstance = new Processing(canvas, sketchProc);
);

更新：我认为问题的出现是因为 GitHub（不是 Rawgit）将文件作为 .txt 文件提供，而 RawGit 将它们作为 .js 提供。

我仍然希望得到一个解释，说明为什么我的 javascript 文件带有 .js 扩展名不起作用，但是

【参考方案1】：

对于 RawGit，您会按预期获得 content-type: application/javascript;charset=utf-8，而 GitHub 会提供 Content-Type: text/plain; charset=utf-8。这似乎是唯一的区别。

我检查了您的示例，发现在使用 RawGit（并获得脚本响应）时，success 回调根本不会执行，但使用 GitHub 会执行（例如，添加 console.log('foo'); 语句。我还发现在你的脚本上运行eval()会抛出异常：

Uncaught ReferenceError: createFont is not defined

我自己用一个语法正确的占位符 JS 文件创建了一个 repo，在这种情况下，RawGit 和 GitHub 上的 $.get() 的 success 回调确实执行了，后来添加了对未定义名称的引用，这导致了对 RawGit URL 的调用无法执行其回调。

教训？当你得到一个带有$.get() 的脚本时，它实际上会立即执行，如果eval() 失败，那么一切都会在此处无声地结束。这得到了jQuery getScript load vs execution 的支持，这也意味着这种（在我看来）处理脚本数据的疯狂方式在版本 2.1.0 中结束了。

这让我建议，除了修复你的脚本，你应该使用$.getScript()（不确定你是否必须确保结果头有application/javascript），或者显式插入一个带有JS的脚本元素并有onload 回调：

(function(d, script) 
    script = d.createElement('script');
    script.type = 'text/javascript';
    script.async = true;
    script.onload = function()
        // remote script has loaded
    ;
    script.src = '[RawGit URL]';
    d.getElementsByTagName('head')[0].appendChild(script);
(document));

此外，您使用的 with 块应变为：

var sketchProc = function (processing)  
    processing.size(400, 400); 
    processing.frameRate(30); 


var canvas = $('#game'); // use jQuery since you have it 
var processingInstance = new Processing(canvas, sketchProc);

// game code now manipulates `processingInstance`
// either directly in scope (or even better as object with parameter)
processingInstance.draw = function () 
    var processing = this;
    // if your code originally used `processing` throughout,
    // do this so that it refers to the specific instance you've created
    // ...

processingInstance.loop();
// if initialized without a `.draw()` method like above, you need to start the loop manually once there is one 

Processing.js 文档有很多示例，这些示例基本上都是用 Java 编写的，需要进行少量修改才能正确处理 JS 范围。伤心！

【讨论】：

非常感谢您的辛勤付出，但还有一点我不明白：如果我的代码的问题是 jQuery 正在执行我的脚本，甚至没有运行回调，如何避免这种情况行为（我不希望脚本被执行，只是回调，因为我在包含脚本的字符串上使用eval()）？

当$.get() 收到被告知是 JavaScript 的数据时，它会以该内容作为参数调用 $.globalEval()，它在 全局范围内的数据上运行 eval() .这是默认行为，您似乎无法更改它。您的问题是，当您的脚本在全局范围内执行时，它会引发错误，因为（至少有一个）引用了对全局范围内未定义的变量的引用，因此 $.get() 的其余部分包括在结果，默默地失败了。有几种不同的方法可以解决此问题。

是的，对未定义函数和变量的调用是因为代码使用了一个名为 Processing.js 的库，其中包含许多用于在 canvas 标签中绘制和动画元素的预定义函数。这就是为什么我需要编写代码只在回调内部执行。我想我会继续让 Ajax 代码以文本文件的形式接收代码，从而解决问题。谢谢你向我解释这个问题，这让我发疯了。我会给你赏金

为什么要动态加载脚本？

因为我需要使用 Ajax 调用执行的回调函数。你还有什么建议？