一些规范的参考

框架

  1. Vue.js（推荐使用）
  2. React.js（次要选项）
  3. 原生（最次要选项）

ESLint

使用 ESLint + Prettier

测试

工具选择

  • Vue：Jest + Vue-Test-Utils + Puppeteer
  • React：Jest + React Testing Library + Puppeteer

编写原则

  • 测试代码时，只考虑测试，不考虑内部实现
  • 数据尽量模拟现实，越靠近现实越好
  • 充分考虑数据的边界条件
  • 对重点、复杂、核心代码，重点测试
  • 利用 AOP(beforeEach、afterEach)，减少测试代码数量，避免无用功能
  • 测试、功能开发相结合，有利于设计和代码重构

编写说明

未来的项目都是基于 Talos 生成，其实也就是使用了 Create-React-App 生成 React 项目，使用了 Vue-CLI@3 生成了 Vue 项目。本身默认都有 Jest 的配置，不需做大的改动。

  • 单元测试和 UI 测试的文件夹统一命名为 tests，测试文件以 .test.js 为后缀
  • 将 tests 文件夹与它们正在测试的代码放在同级目录下，以便相对路径导入时路径更短
  • e2e 测试的文件夹命名为 e2e，并与 src 同放在根目录下
  • VScode 和 WebStorm 都有对应的 Jest 插件，安装后书写代码时有代码补全，debug 和自动运行等功能

数据接口格式

使用 RESTFull 风格

Method Path Route Name Controller.Action
GET /posts posts app.controllers.posts.index
GET /posts/new new_post app.controllers.posts.new
GET /posts/:id post app.controllers.posts.show
GET /posts/:id/edit edit_post app.controllers.posts.edit
POST /posts posts app.controllers.posts.create
PUT /posts/:id post app.controllers.posts.update
DELETE /posts/:id post app.controllers.posts.destroy 
  1. // app/controller/posts.js
  2. exports.index = async () => {};
  3. exports.new = async () => {};
  4. exports.create = async () => {};
  5. exports.show = async () => {};
  6. exports.edit = async () => {};
  7. exports.update = async () => {};
  8. exports.destroy = async () => {};

返回信息格式，必须序列化为标准 JSON 字符串后传输。code 20000成功，50000 服务器错误/失败，43000 权限不足，40400 未找到页面。

  1. {
  2.   "code":20000,
  3.   "data":{
  4.     //数据
  5.   },
  6.   "message":[], //其它提示信息
  7.   "error":"" //错误信息
  8. }