美文网首页
非渔之鱼,君其飨之:使用 React+Mustache 搭建一个

非渔之鱼,君其飨之:使用 React+Mustache 搭建一个

作者: 郑虎三 | 来源:发表于2019-05-03 12:16 被阅读0次

题外话

最近一月实习入职,体验了一把 994 的生活 (因为周三我学校还有课,一周实习四天),也算是马老师口中的 “身在福中” 了,虽然很是疲惫,但是确实收获颇多,公司里面很多很多大佬,于我眼界、技术、想法都提升增益了很多,特别是技术,我一个一直在学习 Vue 的菜虚鲲突然进了 React 项目组,羊入狼群,不知所措,不过还好的是有点 Vue 的底子,所以学起来也不算太难...

项目概述

这个月也一直在负责搭建一个类似蚂蚁金服的设计语言网站,受益匪浅,项目也差不多完成了,马上上线了,所以也花些时间理一理这个项目的技术实现,因为是公司项目,为了保密(不失业),所以我这里不会贴任何源代码,因为我这个项目与蚂蚁金服的 AntDesign 很是相似,所以我之后的介绍都以 AntDesign 为例
伏愿:不现鱼之相,仍识渔之意,一道非渔之鱼,君其飨之!

技术分析

先放一张 AntDesign 的官网截图



开始剖析:




其实整个站点结构极其简单,我已经都画出来了:

  • 头部,底部,侧边栏:这三部分结构是内容都是不变的,最多就是不同的选项卡被选中的时候颜色变一下
  • 正文内容,锚点定位栏,前后页跳转:这三部分随着页面的不同内容也会不同,所以这部分需要做定制化处理

技术栈

如果是初入门的切图仔,制作这个网站其实也是一点压力都没有的,估计压力比较大就是样式和自适应的问题,利用 HTML+CSS+一点点的 JS 只要写好一份页面,然后每一个页面对应一份 HTML 和 CSS,又因为整个站点的页面很相似,所以利用 CV 大法,可以很快地完成整个站点
所以目录结构可能就是:
三个文件夹:JS、CSS、HTML,然后每个页面一一对应
如果是这种方式写出来的代码,代码结构臃肿,可维护性差,(而且显得大公司就很没有水准……)
So,就有利用这样的方式:

  • React:前端三大框架之一
  1. 数据驱动 DOM,将一些静态的数据抽离出来,避免臃肿重复的 DOM 结构
  2. 组件化,使各个页面相似的结构抽离出来,形成一个组件
  • Mustache:前端模板引擎

类似 FreeMarker 模版引擎,不过不同于 FreeMaker 依托于 Java 相得益彰, Mustache 是根正苗红的前端模板引擎,十分友好好上手,语法和应用搭配 React 简直不要太爽

  • Gulp+Sass:CSS 预处理器和自动构建工具

利用 Sass 再也不用写面条一样的臃肿丑陋的 CSS 了,其中的对于 CSS 变量,函数,CSS 结构的拓展优化非常得好,又因为浏览器只会识别 CSS 文件,这时候需要 Gulp 自动化构建工具了,Gulp 不仅仅可以将 Sass 文件打包成 CSS 文件,而且可以做到自动化构建,巴拉巴拉……具体可自行了解

  • Eslint+Stylelint:代码规范

当进行大型项目开发的时候,项目组不止一个人在开发,而且项目在版本迭代的时候需要维护,这时候代码规范就极其重要了

技术实现

以上介绍了大概介绍了技术栈,那么接下来就是怎么实现蚂蚁金服的 AntDesign 的技术实现了!So,让我们一层层揭下AntDesign 的 衣服 面纱吧!

组件化

在前文中我就提到:
React 的好处之一:将各个页面相似的结构抽离出来,形成一个组件
AntDesign 站点网页的头部,底部,侧边栏,锚点定位栏,前后页跳转都是结构相同的部分,所以这些都可以抽离出来,放置在一个 Components文件夹中,单独成一个组件,文件目录类似这样:

Components
 |—— Header.js
 |—— NavBar.js
 |—— PageNav.js
 |—— PageTurn.js
 └── Footer.js
  • 头部和尾部

头部和尾部结构并不复杂,而且多是静态的固定的数据,所以可以直接写,然后引入各个页面中

  • 侧边栏

侧边栏可以直接写样式,通过重复的 DOM 结构堆砌而成
但是可以利用 React 的好处之二:数据驱动 DOM,将一些静态的数据抽离出来,避免臃肿重复的 DOM 结构
1.将侧边导航栏的内容数据抽成一个数组,独立在在一个独立的NavData.js文件中然后export出去
2.在NavBar.js中引入NavData.js,通过Array.map()方法将数组依次遍历然后生成重复的相同DOM

Example:


export const allMenus = [
    {
      text: 'Ant Design',
      type: 'design',
      menus: [
        { text: '介绍', type: 'design1', url: '/design/introduce.html' },
        { text: '设计价值观', type: 'design2', url: '/design/design-values.html' },
        { text: '实践案例', type: 'design3', url: '/design/practice-case.html' },
      ],
    },
    {
      text: '原则',
      type: 'principle',
      menus: [
        ...//省略原则的子选项
      ],
    },
    ...//省略后续的菜单选项
  ];

可以将菜单栏的菜单如此抽出构成一个数组,然后将数组 allMenus 遍历生成 DOM

  • 前后页跳转
    前后页跳转中的内容就是左侧菜单栏中的子选项,只要获取当前的页面的前一项和后一项的菜单栏子选项就可以了,所以也可以同样利用刚刚抽离出来的数组 allMenus
正文内容渲染

正文内容每页都不一样,所以是无法抽离成组件的,所以这个需要单独写,但是每一个 HTML 文件除<body></body>标签其中的内容不一样,其他都可以复用,所以这时候 Mustache 就派上用场了:

  1. 每个页面单独写一个 JS 文件,写成一个 React 类,然后就等于写 HTML一样在类render()中写页面内容 DOM
  2. 将页面的头部菜单类别、主菜单类别、子菜单类别、锚点内容作为类的属性一起export出去,这样就能在写锚点定位栏组件和页面跳转组件的时候使用props接收数据
  3. 创建一个单独的 js 文件,来管理这么多页面export出来的数据内容,即类似上文的将导航栏抽成一个数组一样,同理,将所有的页面也抽成一个数组,之后就可以再使用Array.map()方法,配合 Mustache 一一将 React 渲染成 html 文件
    Example:
    我用 AntDesign 菜单栏的第一项 'Ant Design' 的 '介绍' 页面为例:

每个页面有自己的头部菜单类别(headType)、主菜单类别(firstType)、子菜单类别(subType)、锚点内容(affixList),那么我们就可以直接在页面中定制化然后暴露出去:

import React, { Component } from 'react';

export default class Introduce extends Component {
  render() {
    return (
      <div className="content">
        {/* '介绍' 页面的 DOM 结构*/}
       </div>
    );
  }
}

Introduce.headType = 'design';
Introduce.firstType = 'design';
Introduce.subType = 'design1';
Introduce.affixList = [
  '设计资源',
  '前端实现',
  '谁在使用',
  '社区评价',
  '如何贡献',
];

以此类推,创建这么一个数组,来管理这么多的页面数据:

import Introduce from '../src/pages/design/Introduce';
import DesignValues from '../src/pages/design/DesignValues';
import PracticeCase from '../src/pages/design/PracticeCase';
...//将每个页面 export 的都引进来

export const allPages = [
  {
    mainCpn: Introduce,
    title: '介绍',
    name: 'design/introduce.html',
  },
  {
    mainCpn: DesignValues,
    title: '设计价值观',
    name: 'design/design-values.html',
  },
  {
    mainCpn: BarrierFree,
    title: '实践案例',
    name: 'design/practice-case.html',
  },
...//省略其他页面
];
  1. 写一份base.html作为渲染的基础模版,在<body></body>中定义一个变量,作为 Mustache 内容填充的插槽:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>{{title}}</title>
    <link rel="stylesheet" href="/css/base.css?v={{version}}" />
</head>

<body>
    <div id="app">{{{ssrHtml}}}</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>
<script type="text/javascript" src="/js/base.js?v={{version}}"></script>

</html>
  1. 利用fs这个 node 模块读取base.html的内容,然后作为 Mustache.render()方法的渲染对象参数,再将之前构建好的页面数组赋值给 base.html定义好的变量 ssrHtml ,再一一遍历作为被渲染对象,然后再使用fs写出各个 HTML 文件

如此这般,最后便生成了整个项目的目录文件
哦,对了,为什么会引入了 Jquery?
因为这个项目有自适应,所以会有动画和操作 DOM ,而且 React 只是单纯地直接渲染 DOM ,没有操作数据来驱动 DOM ,所以没有和 Jq 冲突,所以可以放心地使用 Jq (其实用到 Jq 的地方也不多,就一些滚动监听之类的几个方法)

The End

其实有很多细节的,但是很多细节一聊就暴露我这个公司项目的源码啊什么的了,而且由于时间实力原因,可能很多问题讲不清晰,欢迎留言私信!定当改进加勉!

相关文章

  • 非渔之鱼,君其飨之:使用 React+Mustache 搭建一个

    题外话 最近一月实习入职,体验了一把 994 的生活 (因为周三我学校还有课,一周实习四天),也算是马老师口中的 ...

  • 致良知之示弟之立志说

    授之以鱼不如授之以渔

  • 愚公钓鱼

    愚公者,我之谓也。渔者两种,垂钩为钓,张网为捕。昔,姜太公垂而无钩,其心非鱼,而在钓意,故不可谓之渔事,乃...

  • 完美

    借一隅悦己美怡君 吸天地之灵气众美花成群鱼与渔,,鱼予我

  • 明清小品文选 03

    【梅曾亮 观渔】 渔于池者,沉其网而左右縻之。网之缘,出水可寸许;缘愈狭,鱼之跃者愈多。有入者,有出者,有屡跃而...

  • 《国语》之一百十二

    楚成王以周礼享重耳 遂如楚,楚成王以周礼享之,九献,庭实旅百。公子欲辞,子犯曰:“天命也,君其飨之。亡人而国荐之,...

  • 新翻转课堂强调自学精神 / 「观影视、学心理」

    古谚云:授人以鱼不如授之以渔。 授人以鱼不如授之以渔-- 让学生学会自学之道也。

  • 小议:“鱼”不如“渔”, “知道”不如“应用”

    小议:“鱼”不如“渔”, “知道”不如“应用” “授之以鱼,不如授之以渔”,意思是说,灌输再多的内容也不如教会学习...

  • 夜飞扬

    子非鱼,安之鱼之乐? 其实鱼,根本就没有过快乐。 人非圣贤,安之圣贤其德其善也? 焉然,无人可谓为之圣贤也。 多久...

  • 车巢科技代理商——渔与鱼

    授之以鱼不如授之以渔是一句文言文名言,出自原文:“授人以鱼,不如授之以渔,授人以鱼只救一时之急,授人以渔则可解一生...

网友评论

      本文标题:非渔之鱼,君其飨之:使用 React+Mustache 搭建一个

      本文链接:https://www.haomeiwen.com/subject/kbfnwqtx.html