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

简介:

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

1、文件命名

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

保证项目有良好的可移植性,可跨平台 

相关参考(http://www.ruanyifeng.com/blog/2017/02/filename-should-be-lowercase.html)

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 函数

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

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

命名建议:语义化

可以参考如下的动作

9b7df8a65de4f61d07410a7c7eaa3f34246683fd

// 是否可阅读
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

3e9a7871f594a69be1484c808115ca8b2a6ce830

三、组件

每个 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 中描述组件的基本信息

7312994fc209a1ac888095b7ad6a93ddaedf5e13

如下图

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

c2100e34fffc81fe3fe43f77f34ee040a82d7fec


(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

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

六、分享会

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


原文发布时间为:2018-09-27

本文作者:spademan

本文来自云栖社区合作伙伴“前端大学”,了解相关信息可以关注“前端大学

相关文章
|
1月前
|
缓存 前端开发
前端代码整洁与规范之CSS篇
【4月更文挑战第2天】 前端代码整洁与规范之CSS篇
43 4
|
4月前
|
设计模式 存储 缓存
精进前端开发:深入探讨前端设计模式
精进前端开发:深入探讨前端设计模式
31 0
|
5天前
|
移动开发 前端开发 UED
【专栏:HTML与CSS前端技术趋势篇】渐进式增强与优雅降级在前端开发中的实践
【4月更文挑战第30天】前端开发中的渐进式增强和优雅降级是确保跨浏览器、跨设备良好用户体验的关键策略。渐进式增强是从基础功能开始,逐步增加高级特性,保证所有用户能访问基本内容;而优雅降级则是从完整版本出发,向下兼容,确保低版本浏览器仍能使用基本功能。实践中,遵循HTML5/CSS3规范,使用流式布局和响应式设计,检测浏览器特性,并提供备选方案,都是实现这两种策略的有效方法。选择合适策略优化网站,提升用户体验。
|
6天前
|
XML 前端开发 JavaScript
前端CSS样式零基础教学总结,UI、前端开发都适用
前端CSS样式零基础教学总结,UI、前端开发都适用
|
17天前
|
前端开发 JavaScript 开发工具
新一代前端开发工具:探索WebAssembly在前端领域的应用
本文将介绍WebAssembly在前端开发领域的应用,探讨其在提升前端性能、扩展开发语言选择、优化代码大小等方面的优势。通过深入分析WebAssembly的特性和优势,以及实际案例展示,帮助读者更好地理解和应用这一新一代前端开发工具。
|
20天前
|
前端开发 JavaScript 算法
比较流行的前端代码书写规范都有哪些
【4月更文挑战第13天】前端代码规范增进代码可读性和团队协作,包括缩进(用2空格)、命名(变量 camelCase,常量 MY_CONSTANT,类 PascalCase)、注释、语句与表达式、错误处理、代码复用。文件命名规范涉及扩展名、目录结构、简洁文件名、入口文件和配置文件命名。遵循这些规范能提高代码一致性,但需按项目需求调整。不断学习新规范以适应前端技术发展。
18 1
|
2月前
|
前端开发
前端模块化开发规范
前端模块化开发规范
|
4月前
|
人工智能 自然语言处理 前端开发
前端训练不规范导致AIGC模型“上梁不正”
【1月更文挑战第23天】前端训练不规范导致AIGC模型“上梁不正”
40 1
前端训练不规范导致AIGC模型“上梁不正”
|
4月前
|
前端开发 API UED
探索前端开发中的单页面应用(SPA)与前端路由
在前端开发中,单页面应用(SPA)和前端路由技术扮演着重要的角色。本文将深入探讨SPA的概念、特点以及与传统多页面应用的对比,并介绍前端路由的原理、实现方式以及其在SPA中的应用。通过对这两个关键概念的详细解析,读者将更好地理解现代前端开发中的架构设计和技术选型。
|
5月前
|
前端开发 Java PHP
前端知识笔记(四十五)———前端开发与后端开发有什么区别
前端知识笔记(四十五)———前端开发与后端开发有什么区别
48 0