Question

我正在编写一个静态网站，该网站使用JQuery对RESTful API进行一些AJAX调用，并使用数据填充页面。

网站功能正常（并且很快），一切都很好。

当我扩展网站并添加其他页面时，我注意到我在每个页面上都复制了某些区域。

例如，每个页面共享一个共同的header元素。

<header>...Some non-trivial content...</header>

不是在每个页面上重复这个定义，而是有一些机制，通过这种机制，我可以定义此部分一次并将其包含在每个文档中。

请记住，页面必须是静态提供的，但可以使用任何标准的投诉浏览器功能。

有没有一种好方法可以做到这一点，它是什么，或者，我是否必须放弃DRY principles来解决客户端代码的这一方面问题？

Answer 1

正如我在评论中提到的，我就是这样做的：

<强> main.html中

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Main page</title>
        <sript src="http://code.jquery.com/jquery-latest.js"></script>
        <script>
             $(function(){
                  $('#commonsection').load('reusablefile.htm');

                  // which is eqvivalent to:
                  //
                  // $.ajax({
                  //     url: 'reusablefile.htm',
                  //     dataType: 'html',
                  //     success: function(data){
                  //         $('#commonsection').html(data);
                  //     }
                  // });
             });
        </script>
     </head>
     <body>
         <div id="commonsection"></div>
     </body>
</html>

<强> reusablefile.html：

<script>
    (function($){ //separate scope to keep everything "private" for each module
        //do additional javascript if required
    })(jQuery);
</script>
<p>...Some non-trivial content...</p>

Answer 2

确实有一些方法可以实现这一目标。你可以使用服务器端语言的某些功能来实现它，这些功能允许在另一个页面中包含页面内容，或者如果你没有任何服务器端技术，你可以简单地将代码放入其中。自己的HTML文档，并使用AJAX加载它的内容。

在jQuery中它可能看起来像：

$('#header').load('header.html');

但是，如果所有页面的内容都不是静态的，则可以始终定义一个负责呈现此标头的JS模块。您的模块可以使用客户端模板引擎，如Mustache，Handlebars等。但您不必使用其中任何一个。

这是一个简单的例子：

DEMO

//in somefile.js, please note that you should namespace your modules
var Header = {
    //default config
    config: {
        el: '#header',
        title: 'Some title'
    },

    init: function (config) {
        var cfg = this.config = $.extend({}, this.config, config);

        $(cfg.el).html('<h1>' + cfg.title + '</h1>');
    }
};

$(function () {
    Object.create(Header).init({
        title: 'Some other title'
    });

    Object.create(Header).init({
        el: '#header1',
        title: 'Yeah'
    });
});

Answer 3

由于您已经在使用AJAX调用来为您的网站填充数据，因此您可以对公共区域执行相同操作。

只需将这些区域的HTML存储在单独的文件中，然后使用AJAX将其加载到页面中。此外，您可以使用该文件上的Cache-Control标头来处理缓存，这样您就不会在每次加载页面时从服务器重新加载整个内容。

Answer 4

您可以使用jQuery的ajax来加载头文件。在每个文件中，您可以加载html，如下所示：


$('#header').load('header.html');

Answer 5

如果您使用的是直接HTML，则可以使用SSI include命令或创建模板页面并将其包含在jQuery中。这两个链接都可以帮助您

Include another HTML file in a HTML file 和 http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341/SSI-The-Include-Command.htm

Answer 6

在modest中看起来像这样：

<强> main.xhtml

<?xml version='1.0' encoding='UTF-8'?>
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <include>reusablePiece</include>
  </head>
  <body>
    <reusablePiece/>
  </body>
</html>

<强> reusablePiece.xml

<header>...Some non-trivial content...</header>

Answer 7

很简单就是jQuery .clone()函数。

如果您有更复杂的内容，我建议您查看Handlebars.js这是一个完整的JS模板引擎。

重用HTML的元素

7 个答案: