构建前端项目

cohciz

2019-06-29

关注关注

分离

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

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

前后端分离具体：

工程分离
数据流分离

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

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

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

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

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

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

并行开发

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

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

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

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

同等模拟服务器环境

多环境配置&切换

把应用对接口的实现进行一次封装隔离 (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 页面

路由组件：

按需加载

按需加载: