构建前端项目

 分离
为什么需要 “前后端分离、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实现 麻烦
电商类应用必须要使用。
解决思路:

服务器端渲染（SSR）：服务器端和前端公用同一个应用，然后通过构建工具及配置，确定哪些组件需要再服务器端渲染，那些组件需要再客户端渲染。
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中间层的模板输出。