Question

我需要有关具有如下布局的页面应该具有哪些特定组件的建议（线条只是逻辑分隔）。 content部分中的内容会根据tab中单击的navigation side bar进行更改

我在想的是

标题的组件
侧栏的组件
通知组件
不同内容类型的单个组件，因为它们只是文字不同

我倾向于为页面设计这个设计时要记住，测试这些组件会更容易。

注意：

这些组件无需在产品的任何其他位置使用
我正在使用vue开发前端
内容不依赖于网址中的route

有关如何构建页面的任何建议？

Answer 1

请检查此项目：https://github.com/marcelo3macedo/personalWebSite_Pure_ES6。

该页面是由ES6的块动态创建的。检查app.js

import { Data } from "./data"

class WebSite {
  constructor() {
    this._body = undefined;
    this._header = undefined;
    this._main = undefined;
    this._footer = undefined;
  }

  init() {
      console.log("Website - init");
      this._body = document.body;

      this.createHeader();
      this.createContainer();
      this.createFooter();

      this.insertElements();
  }

  createContainer() {
    console.log("Creating - Container");

    let main = document.createElement("main");
    let resume = this.createContainerResume();
    let works = this.createContainerWorks();
    let contact = this.createContainerContact();

    main.appendChild(resume);
    main.appendChild(works);
    main.appendChild(contact);
    this._main = main;
  }

  createContainerResume() {
    console.log("Creating - Container Resume");

    let section = document.createElement("section");
    let sectionHeader = document.createElement("header");
    let sectionTitle = document.createElement("h2");
    let sectionDescription = document.createElement("h3");
    let sectionUl = document.createElement("ul");
    let sectionLi = document.createElement("li");
    let sectionLink = document.createElement("a");
    let sectionLinkText = document.createElement("h5");

    section.setAttribute("id", "one");
    sectionHeader.setAttribute("class", "major");
    sectionUl.setAttribute("class", "actions");
    sectionTitle.textContent = Data.resume.title;
    sectionDescription.textContent = Data.resume.description;
    sectionLink.setAttribute("href", Data.resume.link.href);
    sectionLink.setAttribute("class", Data.resume.link.class);
    sectionLinkText.textContent = Data.resume.link.text;

    sectionHeader.appendChild(sectionTitle);
    sectionUl.appendChild(sectionLi);
    sectionLink.appendChild(sectionLinkText);
    sectionLi.appendChild(sectionLink);
    section.appendChild(sectionHeader);
    section.appendChild(sectionDescription);
    section.appendChild(sectionUl);

    return section;
  }

  createContainerWorks() {
    console.log("Creating - Container Works");

    let section = document.createElement("section");
    let sectionHeader = document.createElement("h2");
    let sectionRow = document.createElement("div");

    section.setAttribute("id", "two");
    sectionHeader.textContent = Data.workInfo.title;
    sectionRow.setAttribute("class", "section-works row");

    for (var i = 0; i < Data.works.length; i++) {
      let work = Data.works[i];
      let article = document.createElement("article");
      let articleLink = document.createElement("a");
      let articleImage = document.createElement("img");
      let articleTitle = document.createElement("h3");
      let articleDescription = document.createElement("h4");

      articleLink.setAttribute("href", work.link);
      articleLink.setAttribute("target", "_blank");
      articleImage.setAttribute("src", work.image.src);
      articleImage.setAttribute("alt", work.image.alt);
      articleTitle.textContent = work.name;
      articleDescription.textContent = work.description;

      articleLink.appendChild(articleImage);
      article.appendChild(articleLink);
      article.appendChild(articleTitle);
      article.appendChild(articleDescription);
      sectionRow.appendChild(article);
    }

    section.appendChild(sectionHeader);
    section.appendChild(sectionRow);

    return section;
  }

  createContainerContact() {
    console.log("Creating - Container contact");

    let section = document.createElement("section");
    let sectionHeader = document.createElement("h2");
    let sectionDescription = document.createElement("p");
    let sectionRow = document.createElement("div");
    let sectionList = document.createElement("ul");

    section.setAttribute("id", "three");
    sectionHeader.textContent = Data.contact.title;
    sectionDescription.textContent = Data.contact.description;
    sectionRow.setAttribute("class", "row");
    sectionList.setAttribute("class", "contact-list");

    for (var i = 0; i < Data.contact.info.length; i++) {
      let info = Data.contact.info[i];
      let infoItem = document.createElement("li");
      let infoHeader = document.createElement("h4");
      let infoContent = document.createElement("div");
      let infoContentText = document.createElement("h6");

      infoHeader.textContent = info.title;
      infoContentText.textContent = info.description;

      infoContent.appendChild(infoContentText);
      infoItem.appendChild(infoHeader);
      infoItem.appendChild(infoContent);
      sectionList.appendChild(infoItem);
    }

    section.appendChild(sectionHeader);
    section.appendChild(sectionDescription);
    section.appendChild(sectionRow);
    sectionRow.appendChild(sectionList);

    return section;
  }

  createHeader() {
    console.log("Creating - Header");

    let header =  document.createElement("header");
    let headerInner = document.createElement("div");
    let headerInnerLink = document.createElement("a");
    let headerInnerLinkImage = document.createElement("img");
    let headerInnerContainer = document.createElement("h1");
    let headerInnerTitle = document.createElement("strong");
    let headerInnerSubTitle = document.createElement("h2");
    let headerIconsInner = document.createElement("div");
    let headerIconsUlIcons = document.createElement("ul");


    header.setAttribute("class", "header");
    headerInner.setAttribute("class", "inner");
    headerInnerLink.setAttribute("href", Data.header.link.href);
    headerInnerLink.setAttribute("class", Data.header.link.class);
    headerInnerLinkImage.setAttribute("src", Data.header.image.src);
    headerInnerLinkImage.setAttribute("alt", Data.header.image.alt);
    headerInnerTitle.textContent = Data.header.title;
    headerInnerSubTitle.textContent = Data.header.subTitle;
    headerIconsInner.setAttribute("class", "icon-inner");
    headerIconsUlIcons.setAttribute("class", "icons");

    for (var i = 0; i < Data.links.length; i++) {
        let item = Data.links[i];
        let headerLi = document.createElement("li");
        let headerLia = document.createElement("a");
        let headerLiaText = document.createElement("span");

        headerLia.setAttribute("href", item.href);
        headerLiaText.setAttribute("class", item.class);

        headerLia.appendChild(headerLiaText);
        headerLi.appendChild(headerLia);
        headerIconsUlIcons.appendChild(headerLi);
    }

    headerInnerLink.appendChild(headerInnerLinkImage);
    headerInnerContainer.appendChild(headerInnerTitle);
    headerInner.appendChild(headerInnerLink);
    headerInner.appendChild(headerInnerContainer);
    headerInner.appendChild(headerInnerSubTitle);
    headerIconsInner.appendChild(headerIconsUlIcons);
    header.appendChild(headerInner);
    header.appendChild(headerIconsInner);

    this._header = header;
  }

  createFooter() {
    console.log("Creating - Footer");

    let footer = document.createElement("footer");
    let footerInner = document.createElement("div");
    let footerUlCopyright = document.createElement("ul");
    let footerUlCopyrightTitle = document.createElement("li");
    let footerUlCopyrightTitleText = document.createElement("h5");

    footerInner.setAttribute("class", "inner");
    footerUlCopyright.setAttribute("class", "copyright");
    footerUlCopyrightTitleText.textContent = Data.copyright.link.text;

    footerUlCopyrightTitle.appendChild(footerUlCopyrightTitleText);
    footerUlCopyright.appendChild(footerUlCopyrightTitle);
    footerInner.appendChild(footerUlCopyright);
    footer.appendChild(footerInner);
    this._footer = footer;
  }

  insertElements() {
    let bodyContent = document.createElement("div");
    bodyContent.setAttribute("class", "body-Content");

    bodyContent.appendChild(this._header);
    bodyContent.appendChild(this._main);
    this._body.appendChild(bodyContent);
    this._body.appendChild(this._footer);
  }
}

let website = new WebSite();
website.init();

我希望这会有所帮助。

建议将页面拆分为组件的方法

1 个答案: