一个敏捷开发前端小团队开发流程

in 前端默认分类 with 0 comment

一个小型前端开发团队,每个人都有各自的特点。在这种情况下,结合敏捷开发的思想,整理了一套相对比较完整的方案,供大家参考。

命名规则

文件命名

目录名、文件名统一使用小写,保证项目有良好的可移植性、可跨平台

由于类 UNIX 系统大小写敏感,而 Windows 系统以及 MAC 系统偶尔出现的大小写不敏感情况,基于远程 git 服务器往往是大侠写敏感的。全部使用小写字母做文件命名可以极大程度的避免此类情况的发生。

文件引用路径

javascript

变量

// 友好
let maxCount = 10;
let tableTitle = 'LoginTable';

// 不友好(错误示范)
let setCount = 10;
let getTitle = 'LoginTitle';

常量

const MAX_COUNT = 10;
const URL = 'https://www.mitkimi.com/';

函数

动词含义返回值
can判断是否可执行布尔值
has判断是否含有某个值布尔值
is判断是否为某个值布尔值
get获取某个值非布尔值,可以为字符串、数组或对象等
set设置某个值无返回值,当判断执行时,返回布尔值
load加载某些数据无返回值,当判断执行时,返回布尔值
// 是否可阅读
function canRead(): boolean {
  return true;
}
// 获取名称
function getName(): string {
  return this.name;
}

类/构造函数

class Person {
  public name: string;
  constructor(name) {
    this.name = name;
  }
}
const Person = new Person('mitkimi');

公共属性和公共方法与变量和函数命名一致;
私有属性和私有方法使用一个下划线作为前缀,后面与公共属性和公共方法保持一致。

class Person {
  private _name: string;
  constructor() {
    // 构造器公共方法
    getName() {
      return this._name;
    }
    setName() {
      this._name = name;
    }
}
const person = new Person();
person.setName('mitkimi');
person.getname(); // -> mitkimi

css

class 和 id 的命名规则:BEM

BEM 是块 (Block)、元素 (Element)、修饰符 (Modifier) 的缩写,利用bong的区块、功能以及样式来给元素命名。这三个部分使用双下划綫 (__) 或者双杠 (--) 连接。

.block {} /* 代表更高级别的组件 */
.block__element {} /* 代表 block 的后代,用于形成一个完整的 block 整体 */
.block--modifier {} /* 代表 block 的不同状态或不同版本 */

id 一般参与样式,命名使用驼峰。给 js 调用钩子时设置为 js_*

注释

单行注释

方法、构造器或类等,在构建之前写。在测试内容、变量等在构建时写,在当前行后空1个空格。

// 注释内容,通常写执行条件、执行结果等
doSth(); //注释内容,通常为 mark

多行注释

/**
 * 注释内容
 * 注释内容
 * 注释内容
 */

方法注释

此类注释比较完整

/**
 * 方法名称
 * @author    mitkimi | i@mitkimi.com | Sept.24, 2018
 * @version   2.x
 * @param     username      string     用户名
 *            passwd        string     密码
 *            isCheck       boolean    是否选中
 * @return    object
 * @example   func( mitkimi, abcde )
 */
注释字段语法含义DEMO
@author@author 作者信息/附属信息描述这个方法或函数的作者以及时间@author mitkimi 2018/09/24
@version@version xx.xx.xx版本号@version 1.0.3
@param@param 参数名 数据类型 描述入参,多个参数时写多行@param name string 名称
@return@return 数据类型出参@return boolean
@example@exmaple 示例代码演示函数的使用

组件

每个组件的代码建议不要超出200行,如果超出时,建议拆分成更小的组件(当然也要根据实际需求来判断)。
一般情况下可以把组件拆成 基础、UI 和业务部分。

UI 组件/基础组件

开发时,应注意其可扩展性。支持传参渲染,支持插槽slot
设置mixin

容器组件

当前业务耦合性比较高时,可以使用多个组件构成。可承载当前页的业务接口请求和数据(vuex)

组件存放位置

组件目录

每一个组件设置为一个目录,在目录中存放:

demo
| index.vue
| demo.js
| README.md
// 以下,如果使用了预编译样式表和 jade/pug 语法引擎,则一律在 index.vue 中引用
| demo.sass
| demo.pug

组件通讯

父组件向子组件传参

使用props进行传参,例如:

// 子组件名称 child, toChildData 是父组件中 data 中的数据
<child :name="'mitkimi'" :data="toChildData" />
export default {
  props: [
    name: {
      type: String,
      require: true,
    },
    data: {
      type: String,
      require: true,
    },
  ],
  ...
}

子组件向父组件传参

// 父组件
<childComponent @myfunction="myParentFunction"></childComponent>
export default {
  methods: {
    myParentFunction () {
      // 从子组件调用该方法
    },
  },
};

// 子组件
<button @click="myChildFunction">调用父组件方法</button>
export default {
  methods: {
    myChildFunction () {
      this.$emit('myfunction');
    },
  },
};

同级组件传参

使用一个中间件(为同级组件的父组件级别的容器组件)作为桥梁进行参数传递

组件的挂载和销毁

通过 v-if 控制挂载

<component v-if="isShow"></component>

通过 is 控制挂载

<component is="componentName"></component>

Code Review

规则

所有影响到以往流程的功能需求更改在发搬迁需要 Code Review

执行者

由比自己高一级的程序员执行

反馈

每次 Code Review 都需要有反馈,要对本次 Code Review 负责

反馈内容

功能: 本次修改了什么功能或bug
模块: 本次筏板影响的模块
代码问题: 例如性能、写法、代码风格、命名规范等
业务问题: 例如影响了其他模块的逻辑问题

版本控制与服务器

在这里,版本控制系统使用 git,远端使用 gitlab-ce,服务器环境为两台,一台线上环境,一台测试环境。

分支

开发时不可避免的有某些功能没办法一天做完或者需要其他人员协同完成的,均可使用实验性分支的形式进行远端存储。开发完成后,统一合并(merge)代码到 develop 分支。
每一个开发人员本地均改动和推送 develop 分支。
拉取和推送代码时,如遇到冲突,需要在本地解决冲突,提交到本地,并且进行自测后才可以推送到远端对应分支
禁止使用 git push -f
提交时 message 格式应为:'动作 内容',例如: git commit -m 'ADD 标题栏'

动作含义实例
ADD添加功能、组件、模块或文件ADD 标题栏
DEL删除功能、组件、模块或文件DEL 弃用的图片
MOD修改功能、UI 等,改需求也用MODMOD 上传头像
FIX修复 BUGFIX 鼠标跟随溢出

服务器

线上环境部署自动构建,使用 hook 监听 master 分支改变,使用生产环境模式
测试环境部署自动构建,使用 hook 监听 test 分支改变,使用生产环境模式

发版

分享会

Comments are closed.