非渔之鱼，君其飨之：使用 React+Mustache 搭建一个类似蚂蚁金服的 AntDesign 设计语言站点

题外话

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

项目概述

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

技术分析

先放一张 AntDesign 的官网截图

开始剖析：

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

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

技术栈

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

React：前端三大框架之一

数据驱动 DOM，将一些静态的数据抽离出来，避免臃肿重复的 DOM 结构

组件化，使各个页面相似的结构抽离出来，形成一个组件

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 就派上用场了：

每个页面单独写一个 JS 文件，写成一个 React 类，然后就等于写 HTML一样在类render()中写页面内容 DOM
将页面的头部菜单类别、主菜单类别、子菜单类别、锚点内容作为类的属性一起export出去，这样就能在写锚点定位栏组件和页面跳转组件的时候使用props接收数据
创建一个单独的 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',
  },
...//省略其他页面
];

写一份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>

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

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

The End

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

非渔之鱼，君其飨之：使用 React+Mustache 搭建一个类似蚂蚁金服的 AntDesign 设计语言站点