如何使用 html javascript 和 css 创建模板页面

Question

所以我在我的网站上使用 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>

Answer 1

您仍然可以调用在特殊元素上生成 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>

Answer 2

在没有任何库或不使用外部 html 文件的情况下，通过使用普通 javascript 动态生成模板是可能的。在这种情况下，这意味着您将必须编写自己的 header/footer mini-module 代码，在调用时动态呈现。

类似

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();

遗憾的是，这并不能准确地为您提供答案。只是一个 idea/possible 方法。您将不得不为此使用 OOP。

如何使用 html javascript 和 css 创建模板页面

how to create template pages using html javascript and css

html

javascript

css

phonegap