javascript – 重用HTML的元素

发布时间：2020-12-14 23:08:06 所属栏目：资源来源：网络整理

导读：我正在编写一个静态网站,它使用JQuery对RESTful API进行一些AJAX调用,并使用数据填充页面. 网站功能正常(并且很快),一切都很好. 当我扩展网站并添加其他页面时,我注意到我在每个页面上都复制了某些区域. 例如,每个页面共享一个公共标题元素. 不是在每个页面

我正在编写一个静态网站,它使用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('


                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!