javascript - 如何在没有网络服务器的情况下获取外部 JavaScript 的文本(即 AJAX)

Question

我正在编写一个 WebGL 应用程序。到目前为止，我将着色器放在 <script> 中-tags 直接进入我的标准 html 文件(我们称之为 index.html)。因此，使用 .text 来“解析”着色器代码很容易。在使用 getElementbyId('foo') 获取的脚本标签上。

但现在我认为这很不整洁。我希望我的着色器存储在扩展名为 .vert 的外部文件中/.frag并从那里解析它们。我的第一个方法如下:

<script id="shader-vs" src="./shaders/basic_vertexShader.vert" type="x-shader/x-vertex"></script>

<script id="shader-fs" src="./shaders/basic_fragmentShader.frag" type="x-shader/x-fragment"></script>

var shaderScript = document.getElementById(id);
if (!shaderScript) {
    return null;
}

var str = shaderScript.text;

结果是一个空字符串 ("")。我仔细检查了所有文件路径是否正确。看来，.text仅适用于 lokal 标签。

那么，我该怎么做才能接收该文件的内容？ AJAX 是不可能的，因为当应用程序保存在客户端存储上时，也应该在没有互联网连接的情况下工作。

我感谢每一个建议。

<小时/>

重要提示:正如我提到的，我并不是在寻找常见的 AJAX 内容。我正在寻找获取外部链接脚本文件代码的可能性。由于它们在 HTML 文件中静态链接，我认为如果没有异步请求，这应该没有问题。但好像确实如此。

Answer 1

我建议使用服务器端模板将代码存储在您提到的文件中，然后将其注入(inject) html 中。此方法提供了关注点分离:您的着色器文件按照您想要的方式分离，模板被编译，然后在 HTTP 请求进入时发送出去。A mustachey使用伪代码的示例(假设服务器端语言的哈希文字语法):

html = system.readFile('index.html');
vert = system.readFile('myVertFile.vert');
Mustache.render(html, {data: vert});

你的 HTML 看起来像这样:

<script>{{data}}</script>

此方法还可用于根据传入 http 请求的内容执行任何类型的条件模块加载。