选择框架的时候，主要是要看团队成员对3大框架的熟悉程度，选择团队擅长的框架。
除非有特殊要求，要么一般使用TypeScript
使用脚手架工具可以帮助我们快速的搭建起项目，但是也有一些弊端。
所以如果自己有能力，可以考虑自己搭建（自己搭建好的脚手架应该做一个备份保存，方便以后重复使用），但是出于方便使用现成的脚手架也没太大问题。
横杆式 user-center.ts
下划线式 user_center.ts
大驼峰式 UserCenter.ts
小驼峰式 userCenter.ts
个人推荐第一种，不推荐使用大小写混合的形式（因为这样会让你想要把其他资源文件，文件夹等等都改成大小写混合形式）
– pages 工程页面目录
– components 工程复用组件目录
– utils 工具类目录
– constants 静态数据目录
– interfaces 数据结构目录
– style 样式封装与变量目录
– assets 项目直接引用资源目录
– static 静态资源目录
– config 项目配置文件目录
– pipes 管道方法目录(Angular项目)
– services 服务类目录(Angular项目)
– customer-center
user-center.ts
user-center.css
– customer-center
index.ts
index.css
文件结构方式一般可以有2种选择
第二种方式的好处在于代码引用页面的时候可以缩短路径长度，但是在编辑多个页面的时候，会让编辑器上的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);
UX设计的效果图，一般都是根据产品特定，定义几个主题颜色，或者特定样式，使用Less，Sass等技术，可以在Style目录下创建
variable.(less|sass)
mixin.(less|sass)
等文件，将主题颜色和特定样式放在里面。
虽然Less，Sass加强的css语法，但是不建议过度使用这些功能，因为过度使用会使维护加大难度，编译速度变慢。
1.Float Layout，最原始的布局方式，通用性最好，兼容性最佳。
2.Flex Layout，主流浏览器普遍支持，IE支持得不好。
3.Grid Layout，只有最新的浏览器支持。
选择布局方式要看是否对浏览器兼容有明确要求，如果只是开发移动应用，可以选Float Layout或Flex Layout。
全局数据是指符合以下几个要求的数据
全局数据可以考虑使用 全局对象，Redux，Mobx，Vuex，Service
使用Redux的时候要注意
Vuex也应该参考以上原则
MobX因为写法灵活，建议在书写前和团队定好写作规范。
Anguar框架使用Service注入。
如果工程不大，完全没必要引入Redux / Mobx/ Vuex 使用全局对象或者全局State就可以了
在项目基础代码搭建好之后还应该和团队的所有人确定代码风格
请求类写法，调用方法
TypeScript 返回类型写法
Component / Page 的写法（包括引用文件的顺序，导出格式，代码实现…）
表单写法与数据绑定写法
…
确定好的写法应该有一个说明文档，规范书写要求，对于一些强制性的写法，应该使用ESLint工具强制规范。
复用的组件大体分为以下几类
使用第三方的组件库例如AntDesign，可以加速组件开发，但是要注意引用第三方库可能会致使项目体积加大，尤其是如果只用了第三方库的一个功能，可以考虑将第三方库的这个功能剥离出来，放到源代码中。
表单组件在开发时候要注意数据捆绑功能的选型，Vue和Angular使用model直接做双向捆绑，React应为hock的关系，可以做成 onChange + value 的形式。对于全屏的模态弹出框要特别注意加入的DOM的节点位置，在用户点击浏览器返回前进的时候要能清除掉。
页面开发可以注意以下几点
工具类测试
工具类通常跟DOM无关，测试写起来最简单，是必须要测的。
页面和组件测试
页面和组件涉及到DOM的渲染，这类测试可以选用Testing Library / Enzyme等虚拟DOM的测试工具。必须要说明的是，这类测试用的虚拟DOM和真实的浏览器渲染还是有区别的，不能代表测试通过了就100%没有问题，而且编写这类代码需要大量时间，如果业务产生变化部分测试代码还可能需要重新。
E2E测试
使用CyPress工具对页面做模拟用户操作的测试。
Git提交前测试
在git提交的时候，应该通过eslint对页面进行检查，同时将项目中的测试运行一遍，通过了才允许提交。可以通过 husky 来实现。
在后端的测试环境还没有搭建起来，我们就需要对请求做mock数据，这样既可以随心所欲的修改数据测试，又可以在开发的时候不受后端开发进度影响。
Mock数据的方案有2种
测试开发到上线通常要经过本地开发，线上测试环境测试，最终产品
不同的环境有可能有不同的配置需求，例如后端请求地址不一致。
做法可以是在package.json中的不同环境的编译加入不同参数。
在打包文件中读取 process.argv 再通过 DefinePlugin 编译到包中。
对于一些开发到一半不想上线的功能，可以使用Feature Toggle控制。
接手到的项目有可能是之前程序员，或者经手过好几代程序员的代码。如果项目的结构混杂性能差可以参考将本文的步骤再重新优化一遍。
本文地址：https://blog.csdn.net/weixin_36330664/article/details/107207424
如对本文有疑问， 点击进行留言回复！！
使用纯前端JavaScript实现Excel导入导出方法过程详解
微信小程序完美解决scroll-view高度自适应问题的方法
我要评论
网友评论