构建前端项目

分离

为什么需要 “前后端分离、web服务器与static服务器分离”:

• 前端与后端耦合 (需求)
• 自动化、工程化的构建前端的代码 (基础条件)
• 模块化、组件化，项目共享代码 (过程)
• 浏览器运行速度 (硬件)

前后端分离具体：

• 工程分离
• 数据流分离

web服务器与static服务器分离:

• web 服务器：存放运行后端 web 应用的程序，以及前端 html 文件（入口文件）
• static 服务器：静态资源服务器，存放前端除 html 文件之外的其他资源文件，包括 js， css， images

web服务器与static服务器的缺点：

• 前端构建过程中会产生大量的冗余文件
• 前端人员能够直接接触到后端代码，也不够安全
• 静态资源会占用 web 服务器的资源和带宽

web服务器与static服务器的注意点：

• 多个项目共用同一个 static 服务器
• 保证静态资源的路径的正确

并行开发

本地化接口模拟、前后端并行开发

本地化接口模拟原因: 前端与后端耦合，web 前端程序依赖数据。

本地数据模拟的解决方案的思路：(更多项目是配合使用)

• 同等模拟服务器环境，就是依据文档，完全按照服务器的接口配置搭建本地的接口服务；
• 多环境配置&切换，就是从代码的层面配置多个环境（如 线上环境，本地环境），根据是在线上还是在本地切换不同的环境。

同等模拟服务器环境

• mork json数据
• RAML(RESTful API Modeling Language 即 RESTful API 建模语言)
• Swagger

多环境配置&切换

• 把应用对接口的实现进行一次封装隔离 (fetch file)
• 更好的管理代码

开发过程中预定 3 个环境：0（线上环境 prod），1（本地模拟后台接口环境 dev），2（并行开发环境 uat）

规范

• 编码规范
• 项目结构规范
• 框架、工具规范
• 其他约定

编码规范

Code Guide

• html: 缩进，标签，加载顺序
• css: 缩进，换行，引号，注释
• js: 缩进，换行，变量名称，括号，文档注释

项目结构规范

文件、目录命名规范，模块化分组规范，组件化规范

• 变量:
  完整英文命名的用复数形式，缩写用单数形式
  全部采用小写方式， 以下划线分隔

• 模块化分组规范：

  /project/src/: 工作空间

  index.html: html 入口文件

  index.js: js 入口文件

  index.(css|less|scss): 样式入口文件

  js/: js 文件目录

  js/ajax/: 对 ajax 封装的目录
  js/util/: 工具类函数的目录
  js/pages/: spa 应用页面目录
  js/data/: 静态数据目录
  js/tpl/: 模板目录
  js/(event|view)/: 事件监听文件目录
  

  data/: 本地 json 数据模拟

  (css|less|scss)/: 样式文件目录

  images/: 图片文件目录

  components/: 组件目录（如果基于 react, vue 等组件化框架）

• 组件化规范：这里的组件化并不是指在代码、框架层面的组件化，而是在架构和规范层面的组件化

  /project/src/component/hello/: hello 组件的工作空间

  README.md: 组件的说明，包括功能介绍、api文档、一些用例等等

  index.js: 组件的入口文件，调用组件将使用如下的方式

  demo/：用例目录

框架、工具规范

框架和 UI 库：

从最开始的时候要确定要技术选型，并且最好不要更改选定的框架和UI库，因为不同的框架，不同的UI库一般相互之间是不兼容的，同时用多个框架或UI库也是要尽量避免。

框架选型

• jquery + bootstrap
• react + ant-design | material-ui |

  Semantic-UI

• vue + element-ui | vux

工具规范：

• eslint: 语法规则和代码风格的检查工具，可以用来保证写出语法正确、风格统一的代码。

其它约定

• 每个 js 文件不应该超过 400 行，超过就应该分块
• 每个 css 文件不应该超过 200 行，超过就应该分块

文档

目的

• 降低团队的协作成本和维护成本
• 提高开发效率和质量
• 开发人员的变动而产生较大的影响

形成文档内容

• 注释 JSDoc：放在方法或函数或类声明之前
• 业务逻辑: 比较复杂的业务逻辑不合适放在注释里，需要单独写逻辑文档
• 更新日志: 方便查找更新状态、时间、开发人员
• 备注: 额外有用的信息

/**
 * 函数功能描述
 *
 * @param arg {type} 变量描述
 * @return {type} 返回值作用描述
 */

SPA

SPA优点：

• 本地路由，由JS定义路由，根据路由渲染页面，控制跳转（最基本特点）
• 文件只会加载一次，最大限度重用文件，提升加载速度。
• 整个应用只有一个入口html文件，路由由前端控制，有时候需要后端配合

Hash Router

原理：location hash

http://www.example.com -> index.html

http://www.example.com -> 主页面
http://www.example.com/#/ -> 主页面
http://www.example.com/#/page1 -> page1 页面
http://www.example.com/#/page2 -> page2 页面

路由组件：

• react-router
• vue-router
• page.js
• director

按需加载

按需加载:

• 按照需要来加载不同的组件/文件
• 避免首页加载缓慢

react 全家桶：react + react-router + redux + redux-saga + react-redux + dva

react 全家桶 + ant-design 开发模板: antd-admin | ant-design-pro

SSR 和 node中间层

解决痛点：

• 使用SPA后，整个页面的渲染基本上都由前端JS动态渲染，搜索引擎的爬取不到，SEO实现 麻烦
• 电商类应用必须要使用。

解决思路:

1. 服务器端渲染（SSR）：服务器端和前端公用同一个应用，然后通过构建工具及配置，确定哪些组件需要再服务器端渲染，那些组件需要再客户端渲染。
2. node中间层：保留服务器端模板渲染的功能，但是由node程序来代替后端语言模板渲染，后端语言与node程序只做数据交互。

SSR

服务器端渲染，由框架与构建工具配合，并依据一定的项目结构和编码方式，共同运行。

next.js: 服务器端渲染 react 组件，使用方法用Next.js快速上手React服务器渲染
nuxt.js: 服务器端渲染 vue 组件，使用方法nuxt.js

node 中间层

从NodeJS搭建中间层再谈前后端分离

淘宝前后端分离实践

node中间层做开发，难点如何让前后端分离的两个项目协同开发与调试:

• 一般web项目开发时有热更新(Hot Reloading)与热替换(Hot Replacing)功能
• 一般node项目开发时有 nodemon功能
• 能将两者结合起来开发，不管改动web项目文件还是node项目文件，浏览器页面都能够自动刷新，就可以在本地调试node中间层的模板输出。