前端开发规范

前端开发规范

规范目的

命名规范

结构化规范

注释规范

编码规范

CSS 规范

规范目的

为提高团队协作效率

便于后台人员添加功能及前端后期优化维护

输出高质量的文档

命名规范

为了让大家书写可维护的代码，而不是一次性的代码

让团队当中其他人看你的代码能一目了然

甚至一段时间时候后你再看你某个时候写的代码也能看

普通变量命名规范

命名方法 ：驼峰命名法

命名规范 ：

命名必须是跟需求的内容相关的词，比如说我想申明一个变量，用来表示我的学校，那么我们可以这样定义const mySchool = "我的学校";

命名是复数的时候需要加s,比如说我想申明一个数组，表示很多人的名字，那么我们可以这样定义const names = new Array();

常量

命名方法 : 全部大写

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

const MAX_COUNT = 10

const URL = 'https://www.baidu.com/'

组件命名规范

官方文档推荐及使用遵循规则：

PascalCase (单词首字母大写命名)是最通用的声明约定

kebab-case (短横线分隔命名) 是最通用的使用约定

组件名应该始终是多个单词的，根组件 App 除外

有意义的名词、简短、具有可读性

命名遵循    PascalCase 约定

公用组件以 Abcd

      (公司名缩写简称) 开头，如（AbcdDatePicker,AbcdTable）

页面内部组件以组件模块名简写为开头，Item 为结尾，如（StaffBenchToChargeItem，StaffBenchAppNotArrItem）

使用遵循    kebab-case 约定

在页面中使用组件需要前后闭合，并以短线分隔，如（<abcd-date-picker></abcd-date-picker>，<abcd-table></abcd-table>）

导入及注册组件时，遵循    PascalCase 约定

同时还需要注意：必须符合自定义元素规范: 切勿使用保留字。

method 方法命名命名规范

驼峰式命名，统一使用动词或者动词+名词形式

  //bad

  go、nextPage、show、open、login

    // good

  jumpPage、openCarInfoDialog

请求数据方法，以    data 结尾

  //bad

  takeData、confirmData、getList、postForm

  // good

  getListData、postFormData

init、refresh 单词除外

尽量使用常用单词开头（set、get、go、can、has、is）

附：函数方法常用的动词:

get 获取/set 设置,

add 增加/remove 删除

create 创建/destory 移除

start 启动/stop 停止

open 打开/close 关闭,

read 读取/write 写入

load 载入/save 保存,

create 创建/destroy 销毁

begin 开始/end 结束,

backup 备份/restore 恢复

import 导入/export 导出,

split 分割/merge 合并

inject 注入/extract 提取,

attach 附着/detach 脱离

bind 绑定/separate 分离,

view 查看/browse 浏览

edit 编辑/modify 修改,

select 选取/mark 标记

copy 复制/paste 粘贴,

undo 撤销/redo 重做

insert 插入/delete 移除,

add 加入/append 添加

clean 清理/clear 清除,

index 索引/sort 排序

find 查找/search 搜索,

increase 增加/decrease 减少

play 播放/pause 暂停,

launch 启动/run 运行

compile 编译/execute 执行,

debug 调试/trace 跟踪

observe 观察/listen 监听,

build 构建/publish 发布

input 输入/output 输出,

encode 编码/decode 解码

encrypt 加密/decrypt 解密,

compress 压缩/decompress解压缩

pack 打包/unpack 解包,

parse 解析/emit 生成

connect 连接/disconnect断开,

send 发送/receive 接收

download 下载/upload 上传,

refresh 刷新/synchronize同步

update 更新/revert 复原,

lock 锁定/unlock 解锁

check out 签出/check in 签入,

submit 提交/commit 交付

push 推/pull 拉,

expand 展开/collapse 折叠

begin 起始/end 结束,

start 开始/finish 完成

enter 进入/exit 退出,

abort 放弃/quit 离开

obsolete 废弃/depreciate废旧,

collect 收集/aggregate 聚集

views 下的文件命名

只有一个文件的情况下不会出现文件夹，而是直接放在 views 目录下面，如Index.vue

尽量是名词,且使用驼峰命名法

开头的单词就是所属模块名字（WorkbenchIndex、WorkbenchList、WorkbenchEdit）

名字至少两个单词（good:

    WorkbenchIndex）（bad:Workbench）

props 命名

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板中应该始终使用kebab-case

props: {

  'greeting-text':String

}

props: {

  greetingText:String

}

例外情况

作用域不大临时变量可以简写，比如：str，num，bol，obj，fun，arr。

循环变量可以简写，比如：i，j，k 等。

结构化规范

目录文件夹及子文件规范

以下统一管理处均对应相应模块

以下全局文件文件均以    index.js 导出，并在main.js 中导入

以下临时文件，在使用后，接口已经有了，发版后清除

vue 文件基本结构

    export default{

      components :{

      },

      data () {

        return {

        }

      },

      mounted() {

      }，

      methods: {

      }

   }

多个特性的元素规范

多个特性的元素应该分多行撰写，每个特性一行。(增强更易读)

 src="https://vuejs.org/images/logo.png"

  alt="VueLogo"

> 

  foo="a"

  bar="b"

  baz="c"

> 

元素特性的顺序

原生属性放前面，指令放后面

如下所示：

  - class

  - id,ref

  - name

  - data-*

  - src, for, type,href,value,max-length,max,min,pattern

  - title, alt，placeholder

  - aria-*, role

  -required,readonly,disabled

  - is

  - v-for

  - key

  - v-if

  - v-else-if

  - v-else

  - v-show

  - v-cloak

  - v-pre

  - v-once

  - v-model

  - v-bind,:

  - v-on,@

  - v-html

  - v-text

组件选项顺序

如下所示：

  - components

  - props

  - data

  - computed

  - created

  - mounted

  - metods

  - filter

  - watch

注释规范

代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明

务必添加注释列表

公共组件使用说明

各组件中重要函数或者类说明

复杂的业务逻辑处理说明

特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的 hack、使用了某种算法或思路等需要进行注释描述

多重 if 判断语句

注释块必须以/**（至少两个星号）开头**/

单行注释使用//

单行注释

注释单独一行，不要在代码后的同一行内加注释。例如：

  bad

  var name =”abc”;//姓名   

  good

  //姓名

  var name =“abc”;        

多行注释

组件使用说明，和调用说明

      /**

      *组件名称

      * @module组件存放位置

      * @desc组件描述

      * @author组件作者

      * @date 2017年12月05日17:22:43

      * @param{Object} [title]    -参数说明

      * @param{String} [columns] -参数说明

      * @example调用示例

      * 

      **/

编码规范

优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护。尽量按照 ESLint 格式要求编写代码

源码风格

使用 ES6 风格编码

定义变量使用 let

    ,定义常量使用const

静态字符串一律使用单引号或反引号，动态字符串使用反引号

  // bad

  const a ='foobar'

  const b = 'foo' +a + 'bar'

  // acceptable

  const c =`foobar`

  // good

  const a = 'foobar'

  const b =`foo${a}bar`

  const c ='foobar'

解构赋值

数组成员对变量赋值时，优先使用解构赋值

  //数组解构赋值

  const arr = [1,2, 3, 4]

  // bad

  const first =arr[0]

  const second =arr[1]

  // good

  const [first,second] = arr

函数的参数如果是对象的成员，优先使用解构赋值

  //对象解构赋值

  // bad

  functiongetFullName(user) {

    const firstName= user.firstName

    const lastName= user.lastName

  }

  // good

  functiongetFullName(obj) {

    const {firstName, lastName } = obj

  }

  // best

  functiongetFullName({ firstName, lastName }) {}

拷贝数组

使用扩展运算符（...）拷贝数组。

  const items = [1,2, 3, 4, 5]

  // bad

  const itemsCopy =items

  // good

  const itemsCopy =[...items]

箭头函数

需要使用函数表达式的场合，尽量用箭头函数代替。因为这样更简洁，而且绑定了this

  // bad

  const self =this;

  const boundMethod= function(...params) {

    returnmethod.apply(self, params);

  }

  // acceptable

  const boundMethod= method.bind(this);

  // best

  const boundMethod= (...params) => method.apply(this, params);

模块

如果模块只有一个输出值，就使用 export default，如果模块有多个输出值，就不使用 export

    default，export default 与普通的 export 不要同时使用

  // bad

  import * asmyObject from './importModule'

  // good

  import myObjectfrom './importModule'

如果模块默认输出一个函数，函数名的首字母应该小写。

  functionmakeStyleGuide() {

  }

  export defaultmakeStyleGuide;

如果模块默认输出一个对象，对象名的首字母应该大写。

  const StyleGuide= {

    es6: {

    }

  };

  export defaultStyleGuide;

指令规范

指令有缩写一律采用缩写形式

  // bad

  v-bind:class="{'show-left'：true}"

 v-on:click="getListData"

  // good

 :class="{'show-left'：true}"

 @click="getListData"

v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一

      {{ todo.text}}

      {{ todo.text}}

避免 v-if 和 v-for 同时用在一个元素上（性能问题）

以下为两种解决方案：

将数据替换为一个计算属性，让其返回过滤后的列表

      {{ user.name}}

      {{ user.name}}

  computed: {

    activeUsers:function () {

      return this.users.filter(function(user) {

        returnuser.isActive

      })

    }

  }

将 v-if 移动至容器元素上 (比如ul, ol)

      {{ user.name}}

      {{ user.name}}

Props 规范

Props 定义应该尽量详细

// bad 这样做只有开发原型系统时可以接受

props: ['status']

// good

props: {

  status: {

    type: String,

    required: true,

    validator:function (value) {

      return [

        'syncing',

        'synced',

       'version-conflict',

        'error'

     ].indexOf(value) !== -1

    }

  }

}

其他

避免this.$parent

调试信息    console.log() debugger 使用完及时删除

除了三目运算，if,else

    等禁止简写

  // bad

  if (true)

      alert(name);

 console.log(name);

  // bad

  if (true)

  alert(name);

  console.log(name)

  // good

  if (true) {

      alert(name);

  }

 console.log(name);

CSS 规范

通用规范

统一使用"-"连字符

省略值为 0 时的单位

公用组件,需要有自己的前缀

 // bad

  padding-bottom:0px;

  margin: 0em;

 // good

  padding-bottom:0;

  margin: 0;

如果 CSS 可以做到，就不要使用JS

建议并适当缩写值，提高可读性，特殊情况除外

“建议并适当”是因为缩写总是会包含一系列的值，而有时候我们并不希望设置某一值，反而造成了麻烦，那么这时候你可以不缩写，而是分开写。

当然，在一切可以缩写的情况下，请务必缩写，它最大的好处就是节省了字节，便于维护，并使阅读更加一目了然。

  // bad

  .box{

    border-top-style: none;

    font-family:palatino, georgia, serif;

    font-size:100%;

    line-height:1.6;

    padding-bottom:2em;

    padding-left:1em;

    padding-right:1em;

    padding-top: 0;

  }

  // good

  .box{

    border-top: 0;

    font: 100%/1.6palatino, georgia, serif;

    padding: 0 1em2em;

  }

声明应该按照下表的顺序

左到右，从上到下

显示属性自身属性文本属性和其他修饰

displaywidthfont

visibilityheighttext-align

positionmargintext-decoration

floatpaddingvertical-align

clearborderwhite-space

list-styleoverflowcolor

topmin-widthbackground

  // bad

  .box {

    font-family:'Arial', sans-serif;

    border: 3pxsolid #ddd;

    left: 30%;

    position:absolute;

    text-transform:uppercase;

   background-color: #eee;

    right: 30%;

    isplay: block;

    font-size:1.5rem;

    overflow:hidden;

    padding: 1em;

    margin: 1em;

  }

  // good

  .box {

    display: block;

    position:absolute;

    left: 30%;

    right: 30%;

    overflow:hidden;

    margin: 1em;

    padding: 1em;

    background-color:#eee;

    border: 3pxsolid #ddd;

    font-family:'Arial', sans-serif;

    font-size:1.5rem;

    text-transform:uppercase;

  }

元素选择器应该避免在    scoped 中出现

官方文档说明：在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。

分类的命名方法

使用单个字母加上"-"为前缀

布局（grid）（.g-）；

模块（module）（.m-）；

元件（unit）（.u-）；

功能（function）（.f-）；

皮肤（skin）（.s-）；

状态（.z-）。

统一语义理解和命名

布局（.g-）

语义命名简写

文档docdoc

头部headhd

主体bodybd

尾部footft

主栏mainmn

主栏子容器maincmnc

侧栏sidesd

侧栏子容器sidecsdc

盒容器wrap/boxwrap/box

模块（.m-）、元件（.u-）

语义命名简写

导航navnav

子导航subnavsnav

面包屑crumbcrm

菜单menumenu

选项卡tabtab

标题区head/titlehd/tt

内容区body/contentbd/ct

列表listlst

表格tabletb

表单formfm

热点hothot

排行toptop

登录loginlog

标志logologo

广告advertisead

搜索searchsch

幻灯slidesld

提示tipstips

帮助helphelp

新闻newsnews

下载downloaddld

注册registreg

投票votevote

版权copyrightcprt

结果resultrst

标题titlett

按钮buttonbtn

输入inputipt

功能（.f-）

语义命名简写

浮动清除clearbothcb

向左浮动floatleftfl

向右浮动floatrightfr

内联块级inlineblockib

文本居中textaligncentertac

文本居右textalignrighttar

文本居左textalignlefttal

垂直居中verticalalignmiddlevam

溢出隐藏overflowhiddenoh

完全消失displaynonedn

字体大小fontsizefs

字体粗细fontweightfw

皮肤（.s-）

语义命名简写

字体颜色fontcolorfc

背景backgroundbg

背景颜色backgroundcolorbgc

背景图片backgroundimagebgi

背景定位backgroundpositionbgp

边框颜色bordercolorbdc

状态（.z-）

语义命名简写

选中selectedsel

当前currentcrt

显示showshow

隐藏hidehide

打开openopen

关闭closeclose

出错errorerr

不可用disableddis

sass 规范

当使用 Sass 的嵌套功能的时候，重要的是有一个明确的嵌套顺序，以下内容是一个 SCSS 块应具有的顺序。

当前选择器的样式属性

父级选择器的伪类选择器(:first-letter, :hover, :active etc)

伪类元素(:before and :after)

父级选择器的声明样式(.selected, .active, .enlarged etc.)

用 Sass 的上下文媒体查询

子选择器作为最后的部分

  .product-teaser {

    // 1. Styleattributes

    display:inline-block;

    padding: 1rem;

   background-color: whitesmoke;

    color: grey;

    // 2. Pseudoselectors with parent selector

    &:hover {

      color: black;

    }

    // 3. Pseudoelements with parent selector

    &:before {

      content:"";

      display:block;

      border-top:1px solid grey;

    }

    &:after {

      content: "";

      display:block;

      border-top:1px solid grey;

    }

    // 4. Stateclasses with parent selector

    &.active {

     background-color: pink;

      color: red;

      // 4.2.Pseuso selector in state class selector

      &:hover {

        color:darkred;

      }

    }

    // 5.Contextual media queries

    @media screen and (max-width: 640px) {

      display:block;

      font-size:2em;

    }

    // 6. Subselectors

    > .content> .title {

      font-size:1.2em;

      // 6.5.Contextual media queries in sub selector

      @media screenand (max-width: 640px) {

       letter-spacing: 0.2em;

       text-transform: uppercase;

      }

    }

  }

特殊规范

对用页面级组件样式，应该是有作用域的

对于公用组件或者全局组件库，我们应该更倾向于选用基于 class 的 BEM 策略

  // bad

  // good

  //good

  .c-Button {

    border: none;

    border-radius:2px;

  }

  .c-Button--close{

   background-color: red;

  }

关于git 和svn

1. 需熟用

2. 不确定不能提交,提交有冲突需及时解决

关于typescript

目前项目暂时没有用到,可以部分地方先用起来

其他

1.严格按照设计稿还原;

2.禁止行内样式;(非改不动样式)

3.非必要,不允许用jq,用jq需提前和我方负责人说明;