所以我使用PHP为我的网站，并使用include / require将我的页眉和页脚添加到每个页面但我试图使用phonegap构建一个应用程序只允许html css和javascript如何构建模板页眉和页脚而不使用PHP
所以我有5页需要相同的页眉和页脚但内容不同
如果我不能使用PHP，我该怎么做？或者我可以吗？对所有建议开放
<body>
<header>
This is my header
</header>
<content>
page content
</content>
<footer>
this is my footer
</footer>
</body>
您仍然可以调用在特殊元素上生成html代码的脚本，
想象一下，你的应用程序的每个页面都有一个id #header，它会调用你的脚本插入一些如下所示的问候语：
document.getElementById("#header").insertAdjacentHTML("afterbegin", "<h1>Hello there!</h1>");<div id="#header"></div>https://developer.mozilla.org/fr/docs/Web/API/Element/insertAdjacentHTML
我过去做过类似的事情：
const Component = function(props) {
this.props = props;
let _state = {};
this.setState = state => (_state = state);
this.getState = () => _state;
};
class Factory extends Component {
constructor(props) {
super(props);
this.setState({
template: this.setTemplate(this.props.template), //html
action: this.props.template[this.props.action], // js
templateState: this.props.action, // switch beetween html/js
dom: {
//dom elements
header: document.querySelector("#header-pwd"),
content: document.querySelector("#content-pwd"),
info: document.querySelector("#info-pwd")
}
});
this.clear(); // clear html
this.getTemplate(); // insert template into dom
this.getState().action(); // link onclick elements
}
getTemplate() {
const template = this.getState().template;
const header = this.getState().dom.header;
const content = this.getState().dom.content;
const info = this.getState().dom.info;
header.insertAdjacentHTML("afterbegin", template.header);
content.insertAdjacentHTML("afterbegin", template.content);
info.insertAdjacentHTML("afterbegin", template.info);
}
setTemplate(template) {
const getState = this.getState().templateState
? this.getState().templateState
: this.props.action;
const objectFilter = Object.keys(template)
.filter(key => key[0] !== "_")
.map(
key =>
template[key][getState]
? template[key][getState]
: template[key]["_init"]
);
return {
header: objectFilter[0],
content: objectFilter[1],
info: objectFilter[2]
};
}
clear() {
const dom = Object.values(this.getState().dom);
for (let parent of dom) {
if (parent.firstChild === null) continue;
while (parent.firstChild) {
parent.removeChild(parent.firstChild);
}
}
}
}
使用这样的对象：
const pageTemplate = {
header: {
_init: `<h1>my header</h1>`
},
content: {
_init: `<h1>my content</h1>`
},
info: {
_init: `<h1>my footer</h1>`
},
_init: () => {
/* your js logic like onclick action with your knew dom created */
}
};
new Factory({ template: pageTemplate, action: "_init" });
你的HTML：
<div id="header-pwd"></div>
<div id="content-pwd"></div>
<div id="info-pwd"></div>
通过使用普通的javascript动态生成模板，可以没有任何库或不使用外部html文件。在这种情况下，这意味着您必须编写自己的页眉/页脚迷你模块，该模块在调用时动态呈现。
就像是
function myHeaderTemplate(){
let htemplate = {};
//template properties
htemplate.props = {title: '', otherProps: ''}
//template methods
htemplate.render = function(){
//generate the html template
//possibly add custom content
//use your props here
}
//other methods
return htemplate;
}
然后我们在您的页面中实例化此模板对象，例如about.html
let header = new myHeaderTemplate();
header.props.title = 'About Header';
//other props and customizable content
header.render();
可悲的是，这并没有真正给你一个答案。只是一个想法/可能的方法。你必须使用OOP。