jquery 重用HTML元素

k4ymrczo 于 12个月前发布在 jQuery

关注(0)|答案(7)|浏览(110)

我正在编写一个静态Web站点，它使用JQuery对REST风格的API进行一些AJAX调用，并使用数据填充页面。
网站功能正常（而且很快），一切都很好。
当我扩展网站并添加其他页面时，我注意到我在每个页面上复制了某些区域。
例如，每个页面共享一个共同的header元素。

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

字符串
而不是在每一页上重复这个定义是有一些机制，通过它，我可以定义这个部分一次，并包括在每个文档。
请记住，页面必须静态提供，但可以使用任何标准的投诉浏览器功能。
有没有一个好的方法来做到这一点，它是什么，或者，我将不得不放弃DRY principles的这方面我的客户端代码？

jquery

来源：https://stackoverflow.com/questions/18534314/reuse-elements-of-html

7条答案

按热度按时间

gjmwrych1#

当然有一些方法可以做到这一点。你可以使用服务器端语言的一些功能，允许你在另一个页面中包含一个页面的内容，或者如果你没有任何服务器端技术，你可以简单地把代码放在自己的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'
    });
});

型

赞(0）回复(0）举报 12个月前

epggiuax2#

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

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>

型

赞(0）回复(0）举报 12个月前

9wbgstp73#

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

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

字符串

赞(0）回复(0）举报 12个月前

jk9hmnmh4#

由于您已经在使用AJAX调用向站点填充数据，因此可以对公共区域执行相同的操作。
只需将这些区域的HTML存储在一个单独的文件中，并使用AJAX将其加载到页面中。此外，您可以使用该文件上的Cache-Control头进行缓存，这样您就不会在每次加载页面时从服务器重新加载整个内容。

赞(0）回复(0）举报 12个月前

des4xlb05#

如果你使用的是纯HTML，你可以使用SSIinclude命令，或者创建一个模板页面并将其包含在jQuery中。
Include another HTML file in a HTML file和http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341/SSI-The-Include-Command.htm

赞(0）回复(0）举报 12个月前

q3aa05256#

在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>

型

赞(0）回复(0）举报 12个月前

kcugc4gi7#

最简单的是jQuery .clone()函数。
如果你有更复杂的内容，我建议你看看Handlebars.js，这是一个成熟的JS模板引擎。

赞(0）回复(0）举报 12个月前

我来回答

jquery 重用HTML元素

7条答案

相关问题

热门标签

最新问答