前端小团队建设

2018-09-18 admin

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

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

二、注释

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.vuexxmixin.jsreadme.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里面的方法进行重构 clipboard.png

(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_wechat_v2.0.1 这种命名规范来,后面有更好的命名规范咱们再改。v2.0.1 表示
当前迭代的版本号,wechat 表示当前迭代的名称,这里我们是开发小程序迭代,就命名了 wechat

hotfix: hotfix 分支的命名我们暂时可以按 hotfix_v2.0.2 这种来进行命名,v2.0.2 表示这次修复的版本的版本号

2 提交母版 kz-commit

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

六、分享会

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

参考:

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

原文链接:https://segmentfault.com/a/1190000016445088

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-40621.html

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

相关文章
百度新功能【特效搜索】演示 惊呆了小伙伴
百度搜索最近又出新玩意新功能了,可能你还没有发现,名为【百度特效搜索】已经默默上线了,有什么效果呢? 在百度搜索中根据用户搜索的关键词来出发某些动作,例如笔者搜索“打雷”关键字,在搜索结果中你会听到有打雷声, 黑洞,闪烁、翻转、跳跃,打雷,...
2015-11-12
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
前端工程师应该具备的三种思维
如果你是一个天才等级的工程师(马上可以离开),可以独立完成一个很多事情,你可以是一个怪咖,因为我相信没有一个人不会不佩服你。但现实归现实,多数人都不是天才,而我们在职场上也不是单打独斗,我们需要团队合作,需要协调和配合,需要考虑除了代码以外...
2016-01-13
梳理前端开发使用eslint-prettier检查和格式化代码
问题痛点 在团队的项目开发过程中,代码维护所占的时间比重往往大于新功能的开发。因此编写符合团队编码规范的代码是至关重要的,这样做不仅可以很大程度地避免基本语法错误,也保证了代码的可读性。 对于代码版本管理系统(svn 和 git或者其他)...
2018-05-07
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
本文实例讲述了JS常见创建类的方法。分享给大家供大家参考,具体如下: Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class。(不过,ES6引...
2017-04-05
mpvue 小程序如何开启下拉刷新,上拉加载?
https://developers.weixin.qq.com/miniprogram/dev/api/pulldown.html#onpulldownrefresh 小程序API 微信小程序之下拉加载和上拉刷新 微信小程序下拉加载和上拉...
2018-05-25
五个值得尝试的前端开发工具
在过去的几年时间里,出现了许多全新的网页应用程序,不过,由于应用程序的功能越来越丰富,也导致了前端开发的复杂度大幅增加。 现在也有不少前端开发工具,比如Backbone和EmberJS框架都能提供稳定的App开发解决方案。同时,Javasc...
2015-12-23
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
本文主要通过代码示例给大家介绍IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题;分步介绍,先给大家介绍IE7浏览器窗口大小改变事件执行多次bug,具体问题分析及解决方案请看下文。 var resizeTi...
2017-03-29
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
这里汇总了js实现时间显示几天前、几小时前或者几分钟前的常见方法。分享给大家供大家参考。具体如下: 方法一: 个人做法是保存时间戳,然后在前端用jq插件做转换,比如 smart-time-ago 方法二: (通过freemarker模板)如...
2017-03-24
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
大家在做些页面的时候,很多都是用ajax实现的,在显示的时候有很多表单提交的add或者update操作,显然这样很烦,突然想到了一个比较好的方法,下面给大家分享下如何用js 实现依赖注入的思想,后端框架思想搬到前端来。 应用场景: 前后端一...
2017-03-29
回到顶部