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

【问题标题】：how to create template pages using html javascript and css如何使用 html javascript 和 css 创建模板页面
【发布时间】：2018-03-02 04:29:24
【问题描述】：

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

【问题讨论】：

谷歌“单页应用”或 SPA。非常适合 Phonegap/Cordova。
使用 javascript 模板引擎？...车把、哈巴狗等
我删除了我之前的评论，通过使用纯 JavaScript 动态生成模板，可以不使用任何库或不使用外部 html 文件。这种情况意味着您必须编写自己的页眉/页脚迷你模块，在调用时动态呈现。
请查看更新后的答案，我添加了一个可以满足您需求的工作示例
感谢您的回复真的帮助了我，干杯！

标签： javascript html css phonegap

【解决方案1】：

您仍然可以调用在特殊元素上生成 html 代码的脚本，

假设您在应用程序的每个页面上都有一个 ID #header，该页面调用您的脚本，其中插入一些如下所示的问候：

document.getElementById("#header").insertAdjacentHTML("afterbegin", "&lt;h1&gt;Hello there!&lt;/h1&gt;");

&lt;div id="#header"&gt;&lt;/div&gt;

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>

【讨论】：

【解决方案2】：

通过使用纯 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。

【讨论】：