Nodejs 如何实现本地与在线js资源切换？

Nodejs 如何实现本地与在线js资源切换？

如果本地路径有对应js资源，无需从网络加载，如果没有就从网络加载， 如何实现这一点？

不借助服务端脚本，在纯静态页面中可以做到js切换功能么？ 这样在本地打开页面时，不用从网络加载，性能会好很多

7 回复

当然可以。在纯静态页面中，我们可以通过JavaScript动态地判断本地是否有对应的JS资源文件，如果没有，则从网络加载。这种方法可以显著提高性能，尤其是在本地开发环境中。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Local and Online JS Switching</title>
</head>
<body>

<script>
    // 定义本地和在线资源的URL
    const localPath = 'local.js';
    const onlinePath = 'https://example.com/online.js';

    // 创建一个函数来检查本地文件是否存在
    function checkLocalFile(path) {
        return new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.open('HEAD', path, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4) {
                    resolve(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304);
                }
            };
            xhr.onerror = function() {
                resolve(false);
            };
            xhr.send();
        });
    }

    // 动态加载JS文件
    async function loadScript(url) {
        const script = document.createElement('script');
        script.src = url;
        document.body.appendChild(script);
    }

    // 主逻辑
    (async () => {
        try {
            const isLocalFileAvailable = await checkLocalFile(localPath);
            if (isLocalFileAvailable) {
                console.log('Local file found, loading from local.');
                await loadScript(localPath);
            } else {
                console.log('Local file not found, loading from online.');
                await loadScript(onlinePath);
            }
        } catch (error) {
            console.error('Error:', error);
        }
    })();
</script>

</body>
</html>

解释

  1. 定义资源路径：

    • localPath 是本地资源的路径。
    • onlinePath 是在线资源的URL。

  2. 检查本地文件是否存在：

    • 使用 XMLHttpRequest 发送一个 HEAD 请求来检查文件是否存在。如果状态码在 200 到 299 之间或为 304（未修改），则认为文件存在。

  3. 动态加载JS文件：

    • 创建一个 <script> 元素，并设置其 src 属性为指定的 URL，然后将其添加到文档中。

  4. 主逻辑：

    • 使用 async 函数异步执行逻辑，首先检查本地文件是否存在，如果存在则加载本地文件，否则加载在线文件。

这种方法确保了在本地开发环境中尽可能使用本地资源，从而提高性能和加载速度。


从来没见过这么做的。 在写 js 资源之前，就决定好它是来来自网络还是本地，如果你觉得网络慢的话，就在本地放一份。

我能说我没明白你的意思么？你指的是类似于 304 Not Modified 之类的状态码么？

你是说离线web应用吗？ http://www.w3school.com.cn/html5/html_5_app_cache.asp

浏览器一直这么做的，而且做的比你想得好。

不止检测本地资源，还检测本地资源是否够新鲜。

HTML5 的 File API 允许读用户选择的文件用来上传。写文件的API似乎停止了。

http://www.w3.org/TR/file-upload/ http://www.w3.org/TR/file-writer-api/

要实现本地与在线JS资源的自动切换，可以通过在客户端（即浏览器）中检查本地文件是否存在来决定是从本地加载还是从网络加载。这可以在纯静态页面中实现，不需要服务端脚本的支持。

以下是一个简单的实现方案：

  1. 创建一个函数来检测本地文件是否存在。
  2. 根据检测结果动态设置<script>标签的src属性。

由于浏览器环境中无法直接访问本地文件系统（出于安全原因），你可以通过一些技巧来间接实现这一目标。例如，可以使用fetch API尝试从相对路径加载本地文件，然后根据响应状态判断文件是否存在。

function loadScript(url, localPath) {
    fetch(localPath)
        .then(response => {
            if (response.ok) {
                // 如果本地文件存在，则创建指向本地文件的 script 标签
                const script = document.createElement('script');
                script.src = localPath;
                document.head.appendChild(script);
            } else {
                // 如果本地文件不存在，则从远程地址加载
                const script = document.createElement('script');
                script.src = url;
                document.head.appendChild(script);
            }
        })
        .catch(() => {
            // 如果请求本地文件失败（可能是由于CORS或其他错误），则从远程地址加载
            const script = document.createElement('script');
            script.src = url;
            document.head.appendChild(script);
        });
}

// 使用示例
loadScript(
    'https://example.com/remote-script.js', 
    './local-script.js'
);

上述代码中，loadScript函数接受两个参数：一个是远程脚本的URL，另一个是本地脚本的路径。它首先尝试从本地路径加载脚本。如果成功，说明本地文件存在，并创建一个指向该文件的<script>标签。如果失败或出现错误，将从远程地址加载脚本。

需要注意的是，这种方法依赖于浏览器支持fetch API，并且可能需要处理跨域资源共享（CORS）问题。此外，由于浏览器的安全限制，这种方式可能在某些情况下不可行，尤其是当页面以file://协议在本地文件系统中打开时。

回到顶部