荐 前端开发搭建与开发方法

框架选型

选择框架的时候，主要是要看团队成员对3大框架的熟悉程度，选择团队擅长的框架。

语言选型

除非有特殊要求，要么一般使用TypeScript

脚手架工具

使用脚手架工具可以帮助我们快速的搭建起项目，但是也有一些弊端。

1. 项目配置修改不灵活
2. 脚手架引入了一些项目本不需要库，加大了编译体积

所以如果自己有能力，可以考虑自己搭建（自己搭建好的脚手架应该做一个备份保存，方便以后重复使用），但是出于方便使用现成的脚手架也没太大问题。

文件命名

横杆式 user-center.ts
下划线式 user_center.ts
大驼峰式 UserCenter.ts
小驼峰式 userCenter.ts

个人推荐第一种，不推荐使用大小写混合的形式（因为这样会让你想要把其他资源文件，文件夹等等都改成大小写混合形式）

项目结构与命名

– pages 工程页面目录
– components 工程复用组件目录
– utils 工具类目录
– constants 静态数据目录
– interfaces 数据结构目录
– style 样式封装与变量目录
– assets 项目直接引用资源目录
– static 静态资源目录
– config 项目配置文件目录
– pipes 管道方法目录(Angular项目)
– services 服务类目录(Angular项目)

pages与components目录下的文件结构

– customer-center
user-center.ts
user-center.css

– customer-center
index.ts
index.css

文件结构方式一般可以有2种选择

1. 用页面名字命名文件与文件夹
2. 用页面名字命名文件夹，下面的文件使用index命名

第二种方式的好处在于代码引用页面的时候可以缩短路径长度，但是在编辑多个页面的时候，会让编辑器上的tab上出现多个index.ts无法区分编辑文件, 所以还是更推荐第一种方式。

导出方式

1.统一导出方式
import home from ‘pages’;
import product from ‘pages’;

2.直接引用方式
import home from ‘pages/home/home.tsx’;
import product from ‘pages/product/product.tsx’;

统一导出方式，就是在pages / components / utils目录中添加index.ts文件，引用本目录下的所有文件再次导出。统一导出的好处在于引用页面和组件的时候代码美观，当然直接引用也没有太大问题。

工具类

工具类可以按性质归类放到不同的文件中，这里给出一些常见的分类

request.ts
请求类，对http请求库的封装，一般的说会将后端api地址前缀，header的数据字段(请求验证)，和restful请求方式封装。

evn.ts
运行环境相关，产品运行在不同环境会有语言，平台等不同的环境变量。
例如：
isInWeChat()
isIE()
isInChina()
lang();

auth.ts
认证相关
例如:
saveAccessToken()
isLogin()

string.ts
字符串操作相关
例如:
randomString()

date.ts
日期处理
例如:
getWeekDay();

validator.ts
表单验证相关
例如:
validatePhone()
validateEmail()

storage.ts
存储相关
例如:
localStorage.set();
localStorage.get();
sessionStorage.set();
sessionStorage.get();

data.ts
数据操作相关，对请求和发送的数据结构做裁切和数据转换处理
例如:
fillKeyValue(obj1,obj2);

CSS写法

1. 纯CSS
2. Less
3. Sass

UX设计的效果图，一般都是根据产品特定，定义几个主题颜色，或者特定样式，使用Less，Sass等技术，可以在Style目录下创建
variable.(less|sass)
mixin.(less|sass)
等文件，将主题颜色和特定样式放在里面。

虽然Less，Sass加强的css语法，但是不建议过度使用这些功能，因为过度使用会使维护加大难度，编译速度变慢。

页面Layout写法

1.Float Layout，最原始的布局方式，通用性最好，兼容性最佳。
2.Flex Layout，主流浏览器普遍支持，IE支持得不好。
3.Grid Layout，只有最新的浏览器支持。

选择布局方式要看是否对浏览器兼容有明确要求，如果只是开发移动应用，可以选Float Layout或Flex Layout。

全局数据层选型

全局数据是指符合以下几个要求的数据

1. 全局单例
2. 数据更改后能似的DOM目录树使用的到的地方做响应式更新
3. 可以在项目任何地方调用修改

全局数据可以考虑使用 全局对象，Redux，Mobx，Vuex，Service
使用Redux的时候要注意

1. 组件之间可能被共享的数据，使用redux。
2. 组件内部如无明确外部交互，优选state。
3. 切莫过度依赖redux，状态树尽量简单结构。

Vuex也应该参考以上原则

MobX因为写法灵活，建议在书写前和团队定好写作规范。

Anguar框架使用Service注入。

如果工程不大，完全没必要引入Redux / Mobx/ Vuex 使用全局对象或者全局State就可以了

代码风格

在项目基础代码搭建好之后还应该和团队的所有人确定代码风格

请求类写法，调用方法
TypeScript 返回类型写法
Component / Page 的写法（包括引用文件的顺序，导出格式，代码实现…）
表单写法与数据绑定写法
…

确定好的写法应该有一个说明文档，规范书写要求，对于一些强制性的写法，应该使用ESLint工具强制规范。

组件开发

复用的组件大体分为以下几类

1. header和footer
2. 各种表单控件
3. Toast / Dialog / Loading
4. 地图/图表
5. 复用的列表或块状结构

使用第三方的组件库例如AntDesign，可以加速组件开发，但是要注意引用第三方库可能会致使项目体积加大，尤其是如果只用了第三方库的一个功能，可以考虑将第三方库的这个功能剥离出来，放到源代码中。

表单组件在开发时候要注意数据捆绑功能的选型，Vue和Angular使用model直接做双向捆绑，React应为hock的关系，可以做成 onChange + value 的形式。对于全屏的模态弹出框要特别注意加入的DOM的节点位置，在用户点击浏览器返回前进的时候要能清除掉。

页面开发

页面开发可以注意以下几点

1. 善用计算属性（ Vue中的Computed，React的useMemo(), Angular get Prop() )
2. 移动端的开发可以通过viewport这是定宽，这样要比灵活宽度开发起来简单
3. 该封装组件就封装，避免重复代码
4. 表单请求的时候应该对表单中的输入值做验证，可以考虑每个字段【是否必须/长度是否符合/格式是否符合】
5. 表单提交请求中应该给用户Loading提示
6. 表单提交的后跳转页面要覆盖(replace)历史，而不是推入历史(push)
7. 如果后端返回的数据为空，应该在UI上有无数据的提示

测试方法

工具类测试
工具类通常跟DOM无关，测试写起来最简单，是必须要测的。

页面和组件测试
页面和组件涉及到DOM的渲染，这类测试可以选用Testing Library / Enzyme等虚拟DOM的测试工具。必须要说明的是，这类测试用的虚拟DOM和真实的浏览器渲染还是有区别的，不能代表测试通过了就100%没有问题，而且编写这类代码需要大量时间，如果业务产生变化部分测试代码还可能需要重新。

E2E测试
使用CyPress工具对页面做模拟用户操作的测试。

Git提交前测试
在git提交的时候，应该通过eslint对页面进行检查，同时将项目中的测试运行一遍，通过了才允许提交。可以通过 husky 来实现。

HttpRequest Mock数据方案

在后端的测试环境还没有搭建起来，我们就需要对请求做mock数据，这样既可以随心所欲的修改数据测试，又可以在开发的时候不受后端开发进度影响。

Mock数据的方案有2种

1. 使用Mock.js库，Mock.js 有拦截http请求的功能，详单于把请求直接截断返回在源代码中，使用起来非常方便。
2. 自己用nodejs搭建一个mock服务器，可以选用express框架或者koa框架，这样请求的模拟可以做得更真实。连接本机的数据需要设置devServer的proxy。

不同环境配置方法

测试开发到上线通常要经过本地开发，线上测试环境测试，最终产品
不同的环境有可能有不同的配置需求，例如后端请求地址不一致。

做法可以是在package.json中的不同环境的编译加入不同参数。
在打包文件中读取 process.argv 再通过 DefinePlugin 编译到包中。

对于一些开发到一半不想上线的功能，可以使用Feature Toggle控制。

登录认证方案

1. 通过cookie做认证，这种方案最简单，只需要后端设置好cookie就可以了
2. 通过token做认证，密码验证成功后，后端会给出一个token，这个token前端拿到之后可以存储在sessionStorage中，在请求的时候将其值写到http header段里

重构与性能优化

接手到的项目有可能是之前程序员，或者经手过好几代程序员的代码。如果项目的结构混杂性能差可以参考将本文的步骤再重新优化一遍。

1. 去掉多余的第三方库
2. 优化项目目录结构
3. 改善文件命名
4. 使用eslint限制代码，再改造代码

本文地址：https://blog.csdn.net/weixin_36330664/article/details/107207424