写给自己用的前端开发规范

  • 2020-05-09
  • 0
  • 0

结合阅读的开源项目和自己的习惯为自己总结的一套规范 偏vue 因为阅读的开源项目大部分都是vue

命名规则

项目命名、JS文件命名、CSS/SCSS文件命名、HTML文件命名等文件

文件和目录命名都用 小写字母+中线分隔

e:my-project-name

目录命名

参照项目命名规则

  • 样式文件夹:css
  • 脚本文件夹:js
  • 图片文件夹:img
  • vue组件目录使用驼峰格式:GoodsTip.vue

缩进

统一采用tab 缩进(2 个空格)

HTML规范

元素属性

元素属性值使用双引号语法

e:<input type="text">

纯数字输入框

使用 type="tel" 而不是 type="number"

注释

单行注释

一般用于简单的描述,如某些状态描述、属性描述等

注释内容前后各一个空格字符,注释位于要注释代码的上面,单独占一行

e:

<!-- 注释 -->
<div>...</div>
模块注释

一般用于描述模块的名称以及模块开始与结束的位置

注释内容前后各一个空格字符,<!-- S Comment Text --> 表示模块开始,<!-- E Comment Text --> 表示模块结束,模块与模块之间相隔一行

e:

<!-- S 头部 -->
<header>
  ...
</header>
<!-- E 头部 -->

<!-- S 导航 -->
<nav>...</nav>
<!-- E 导航 -->
嵌套模块注释

当模块注释内再出现模块注释的时候,为了突出主要模块,嵌套模块不再使用

使用<!-- /Comment Text -->写在模块结尾标签底部,单独一行

<!-- S Comment Text A -->
<div class="mod_a">
  <div class="mod_b">
    ...
  </div>
  <!-- /mod_b -->
  <div class="mod_c">
    ...
  </div>
  <!-- /mod_c -->
</div>
<!-- E Comment Text A -->

文件模板

移动端
  • 通常在引入CSS和JS时不需要指明 type,因为 text/csstext/javascript 分别是他们的默认值
  • viewport-fit=cover是适配iphoneX刘海屏,需要配合css,详情点击查阅
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,shrink-to-fit=no,viewport-fit=cover">
    <meta name="format-detection" content="telephone=no">
    <title>移动端HTML模版</title>
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- <link rel="stylesheet" href="code_guide.css"> -->
    <!-- <script src="code_guide.js"></script> -->
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

PC端
<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta name="keywords" content="seo关键词,PC端HTML模板">
    <meta name="description" content="网站整体描述">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>PC端HTML模版</title>
    <!-- <link rel="stylesheet" href="code_guide.css"> -->
    <!-- <script src="code_guide.js"></script> -->
  </head>
  <body>
        <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

CSS规范

空格

以下几种情况不需要空格:

  • 属性名后
  • 多个规则的分隔符’,’前
  • !important ‘!’后
  • 属性值中'(‘后和’)’前
  • 行末不要有多余的空格

以下几种情况需要空格:

  • 属性值前
  • 选择器’>’, ‘+’, ‘~’前后
  • ‘{‘前
  • !important ‘!’前
  • @else 前后
  • 属性值中的’,’后
  • 注释’/‘后和’/’前
/* not good */
.element {
    color :red! important;
    background-color: rgba(0,0,0,.5);
}

/* good */
.element {
    color: red !important;
    background-color: rgba(0, 0, 0, .5);
}

/* not good */
.element ,
.dialog{
    ...
}

/* good */
.element,
.dialog {

}

/* not good */
.element>.dialog{
    ...
}

/* good */
.element > .dialog{
    ...
}

/* not good */
.element{
    ...
}

/* good */
.element {
    ...
}

/* not good */
@debug: true;

header {
  background-color: (yellow)when(@debug = true);
}


/* good */
header {
  background-color: (yellow) when (@debug = true);
}

空行

以下几种情况需要空行:

  • 文件最后保留一个空行
  • ‘}’后最好跟一个空行,包括scss中嵌套的规则
  • 属性之间需要适当的空行,具体见属性声明顺序
/* not good */
.element {
    ...
}
.dialog {
    color: red;
    &:after {
        ...
    }
}

/* good */
.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

注释

注释统一用’/* */’(scss中也不要用’//’)

缩进与下一行代码保持一致

可位于一个代码行的末尾,与代码间隔一个空格

/* Modal header */
.modal-header {
    ...
}

/*
 * Modal header
 */
.modal-header {
    ...
}

.modal-header {
    /* 50px */
    width: 50px;

    color: red; /* color red */
}

引号

最外层统一使用双引号;

url的内容要用引号;

属性选择器中的属性值需要引号。

.element:after {
    content: "";
    background-image: url("logo.png");
}

li[data-type="single"] {
    ...
}

命名

类名使用小写字母,以中划线分隔

id采用驼峰式命名

scss中的变量、函数以中划线分隔命名

/* class */
.element-content {
    ...
}

/* id */
#myDialog {
    ...
}

/* 变量 */
@color-black: #000;

/* mixins */
.my-mixin() {
  color: black;
}


属性声明顺序

相关的属性声明按照如下顺序做分组处理,组之间需要有一个空行(这是腾讯的,这个不强求,说是提升渲染dom性能,但我想说不在乎这么点性能,顺序不强求按这个,这个只是个参考,但分组还是有必要的,按照自己的理解,分组即可,主要是方便阅读)

.declaration-order {
    display: block;
    float: right;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    border: 1px solid #e5e5e5;
    border-radius: 3px;
    width: 100px;
    height: 100px;

    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    text-align: center;

    color: #333;
    background-color: #f5f5f5;

    opacity: 1;
}

书写顺序前后为:

(1)定位属性:position display float left top right bottom overflow clear z-index

(2)自身属性:width height padding border margin background

(3)文字样式:font-family font-size font-style font-weight font-varient color

(4)文本属性text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow

目的:减少浏览器reflow(回流),提升浏览器渲染dom的性能

属性简写

属性简写需要你非常清楚属性值的正确顺序,而且在大多数情况下并不需要设置属性简写中包含的所有值,所以建议尽量分开声明会更加清晰;

marginpadding 相反,需要使用简写;

常见的属性简写包括:

  • font
  • background
  • transition
  • animation
/* not good */
.element {
    transition: opacity 1s linear 2s;
}

/* good */
.element {
    transition-delay: 2s;
    transition-timing-function: linear;
    transition-duration: 1s;
    transition-property: opacity;
}
去掉小数点前的“0”;属性值’0’后面不要加单位;用 border: 0; 代替 border: none;

font-size: .8rem; font-size: 0;

常用命名简写
  • 功能
语义 命名 简写
清除浮动 clearboth cb
左浮动 floatleft fl
内联 inlineblock ib
文本居中 textaligncenter tac
垂直居中 verticalalignmiddle vam
溢出隐藏 overflowhidden oh
完全消失 displaynone dn
字体大小 fontsize fz
字体粗细 fontweight fs
  • 状态
语义 命名 简写
选中 selected sel
当前 current crt
显示 show show
隐藏 hide hide
打开 open open
关闭 close vclose
出错 error err
不可用 disabled dis

CSS文件命名

  • 重置样式 reset.scss
  • 基本共用 base.scss
  • 主题 themes.scss
  • 模块 module.scss
  • 布局、版面 layout.scss
  • 文字 font.scss
  • 主要的 master.scss

重置样式

移动端
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input, button {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
  display: block;
}

body {
  -webkit-user-select: none; /* 文本不能被选择 */
  user-select: none; /* 文本不能被选择 */
  -webkit-font-smoothing: antialiased; /* 字体抗锯齿,使用后字体看起来会更清晰舒服 */
  -moz-osx-font-smoothing: grayscale; /* 字体抗锯齿,使用后字体看起来会更清晰舒服 */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  font-family: Helvetica Neue, Tahoma, Arial, PingFangSC-Regular, Hiragino Sans GB, Microsoft Yahei, sans-serif;
  line-height: 1.425;
  color: #333;
  background: #f6f6f6;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption,
th,
td {
  font-weight: normal;
  vertical-align: middle;
}

i {
  font-style:normal;
}

a {
  text-decoration: none;
  background: transparent;
}

ol,ul {
  list-style: none;
}

button,
input[type='number'],
input[type='text'],
input[type='password'],
input[type='email'],
input[type='search'],
select,
textarea {
  margin: 0;
  font-family: inherit;
  -webkit-appearance: none;
}

input {
  -webkit-appearance: none; /* 去除input在移动端有圆角 */
  &::-webkit-search-cancel-button {
    /* 去掉输入框为search 默认自带叉叉 不同手机不同表现 */
    display: none;
  }
  /* placeholder颜色 */
  &::-webkit-input-placeholder{
      color:#DBDBDB;
  }
}

textarea {
 /* placeholder颜色 */
 &::-webkit-input-placeholder{
     color:#DBDBDB;
 }
}

* {
  box-sizing: border-box;
}
PC端
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, input {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, menu, nav, section {
  display: block;
}

body {
  font-family: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif;
  color: #333;
  background-color: #fff;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

i {
  font-style:normal;
}

a {
  text-decoration: none;
  background: transparent;
}

ol,ul {
  list-style: none;
}

* {
  box-sizing: border-box;
}

::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track-piece {
  background-color: rgba(0, 0, 0, 0.2);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:vertical {
  height: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

::-webkit-scrollbar-thumb:horizontal {
  width: 5px;
  background-color: rgba(125, 125, 125, 0.7);
  -webkit-border-radius: 6px;
}

移动端常用私有属性

点我查阅

SCSS相关

局部文件命名的使用

scss局部文件的文件名以下划线开头。这样,scss就不会在编译时单独编译这个文件输出css,而只把这个文件用作导入。比如scss的mixins文件

BEM命名规范

BEM 命名约定的模式是:

.block {}

.block__element {}

.block--modifier {}
  • 每一个块(block)名应该有一个命名空间(前缀)
    • block 代表了更高级别的抽象或组件。

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

    • block--modifier 代表 .block 的不同状态或不同版本。 使用两个连字符和下划线而不是一个,是为了让你自己的块可以用单个连字符来界定。如:

    .sub-block__element {}
    
    .sub-block--modifier {}
    

在scss中使用BEM命名模式的两种方案:

  1. scss的嵌套和父选择器标识符 & 能解决BEM命名的冗长,且使样式可读性更高
    .el-input {
     display: block;
     &__inner {
       text-align: center;
     }
    }
    
  2. element-ui库方案 基于scss的bem方法的实现

bem命名模式不强求,看个人吧,自己觉得怎么写可读性高,就怎么写,有些人用bem写,写着写着就boom;我个人之前是用的第一种方案,后面发现这样不方便用vscode查看定义,就没用这种了,写全命名,在vscode可以按alt+f12查看定义的地方,很方便

JavaScript规范

JavaScript standard 代码规范的全文

代码

分号

通常不加分号,除非单行有多个表达式等例外,如for中

for (let i = 0; i < 10; i++) {
  let b = 0
  ...
}
空格

以下几种情况不需要空格:

  • 对象的属性名后
  • 前缀一元运算符后
  • 后缀一元运算符前
  • 函数调用括号前
  • 无论是函数声明还是函数表达式,'(‘前不要空格
  • 数组的'[‘后和’]’前
  • 对象的'{‘后和’}’前
  • 运算符'(‘后和’)’前

以下几种情况需要空格:

  • 二元运算符前后
  • 三元运算符’?:’前后
  • 代码块'{‘前
  • 下列关键字前:else, while, catch, finally
  • 下列关键字后:if, else, for, while, do, switch, case, try,catch, finally, with, return, typeof
  • 单行注释’//’后(若单行注释和代码同行,则’//’前也需要),多行注释’*’后
  • 对象的属性值前
  • for循环,分号后留有一个空格,前置条件如果有多个,逗号后留一个空格
  • 无论是函数声明还是函数表达式,'{‘前一定要有空格
  • 函数的参数之间
注释
  • 单行注释
    双斜线后,必须跟一个空格
    缩进与下一行代码保持一致
    可位于一个代码行的末尾,与代码间隔一个空格

  • 多行注释
    最少三行, ‘*’后跟一个空格

  • 文档注释
    各类标签@param, @method等请参考JSDoc Guide

    /**
    * @func
    * @desc 一个带参数的函数
    * @param {string} a - 参数a
    * @param {number} b=1 - 参数b默认值为1
    * @param {string} c=1 - 参数c有两种支持的取值</br>1—表示x</br>2—表示xx
    * @param {object} d - 参数d为一个对象
    * @param {string} d.e - 参数d的e属性
    * @param {string} d.f - 参数d的f属性
    * @param {object[]} g - 参数g为一个对象数组
    * @param {string} g.h - 参数g数组中一项的h属性
    * @param {string} g.i - 参数g数组中一项的i属性
    * @param {string} [j] - 参数j是一个可选参数
    */
    function foo(a, b, c, d, g, j) {
      ...
    }
    
引号

最外层统一使用单引号

变量命名
  • 标准变量采用驼峰式命名(除了对象的属性外,主要是考虑到cgi返回的数据)
  • ‘ID’在变量名中全大写
  • ‘URL’在变量名中全大写
  • ‘Android’在变量名中大写第一个字母
  • ‘iOS’在变量名中小写第一个,大写后两个字母
  • 常量全大写,用下划线连接
  • 构造函数,大写第一个字母

语言

  1. 避免隐式转换,使用全等(===)进行判断
  2. if判断超过3个分支需优化,考虑使用策略模式
  3. 判断数组是否有值 不需要 arr.lenth > 0 ,直接 arr.length
  4. 推荐函数式编程,如Array类型尽量使用forEach、map等这些方法
  5. 遍历对象使用Object.keys方式,如用for-in不要忘记加hasOwnProperty(key)检测
  6. 写复杂业务代码时,最好遵循单一原则,一个方法只做一件事,方便复用
  7. 字符串转为整形
    当需要将浮点数转换成整型时,应该使用Math.floor()或者Math.round(),而不是使用parseInt()将字符串转换成数字。Math 是内部对象,所以``Math.floor()其实并没有多少查询方法和调用时间,速度是最快的。let num = Math.floor('1.6')
  8. 函数参数超过3个,要使用ES6的解构语法,不用考虑参数的顺序
  9. 定时器要及时清除

评论

还没有任何评论,你来说两句吧