include() 类似 javascript 中的函数

Question

目标

我需要一个函数，它可以简单地从另一个文件中获取所有代码并将代码粘贴到调用文件中。

可能的解决方案

一个与 PHP 中的 include() 函数类似的函数。

原因

当我进行托管时，我使用 php 函数 include("filename.html") 在网站上的所有文件中包含页眉和页脚等内容。这让生活变得轻松多了！

现在我没有托管，因为我在另一个站点上工作，而且我正在使用 Github Pages，因此我不能使用 PHP。我只需要使用 HTML、JS 和 jQuery 等。所以，我需要一个简单地从另一个文件中获取所有代码并将代码粘贴到调用文件中的函数。

已经尝试过

1. load() 在 jQuery 中。

   <pre><script>    
   $(document).ready(function(){
       $("#topbar").load("menubar.html");
   });    
   </script></pre>
   

2. This question。我尝试了接受的答案，但这对我不起作用。

请帮我解决这个问题。

Answer 1

您应该考虑设置一个构建环境，您可以在其中在发布之前在本地编译您的内容。这样，您可以将代码组织在不同的文件中（例如，在您的情况下，具有始终包含在不同内容文件中的页眉/页脚），在本地编译以使文件自动组合到发布目录中，然后上传.

这样，而不是例如发送 3 次请求的页眉、内容和页脚文件，页眉和页脚被预编译到内容文件中，然后可以通过 1 个请求提供服务。

我个人将Grunt 用作纯静态站点的构建工具，以及连接任务（例如grunt-contrib-concat）。 Grunt 网站上有几个教程，但您可以在此处查看如何为您的特定问题配置任务的示例：

https://stackoverflow.com/a/12749861/351435

Answer 2

我会这样做：

var template = {
    get: function (url, callback) {
        if (this[url]) return callback(null, this[url]);
        var self = this;
        $.ajax({
            "url": url,
            "type": "GET"
        })
        done(function (html) {
            self[url] = html;
            callback(null, html);
        })
        .fail(callback);
    }
}; 

在你只需要这样做之后：

template.get("/menu.html", function (err, html, reason) {
    if (err) return alert('An error is append : '+reason);
    $("#topbar").html(html) // or append
});

Answer 3

我假设您的脚本在浏览器中运行。 试试 jQuery 中的 $.getScript 函数。

`$.getMyScript("script.js", function(){

alert("脚本已执行。");

});`

根据您希望解决方案的复杂程度，您还可以查看 http://requirejs.org/ 以合并文件/脚本/模块。

我相信这个问题在How do I include a JavaScript file in another JavaScript file? 上得到了完整的回答。