7

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

该站点运行正常（并且快速），一切都很好。

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

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

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

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

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

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

4

7 回答 7

7

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

在 jQuery 中，它可能看起来像：

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

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

这是一个简单的例子：

演示

//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'
    });
});
于 2013-08-30T14:05:27.177 回答
5

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

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>

可重用文件.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>
于 2013-08-30T13:56:01.657 回答
3

您可以使用 jQuery 的 ajax 来加载头文件。在每个文件中，您可以像这样加载 html：

$('#header').load('header.html');
于 2013-08-30T13:47:41.937 回答
2

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

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

于 2013-08-30T13:42:45.010 回答
0

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

在 HTML 文件中包含另一个 HTML 文件 和 http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341/SSI-The-Include-Command.htm

于 2013-08-30T13:42:23.420 回答
0

它看起来像这样：

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>

可重用Piece.xml

<header>...Some non-trivial content...</header>
于 2013-09-06T02:49:23.663 回答
-2

jQuery .clone()函数非常简单。

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

于 2013-08-30T13:42:56.590 回答