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

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.函数(方法)注释 参考jsdoc

注释名 语法 含义 示例
@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都需要打tagtest: test分支就供测试环境使用的分支develop: develop 分支就叫develop 分支feature: feature 分支 咱们暂时可以按 feature/name/version 这种命名规范来,后面有更好的命名规范咱们再改。version 表示
当前迭代的版本号,name 表示当前迭代的名称hotfix: hotfix 分支的命名我们暂时可以按 hotfix/name/version 这种来进行命名,verison表示这次修复的版本的版本号,name表示本次热修复的内容标题

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

2 提交模版 kz-commit

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

六、分享会

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

参考:

https://juejin.im/entry/599d4...

转载于:https://my.oschina.net/u/3979844/blog/2209464

前端小团队建设(实用前端开发规范,推荐收藏)相关推荐

  1. 006.不浅谈,数十条业务线以上的,前端小团队瞎逼基础服务思路

    !!!高能预警,长文,我都不知道多少字. 背景 我嘛,虽然不是出身bat,写了三年多业务代码,18年开始带团队至今,从toB的pc.管理台.小程序.微信公众号.app.活动.服务端,都有涉猎.当然公司 ...

  2. 微型公司小团队对软件项目开发管理和规范化的思考

    一.前言 这里指的微型公司.小团队是指两个人,或三个人的情况.人虽少,但只要达到两个人或超过两个人,就必然面临沟通.配合协调的问题,这时候就得考虑管理的问题,软件工程.项目管理.开发标准等等. 但这样 ...

  3. 《web开发: (微信小程序)WePY 框架开发规范 》

    一.WePY 框架开发规范  1. 自定义默认首页  1. 创建 home 首页  在 src -> pages 目录下,创建 home.wpy 页面,并创建页面的基本代码结构,示例代码如下: ...

  4. 管理者做好团队建设必看的书推荐

    能否做好团队建设,是衡量一名企业管理者领导能力的最重要的指标之一. 毕竟带团队是一切管理工作的核心,任何组织也都无法脱离团队而存在.团队管理是否得宜直接影响到部门甚至是整个企业的运营效率.团队建设的重 ...

  5. 前端简洁并实用的工具类 (推荐收藏)

    原文链接:https://segmentfault.com/a/1190000013438501 前言 本文主要从日期,数组,对象,axios,promise和字符判断这几个方面讲工作中常用的一些函数 ...

  6. 「 Java开发规范 」10人小团队Java开发规范参考这篇就够了

    <菜鸟程序员成长计划>之团队高效合作[开发规范篇] 1.「 Java开发规范 」10人小团队Java开发规范参考这篇就够了! 2.「 前端开发规范 」10人小团队前端开发规范参考这篇就够了 ...

  7. 中国速度之二神山建设(1):坚强的领导核心,“小团队大后台”组织结构 | IDCF DevOps案例研究...

    内容来源:DevOps案例深度研究第4期 – 火神山雷神山 DevOps实践研究战队(本文只展示部分PPT及研究成果,全程视频请移步文末) 本案例内容贡献者:赖泽薇.张扬.邓茜芸.韦一.刘德权.候利涛 ...

  8. 黑马前端h5团队开发代码规范

    黑马前端h5团队开发代码规范 1. 概述 欢迎使用品优购代码规范, 这个是我借鉴京东前端代码规范,组织的品优购内部规范.旨在增强团队开发协作.提高代码质量和打造开发基石的编码规范, 以下规范是团队基本 ...

  9. 前端开发规范文档(html,css,js)

    首先吐槽一句,本来想上传word文档的,可是发现博客不能上传word文档,这就很尴尬了. 首先声明该规范不是本人写的,网上搜前端规范发现这个很详细就先复制下来做笔记,当然不可能啥都按规范来,每个公司的 ...

最新文章

  1. c语言中的普通字符包括什么,【判断题】C语言中的字符常量通常有两种形式:普通字符和转义字符。...
  2. 微信小程序开发分销制度济南_花店微信小程序开发教程
  3. spring系统学习:20180611: Spring中AOP通知的类型
  4. ABAP Netweaver和git的快捷方式
  5. OXY OPENCART 商城自适应主题模板 ABC-0020-05
  6. php快速开发框架津县,BetePHP:一个轻量级快速开发框架
  7. java 类 解析_Java类详解
  8. 【转】LoadRunner中事务和集合点的放置顺序问题
  9. springboot自定义异常(全局捕获)
  10. 必备!万用表使用手册
  11. 叶片静频测量方法理论基础(自振法上)
  12. js判断IE浏览器(包括IE11)
  13. 详解java的垃圾清理机制
  14. Fiddler抓包6-get请求(url详解)
  15. C++Primer笔记
  16. flash 脚本 2
  17. 很久没上来写点东西了,今天把N年前的代码看了一遍。随手写了点寄托哀思--多播委托...
  18. Snaigt 12.4.0 的使用和Snagit KEY
  19. 使用GitHub的action将每日天气推送到微信和QQ
  20. little w and Soda 牛客练习赛34

热门文章

  1. 百度网盘全速下载破解工具
  2. MAC手动安装打印机驱动
  3. ILSVRC 2015-VID数据集下载解压记录
  4. NOIP2017 被卡常/游记
  5. php下载随机api图片_php中直接输出随机图片的API
  6. c语言 string.h 详解
  7. MythType安装问题解决
  8. 教你快速批量打印多个文档的方法
  9. 抓住窗口期 成就世界级 —— 29周年之际致全体同仁 wwj 2017.12.6
  10. 用到zlib库的程序运行时报错:无法定位程序输入点createfile2于动态链接库KERNEL32.DLL上