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

柔光的暖阳◎ 2022-02-28 06:42 377阅读 0赞

基本规范  
缩进：统一两个空格缩进，不要使用 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( −−color−primary−light−9：（ecf5ff）mix(–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 边线颜色： −−color−text−primary边线颜色：–border-color-base  
超链接颜色： − − l i n k − c o l o r 超 链 接 h o v e r ： --link-color 超链接hover： −−link−color超链接hover：–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( −−button−active−shade−percent);border−color:mix(–color-black, $–color-primary, $–button-active-shade-percent);  
\}

遵循BEM规范（[http://www.cnblogs.com/ChengWuyi/p/5667945.html）][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键和点击遮罩不关闭

[user.info]: http://user.info
[user.info.name]: http://user.info.name
[http_www.cnblogs.com_ChengWuyi_p_5667945.html]: http://www.cnblogs.com/ChengWuyi/p/5667945.html%EF%BC%89