我正在编写一个静态网站,它使用JQuery对RESTful API进行一些AJAX调用,并使用数据填充页面.
网站功能正常(并且很快),一切都很好.
当我扩展网站并添加其他页面时,我注意到我在每个页面上都复制了某些区域.
不是在每个页面上重复这个定义,而是有一些机制,通过这个机制,我可以定义此部分一次并将其包含在每个文档中.
请记住,必须静态提供页面,但可以使用任何标准的投诉浏览器功能.
有没有一个很好的方法来做到这一点,它是什么,或者,我将不得不放弃DRY principles我的客户端代码的这方面？
最佳答案
肯定有一些方法可以实现这一目标.你可以使用服务器端语言的某些功能来实现它,这些功能允许在另一个页面中包含页面内容,或者如果你没有任何服务器端技术,你可以简单地将该代码放在它自己的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('