javascript – 重用HTML的元素

前端之家收集整理的这篇文章主要介绍了javascript – 重用HTML的元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

网站功能正常(并且很快),一切都很好.

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

例如,每个页面共享一个公共标题元素.

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

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

有没有一个很好的方法来做到这一点,它是什么,或者,我将不得不放弃DRY principles我的客户端代码的这方面?

最佳答案
肯定有一些方法可以实现这一目标.你可以使用服务器端语言的某些功能来实现它,这些功能允许在另一个页面中包含页面内容,或者如果你没有任何服务器端技术,你可以简单地将该代码放在它自己的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('
原文链接:https://www.f2er.com/html/426476.html

猜你在找的HTML相关文章