美文网首页程序员BUG
前端小团队建设

前端小团队建设

作者: 程序员BUG | 来源:发表于2018-11-07 22:41 被阅读1次

一、命名规则(英文-直译)

1、文件命名

文件夹/文件的命名统一用小写。

保证项目有良好的可移植性,可跨平台。相关参考:《为什么文件名要小写?》。

2、文件引用路径

因为文件命名统一小写,引用也需要注意大小写问题。

3、js变量

3.1 变量

命名方式:小驼峰

命名规范:前缀名词

命名建议:语义化

案例:

// 友好

let maxCount = 10;

let tableTitle = 'LoginTable';

// 不友好

let setCount = 10;

let getTitle = 'LoginTable';

3.2 常量

命名方式:全部大写

命名规范:使用大写字母和下划线来组合命名,下划线用以分割单词

命名建议:语义化

案例:

const MAX_COUNT = 10;

const URL = 'http://www.foreverz.com';

3.3 函数

命名方式:小驼峰式命名法。

命名规范:前缀应当为动词。

命名建议:语义化

可以参考如下的动作:

动词含义返回值

can判断是否可执行某个动作(权限)函数返回一个布尔值。true:可执行;false:不可执行

has判断是否含有某个值函数返回一个布尔值。true:含有此值;false:不含有此值

is判断是否为某个值函数返回一个布尔值。true:为某个值;false:不为某个值

get获取某个值函数返回一个非布尔值

set设置某个值无返回值、返回是否设置成功或者返回链式对象

load加载某些数据无返回值或者返回是否加载完成的结果

案例:

// 是否可阅读

function canRead(): boolean {

 return true;

}

// 获取名称

function getName(): string {

 return this.name;

}

3.4 类、构造函数

命名方式:大驼峰式命名法,首字母大写

命名规范:前缀为名称。

命名建议:语义化

案例:

class Person {

 public name: string;

 constructor(name) {

   this.name = name;

 }

}

const person = new Person('mevyn');

公共属性和方法:跟变量和函数的命名一样。

私有属性和方法:前缀为_(下划线),后面跟公共属性和方法一样的命名方式。

案例:

class Person {

 private _name: string;

 constructor() { }

 // 公共方法

 getName() {

   return this._name;

 }

 // 公共方法

 setName(name) {

   this._name = name;

 }

}

const person = new Person();

person.setName('mervyn');

person.getName(); // ->mervyn

3.5 css(class、id)命名规则BEM

我们还是使用大团队比较常用的BEM模式。

(1)class命名使用BEM其实是块(block)、元素(element)、修饰符(modifier)的缩写,利用不同的区块,功能以及样式来给元素命名。这三个部分使用__与--连接(这里用两个而不是一个是为了留下用于块儿的命名)。

命名约定的模式如下:

   .block{}

   .block__element{}

   .block--modifier{}

block 代表了更高级别的抽象或组件。

block__element 代表 block 的后代,用于形成一个完整的 block 的整体

block--modifier代表 block 的不同状态或不同版本

(2)id一般参与样式,命名的话使用驼峰,如果是给js调用钩子就需要设置为js_xxxx的方式。

二、注释

1、单行注释

// 这个函数的执行条件,执行结果大概说明

dosomthing()

2、多行注释

/*

* xxxx  描述较多的时候可以使用多行注释

* xxxx

*/

dosomthing();

3、函数(方法)注释

注释名语法含义示例

@param@param 参数名 {参数类型} 描述信息描述参数的信息@param name {String} 传入名称

@return @return {返回类型} 描述信息描述返回值的信息@return {Boolean}true:可执行;false:不可执行

@author@author 作者信息 [附属信息:如邮箱、日期]描述此函数作者的信息@author 张三 2015/07/21

@version@version XX.XX.XX描述此函数的版本号@version 1.0.3

@example@example 示例代码演示函数的使用@example setTitle(‘测试’)

三、组件

每个 Vue 组件的代码建议不要超出 200 行,如果超出建议拆分组件。

组件一般情况下是可以拆成基础/ui部分和业务部分,基础组件一般是承载呈现,基础功能,不和业务耦合部分。

业务组件一般包含业务功能业务特殊数据等等。

1、UI组件/基础组件

开发的时候注意可拓展性,支持数据传参进行渲染,支持插槽slot。

设置有mixin,mixin中放了基础信息和方法。

2、容器组件

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

3、组件存放位置

(1)ui组件存放在src/components/中,包含xxx.vue和xxmixin.js和readme.md。

   xxx.vue 表示ui部分

   xxmixin.js 表示js部分

   readme.md 中描述组件的基本信息

名词含义案例

@name组件名称筛选下拉框

@version版本v1.0.0

@updateTime更新日期2018.09.18

@describe使用场景描述某某场景下

@props参数['data']

@author作者dd

如下图,引用组件的时候 直接引入mixinElementFilter.js即可。在引用组件的页面可以对mixin里面的方法进行重构:

(2)业务组件就放在业务模块部分即可。

4、组件通讯

避免数据的分发源混乱,不建议使用eventBus控制数据,应使用props来和$emit来数据分发和传送。

同级组件的通讯一般会有一个中间容器组件作为桥梁。

容器组件作为数据的接受和分发点。

5、组件的挂在和销毁

(1)通过v-if控制组件的挂在和销毁

<testcomponent v-if='componentActive'> </testcomponent>

(2)通过is控制组件的挂在和销毁

<component is='componentName'> </component>

6、跨项目组件共用

公共组件存放位置中 定时抽取共用次数多的组件 将他放在npm.kuaizi.co中,供下载引用。

四、codeReview

1、规则

所有影响到以往流程的功能需求更改发版前都需要 codeReview。

2、执行者

初级程序员可由中级程序员的执行 codeReview。

中级程序员可由高级程序员执行 codeReview。

以此类推。

3、反馈

每次codereView都需要有反馈,要对本次codeReview负责。

反馈内容基本如:

功能:本次主要是修改了什么功能或者bug。模块:本次发版影响的模块。代码问题:codereview过程中发现的代码问题,比如代码性能,写法,代码风格等等。业务问题:比如发现了某某影响到其他模块的逻辑问题,如果没有发现就写无。

五、git规范

1、分支

命名:

master: master 分支就叫master 分支,线上环境正在使用的,每一次更新master都需要打tag。

test: test分支就供测试环境使用的分支。

develop: develop 分支就叫develop 分支。

feature: feature 分支 咱们暂时可以按 feature/name/version 这种命名规范来,后面有更好的命名规范咱们再改。version 表示当前迭代的版本号,name 表示当前迭代的名称。

hotfix: hotfix 分支的命名我们暂时可以按 hotfix/name/version 这种来进行命名,verison表示这次修复的版本的版本号,name表示本次热修复的内容标题。

斜杠的方式在source-tree中有归类的作用。

2、提交模版 kz-commit

在完善中,会继承自动检测代码,可选输入发版提交版本基本信息等等。

六、分享会

每两周至少执行一次,分享工作,生活各方面都可以。

扩展阅读

新鲜出炉的8月前端面试题

前端工程师面试题汇总

Java后端程序员1年工作经验总结

来源:https://segmentfault.com/a/1190000016445088

相关文章

  • 前端小团队建设

    一、命名规则(英文-直译) 1、文件命名 文件夹/文件的命名统一用小写。 保证项目有良好的可移植性,可跨平台。相关...

  • 前端技术优秀文章合集

    这是我看到的优秀文章合集总结,希望对你们也有用 1.前端小团队建设 https://segmentfault.co...

  • 建设团队、团队建设 ——信任之光照亮黑暗

    建设团队、团队建设 ——信任...

  • 老徐的项目周报总第6期 20190817

    一、摘要 1-团队建设方面,喜迎韩立丰老师加入 2-团队建设方面,虚拟开发团队建成 3-开发方面,1.0基础版小程...

  • 团队建设(彭小洪)

    一、亲密接触 让我给你拍拍头:123 321 1234567 7654321 二、热身活动,马兰开花。相互认...

  • 【中途接班】5.接班老师如何建设班级管理团队?

    接班老师如何建设班级管理团队要视接班年级而定。接的是毕业班,比如小六、初三、高三,团队建设不可操之过急,不必...

  • 神算子教育招聘前端攻城狮啦

    极客团队、前沿技术 【前端团队】 神算子教育前端团队主要成员来自于阿里巴巴,擅长前端架构,前端工程效率、性能优化等...

  • 团队建设

    自身作为基层管理者,这几年一直在思考团队的建设和管理,从日常管理中记录一些心得。 作为市场部办事处部门...

  • 团队建设

    心得一: 经营团队的过程是一个借力的过程,只有越来越多的人愿意把力借给你,你才会成功,而组建团队,应该遵循找“好人...

  • 团队建设

    1.安排与团队成员单独谈话。 ①将自己的管理理念与组员进行沟通.(要高绩效更要成长)。②收集组员的问题意见和建议。...

网友评论

    本文标题:前端小团队建设

    本文链接:https://www.haomeiwen.com/subject/nqqktqtx.html