构建基于组件的网站

分享于 

14分钟阅读

Web开发

  繁體

介绍

web SPA ( 单页应用程序) 已经成为现代。响应式和结构化的web应用,基于web开发的web开发,提高了开发者的生产力和开发效率。 web平台的最新进展,特别是 HTML5/Ajax/WebSocket/HTTP2, 和流行的JavaScript框架插件,使web应用程序开发处于良好。 然而,构建一个多页面网站并不是。

经典网站仍然由多个页面组成,主要是 static 内容。 加载速度,轻松导航,页面级别 SEO,用户体验跟踪,等等 是多页面网站的基本特性。 对于大规模的面向内容的网站,一致的外观和感觉,页面之间的共享组件以及快速更新和部署也是web操作的关键。 使用技术构建内容网站具有重大的挑战和缺点。

web应用的复杂性越来越大,也需要将 public 面向的网站从认证要求的功能中分离出来,SPA 方法仅适用于大型站点的一部分。 特别是当多个团队。优先级。体系结构和技术堆栈时,将不同的网页分成架构师。

本文提出了一种基于构件的多页面网站构建技术,具有高组成能力。可以重用性。可以维护性和高效。

项目源代码和快速入门指南可以在 https://github.com/modesty/react2html 找到。

背景

是一个开源项目,旨在解决在基于web的多页面网站构建时遇到的挑战。 模型利用 React.js的无状态功能组件模型,通过组合能力。复用性和共享能力。 通过使用 unique,可以从较低级别共享组件,鼓励"关注点分离",通过易于编写,定制和重用的独特'构建时间组件模型"来实现站点的所有内容。

web服务支持,包括在目标目录中创建页面名称,链接,字体和其他媒体文件,包括图像。图标。字体和其他媒体文件的页面名称。 React2Html插件的'生成'脚本。链接和页面。

使用 ,源代码树从JavaScript和 JSX中的组件开始,中的CSS模块,每个页面由指定目录中的组件组成。 编译( 运行生成脚本) 后,所有源代码将作为每个页面的HTML文件编译和输出,引用绑定的客户端JavaScript和 CSS。

例如用于多页面网站的典型源代码树结构可能类似于:

。react2html - 示例源代码结构

生成脚本将在编译后生成'目标'目录,使它的部署就绪:

。react2html - 编译后的样例目标目录结构

在这里,below 是一些值得注意的方面:

  • src/scripts/client under uglified webpack/ES2015模块/模块开发的每个客户端JavaScript文件都是它自己的 es6/模块的一部分
  • 所有文件 src root and src/images 将直接复制到 target roottarget/images 目录中
  • src/scripts/pages 下的所有JavaScript文件将被编译为 target/[page_name]/index.html. 例如 src/scripts/pages/about 是作为 target/about/index.html. 编译的,这个目录结构支持页面导航的干净 url
  • src/scripts/model 下的所有JavaScript文件都是构建时间模型,它允许在构建时为不同页面共享

使用代码

要开始,首先克隆 GitHub repo:

$ cd [dev_root]
$ git clone https://github.com/modesty/react2html.git$ cd react2html

安装依赖项:

$ npm i

运行生成

$ npm run build

现在你可以检查 target 目录中的输出。

对于开发和调试,只需运行

$ npm start

它将自动清理 target,编译整个源树,自动启动 http://localhost:8181, 上的默认浏览器,开始监视源文件更改。 无论什么时候,只要对源代码或者资产文件有保存的更改,就会根据需要进行编译,然后自动刷新浏览器。

生成脚本说明

所有构建脚本都位于 src/tool 目录中,它对编译。捆绑和处理进行繁重的提升。 它提供了所有必需的功能,但没有。 如果你需要进一步定制或者扩展它,下面是一些关键定制点:

react2html build_scripts

  • base.config:
    • 自定义源和目标目录 NAME。脚本和SASS目录名称和入口点。
    • 自定义资产文件类型
    • 运行时从CDN加载的CSS和JavaScript库列表
  • base.helper:
    • 自定义localhost服务器地址,端口,root 服务目录,默认文件,等等
  • build.asset:
    • 如果你不想要 Apache .htaccess 文件,请从这里删除它
  • build.watcher:
    • 自定义要监视auto-re-compile和自动刷新的文件和目录
  • webpack.config:
    • 自定义 web pack模块( uglify,SASS,等等 ),源映射,输出目标等。

添加新页

现在我们可以看到在示例网站上添加一个新页面是多么简单快捷。 假定源代码结构和构建脚本保持原样,我们希望添加一个新的'contact'页面,它可以通过 http://localhost:8181. 访问

首先,在 src/scripts/pages 目录下创建一个名为 contact.js的新文件。 可以通过组成组件轻松地构建新页面:

"use strict";<br/>import React from 'react';<br/>import Conf from '../../../tool/base.config';<br/>import Head from '../components/Head';<br/>import Header from '../components/Header';<br/>import Main from '../components/Main';<br/>import Footer from '../components/Footer';
let pkg = require("../../../package.json");<br/>const Contact = () => {<br/> let pageTitle = `Contact Us`;<br/> return (<br/><htmlclassName="no-js"lang="en"><br/><Headtitle={pageTitle} description={pkg.description} styles={Conf.styles} scripts={Conf.scripts} rel="../"/>
<bodyclassName='container-fluid'><br/><Headertitle={pageTitle} rel="../"/><br/><Main><br/><h1>React2Html</h1><br/><p>email the author: <ahref="mailto:modestyz@hotmail.com?subject=About%20CoeProject%20Article">modestyz@hotmail.com</a><br/></p><br/></Main><br/><Footerrel="../"/><br/></body><br/></html><br/> );<br/>};
export default Contact;

on组成了 Head 组件,引用了库 js/css和 target/styles 路径,使用 Header, Main, Footer 组件对网页进行了更多的内容。

其次,构建它:

$ npm start

就是这样,新页面位于 http://localhost:8181/contact

已经编译的输出在 target/contact/index.html, 中所有uglified和缩小,以提高负载性能。

当页面 header。页脚。样式或者nfs链接发生变化时,联系人页本身不需要更改。

更新模型

navbar 中添加链接到的新 contact 页面,这是 Header 组件的一部分,只需要在 src/scripts/model/menu.js 中更新它的模型:

const MenuModel = [
 {name: 'Home', href: "."},
 {name: 'Portfolio', href: "#", children: [
 {name: "Products", href: "#"},
 {name: "Services", href: "#"}
 ]},
 {name: 'Team', href: "#", children: [
 {name: "Creative Team", href: "#"},
 {name: "Technical Team", href: "#"},
 {name: "Subject Domain Expert", href: "#"}
 ]},
 {name: 'Testimonial', href: "#", children: [
 {name: "Partners", href: "#"},
 {name: "Customers", href: "#"}
 ]},
 {name: 'Support', href: "#", children: [
 {name: "Contact Us", href: "#"},
 {name: "Schedule a Visit", href: "#"}
 ]},
 {name: 'About Us', href: "./about/"},
 {name: 'Contact Us', href: "./contact/"}];

类似地,更新页脚模型 src/scripts/model/footer.js,在 Footer 组件中添加指向 contact 页面的链接:

const FooterModel = {
 siteLinks: [
 {name: "About", href: "./about"},
 {name: "Legal", href: "#"},
 {name: "Privacy", href: "#"},
 {name: "Contact", href: "./contact"} ],
 socials:[
 {id: "icon-facebook", href: "http://facebook.com"},
 {id: "icon-twitter", href: "http://twitter.com"},
 {id: "icon-youtube", href: "http://youtube.com"},
 {id: "icon-linkedin", href: "http://linkedin.com"},
 {id: "icon-dribbble", href: "http://dribbble.com"},
 {id: "icon-rss", href: "http://rss.com"}
 ],
 copyRight: "Modesty Zhang © 2015 - 2016",
 addressLine1: "7330 Clairemont Mesa Blvd,",
 addressLine2: "San Diego, CA 92111",
 phone: "+1-111-222-3333",
 email: "modestyz@hotmail.com"};

无状态功能组件

React.js 在v0.14年引入了无状态功能组件,它也是 react2html的核心,使用组件创建多页面网站。 无状态和泛函意味着 react2html 中的所有组件都没有内部状态,如果传递的属性相同,则输出标记将是相同的。

reac2html 案例中,所有组件的属性都通过 model 传递。 例如给定 HeaderModel 上面,下面是 Header 组件的代码:

"use strict";import React from 'react';import Menu from './Menu';import processRelPath from '../model/header';
const Header = ({ title, rel }) => {<br/> let dataModel = processRelPath(rel);<br/> let {homeLink, bannerLink} = dataModel;
 return (<br/><headerclassName='header'><br/><divclassName="row"><br/><divclassName="col-md-3 col-xs-12 hidden-xs"><br/><divclassName="logo"><br/><ahref={homeLink.href} title={homeLink.name}><br/><imgsrc={homeLink.img} alt={title} /><br/></a><br/></div><br/></div><br/><divclassName="col-md-6 col-xs-12"><br/><divclassName="banner-area"><br/><ahref={bannerLink.href}><br/><imgsrc={bannerLink.img} alt={bannerLink.name} className="img-responsive"/><br/></a><br/></div><br/></div><br/><divclassName="col-md-3 hidden-sm hidden-xs"><br/><divclassName="soc-area"><br/><divclassName="icons-social"><br/> {dataModel.socials.map( s => <ahref={s.href} className={s.id} key={s.id}></a>)}<br/></div><br/></div><br/></div><br/></div><br/><Menurel={rel}></Menu><br/></header><br/> );<br/>};
在编译时,组件代码非常相似,使用简单的函数语法,没有内部状态,像纯组件或者哑组件,在构建时。

无状态功能组件模式鼓励通过这些简单组件的不同层次构建网页,使开发人员能够使用JavaScript和JSX来表达数据驱动的UI。 在抽象的意义上,它使用React的思想来创建React不可以知组件及它的组成以创建更复杂的多页。

根据网站的性质和复杂性,model 可以在构建时或者运行时被 API/Database/CMS 检索和构造。 响应组件和其他JavaScript库和框架也可以在运行时使用,以响应数据存储更改。 示例代码只关注 static 网站和 static 数据模型。

虽然组件代码和编译输出是不可知的,但是当前实现的确利用了'React同构'特性, ReactDOMServer.renderToStaticMarkup 是使 react2html 在构建过程中有效工作的关键支持。

包起来

在网站上,你可以使用 static,analytics,react2html,等等,,等。 系统利用了无状态的功能组件,使得数据驱动多页面网站的开发通过重用性和。

更详细的细节和所有源代码可以在 https://github.com/modesty/react2html 找到。 欢迎捐赠和请求请求。


COM  WEB  BASE  构建  component  网站  
相关文章