前端开发规范及自定义组件规范

基本规范
缩进:统一两个空格缩进,不要使用 Tab 或者 Tab、空格混搭

HTML规范
html属性使用双引号(""),比如:

小明


嵌套时使用单引号(’’),比如:

小明


如果需要展示双引号,可以使用转义(),比如:<p title=“姓名是"小明”">
属性命名使用短横线命名(html属性不区分大小写,不要使用驼峰式命名),比如:


属性顺序
HTML 属性应该按照特定的顺序出现以保证易读性
id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role
布尔型属性
HTML5 规范中 disabled、checked、selected 等属性不用设置值

JS规范
变量定义:使用const定义常量,let定义局部变量,尽量不用var
使用 Camel 命名法
行位不需要加分号(;)
js字符变量赋值单引号(’’),如果遇到嵌套则外层单引号,内层双引号,如const x = ‘这是"测试"数据’
如果需要展示单引号,可以使用转义(\),比如:const showName = ‘姓名是’小明’’
常量使用全部字母大写,单词间下划线分隔的命名方式
如果变量是一个布尔值,变量名最好加上 is、has 或 can 作为前缀
取任何属性之前应判断对象是否为空,比如const name = user && user.info && user.info.name
取数组值前应先判断非空以及数组长度,比如:const name = names && names.length > 1 ? names[1] : null
数组遍历
arr.forEach
arr.map
arr.filter(过滤)
arr.every(与)
arr.some(或)
JSON遍历
for … in

样式规范
使用scss,适应换肤和调整字体大小
换肤(暂不考虑换肤,但样式规则需要遵循)
ElementUI使用以下变量定义颜色
$–color-primary:主题色(“409EFF”, “64,158,255”)
$–color-primary-light-1:(53a8ff)
$–color-primary-light-2:(66b1ff)
$–color-primary-light-3:(79bbff)
$–color-primary-light-4:(8cc5ff)
$–color-primary-light-5:(a0cfff)
$–color-primary-light-6:(b3d8ff)
$–color-primary-light-7:(c6e2ff)
$–color-primary-light-8:(d9ecff)
− − c o l o r − p r i m a r y − l i g h t − 9 : ( e c f 5 f f ) m i x ( --color-primary-light-9:(ecf5ff) mix( colorprimarylight9ecf5ffmix(–color-black, $–color-primary, $–button-active-shade-percent):(3a8ee6)

具体定义:
字体颜色: − − c o l o r − t e x t − p r i m a r y 边 线 颜 色 : --color-text-primary 边线颜色: colortextprimary线–border-color-base
超链接颜色: − − l i n k − c o l o r 超 链 接 h o v e r : --link-color 超链接hover: linkcolorhover–link-hover-color

示例:
&:hover, &:focus {
color: $–color-primary;
border-color: $–color-primary-light-7;
background-color: KaTeX parse error: Expected 'EOF', got '}' at position 26: …imary-light-9; }̲ &:active { col…–color-black, $–color-primary, − − b u t t o n − a c t i v e − s h a d e − p e r c e n t ) ; b o r d e r − c o l o r : m i x ( --button-active-shade-percent); border-color: mix( buttonactiveshadepercent);bordercolor:mix(–color-black, $–color-primary, $–button-active-shade-percent);
}

遵循BEM规范(http://www.cnblogs.com/ChengWuyi/p/5667945.html)
特定样式不需要加浏览器前缀
所有颜色定义,均应从variables.scss里面获取

组件规范
命名:定义组件文件夹,文件夹名称为有意义的,比如Table,文件夹下定义index.vue,可根据需要放置其他文件
组件格式:需定义name,格式为BvXxx,比如BvTable
私有变量、方法命名规则为:

__xx__

页面引用:
引入组件(<script>),比如:

import BvExample from '@/components/Example'

注册组件(<script>),比如:

components: { BvExample }

使用组件(<template>),比如:

<bv-example />

组件注册
常用组件在plugins下面全局注册
不常用组件,在调用的vue文件中通过components进行局部注册
样式
组件的样式定义在components.scss
弹窗
弹窗组件需要设定按esc键和点击遮罩不关闭

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

菜鸟驿站ㅤ

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值