前端代码规范(个人约束)
基于 B站的学习视频:前端必备-阿里大厂前端开发规范!
整理的个人前端规则
Html、Css、等文件类
一、命名规范
(一)项目命名
- 全部采用小写的方式
- 以 _ (下划线) 的方式分割单词
(二)目录名称
- 全部采用小写的方式
- 以 _ (下划线) 的方式分割单词
- 复数时,要采用复数结构
(三)JS、CSS、SCSS、HTML、PNG等文件命名
- 全部采用小写的方式
- 以 _ (下划线) 的方式分割单词
(四)命名规则
- 禁止使用 中文和中文拼音
- 禁止使用 中文拼音首字母
- 正确使用 英文拼写和语法
- 一些特殊的词语可以采用国际通用的名称
如:河南 = henan
/ 人民币 = rmb
二、HTML规范(Vue Template通用)
(一)缩进
- 一个 Tab 使用两个空格
- 嵌套的节点 应该使用缩进
(二)分块注释
在每一个块级元素,列表元素 和 表格元素中,加上一个 或 一对HTML注释,注释格式
<!-- 英文 中文 -->
<!-- 英文 中文 start -->
<!-- 英文 中文 end -->
如:
<!-- header 头部 -->
<header><div>头部</div>
</header>
<!-- or -->
<!-- header 头部 start -->
<header><div>头部</div>
</header>
<!-- header 头部 end -->
(三)语义化标签
HTML5 有很多语义化标签,优先使用这些语义化标签,避免每一个页面都是 div
或者 p
(四)引号
**使用双引号 ""
**而不是单引号 ''
三、Css规范
(一)命名
- 类名 采用小写的方式,以 _ (下划线) 的方式分割单词
.test_image { ... }
- id 使用 驼峰式命名
#test { .... }
- scss中的变量、函数、混合、placeholder采用驼峰命名
- class 的命名不要使用 标签名
(二)选择器
尽量使用直接子选择器,否则,有时会造成性能损耗
不推荐:
.content .title { ... }
推荐:
.content > .title { ... }
(三)尽量使用所需的属性
不推荐:
border-style: solid;
border-width: 1px;
border-color: red;
推荐:
border: 1px solid red;
(四)每个选择器及属性独占一行
不推荐:
img {width: 100%;box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}
推荐:
img {width: 100%;box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}
(五)省略 0 后面的单位
width: 0;
border-width: 0;
(六)避免使用 ID 选择器及 全局标签污染全局样式
能不用 id选择器 就不要 使用id选择器,避免不是禁止
四、Less、Sass 规范
(一)避免嵌套等级过多
将嵌套深度限制在 3 级
Javascript
一、命名
- 采用小写驼峰命名 lowerCameCase,代码命名均不能以下划线开头,也不能以下划线或美元符号结尾
- 方法名、参数名、成员变量、局部变量统一采用驼峰命名风格
- 方法名 必须是 动词 或者 动词+名词 形式
- 增删查改,统一使用如下 5 个单词
add / update / delete / get / detail
附:函数常用方法的动词:
get 获取 / set 设置
add 增加 / remove 删除
create 创建 / destory 移除
start 启动 / stop 停止
open 打开 / close 关闭
read 读取 / write 写入
load 载入 / save 保存
begin 开始 / end 结束
backup 备份 / restore 恢复
import 导入 / export 导出
split 分割 / merge 合并
inject 注入 / extract 提取
- 常量全部大写,单词之间用下划线隔开,力求语义表达完整清楚,不要嫌名字长
二、代码格式
- 使用两个空格进行缩进
三、字符串
- 统一使用单引号’',不使用双引号"",这对创建HTML字符串非常有好处
let str = 'foo';
let testDiv = '<div id="test"></div>'
四、优先使用ES6、ES7、ES8的语法
- 简化程序,使代码更加灵活和可复用
如:箭头函数、await/async、解构、let、for…of 等
五、括号
- 下列关键词必须有大括号(即使代码只有一行):if / else / for / while / try / catch / finally / with
六、undefined判断
永远不要直接使用 undefined
进行变量判断;使用 typeof
和字符串 'undefined'
对变量进行判断
不推荐:
if (typeof person === 'undefined') { ... }
推荐:
if (person === undefined) { ... }
七、条件判断和循环最多三层
条件判断能使用 三目运算符 和 逻辑运算符的,就不要使用条件判断。
如果超过三层的 ,抽成函数,并写清楚注释
八、慎用 console.log
对 console.log
会有性能问题,生产环境下请清除 console.log
Vue
一、组件规范
(一)组件名为多个单词
组件名应该始终是多个单词的,且命名规范为 KebabCase格式
这样做可以避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的。
正例:
export default {name: 'TodoItem',...
}
反例:
export default {name: 'Todo',// ...
}Vue.component('todo', {// ...
})
(二)组件名称为 pascal_case 格式
正例:
my_component.vue
反例:
myComponent.vue
(三)和父组件紧密契合的子组件以父组件名为前缀名
正例:
todo_list_item.vue
todo_list_button.vue
反例:
todoItem.vue
(四)Props定义应该尽量详细
(五)为组件样式设置作用域
写CSS样式时,加上 作用域 scope
(六)如果特性元素过多,应主动换行
如:
<MyConponent foo="a" bar="b"baz="z" />
二、模板中使用简单的表达式
组件模板中应该只包含简单的表达式,如果有复杂的表达式,应该使用计算属性或方法
<!-- 在模板中 -->
{{ normalizedFullName }}
// 复杂表达式已经移入一个计算属性
computed: {normalizedFullName: function () {return this.fullName.split(' ').map(function (word) {return word[0].toUpperCase() + word.slice(1)}).join(' ')}
}
三、标签顺序保持一致
<template>...</template>
<script> ... </script>
<style> ... </style>
四、script标签内部解构顺序
components --> props --> data --> computed --> watch --> filter --> 钩子函数 --> methods
前端代码规范(个人约束)相关推荐
- 前端代码规范网址导航(总结)
在大公司代码规范是非常重要的一件事情,多人协作,还有代码评审.所以能写出漂亮的代码非常重要. 这就好比你自己在家,无论是穿大裤衩子,还是背心,甚至是光膀子,都没人管你.但你要出门去约会,就要把最好的一 ...
- [Client]前端代码规范 及 最佳实践
前端代码规范 及 最佳实践 2014/10/29 | 分类: WEB前端, 工具与资源, 开发 | 0 条评论 | 标签: 代码规范, 前端开发, 最佳实践 分享到: 62 本文作者: 伯乐在线 - ...
- 【必看】前端代码规范
代码规范 1. 概述 欢迎使用品优购代码规范, 这个是pink老师借鉴京东前端代码规范,组织的品优购内部规范(任何前端开发项目都适用的).旨在增强团队开发协作.提高代码质量和打造开发基石的编码规范, ...
- 网站开发之前端代码规范
前端代码规范 前言 一.唯一定律 二.前段代码规范 (一)命名规范 1.1.项目命名 1.2 .目录命名 1.3.文件存放位置 1.4.JS.CSS.HTML.PNG 等文件命名 1.4.命名严谨性 ...
- 前端代码规范工具ESLint和Prettier
前端代码规范工具ESLint和Prettier 1. ESLint是什么? ESLint 是一个开源的 JavaScript 代码检查工具,由 Nicholas C. Zakas 于2013年6月创建 ...
- 前端代码规范参考和如何保持前端代码规范
1.前端代码规范参考 编写前端代码规范的主要驱动力是两方面: 1) 代码一致性(一个项目的代码看起来就像一个人写的一样) 2) 最佳实践. 通过保持代码风格和传统的一致性,我们可以减少遗留系统维护 ...
- Web 前端代码规范
Web 前端代码规范 最后更新时间:2017-06-25 原始文章链接:https://github.com/bxm0927/web-code-standards 此项目用于记录规范的.高可维护性的前 ...
- 前端代码规范网站推荐
京东凹凸实验室前端代码规范 https://guide.aotu.io/ 链接 腾讯前端代码规范 链接http://tgideas.qq.com/doc/index.html 百度前端代码规范文档 链 ...
- html字面量编码,Web 前端代码规范
Web 前端代码规范 最后更新时间:2017-06-25 原始文章链接: 此项目用于记录规范的.高可维护性的前端代码,这是通过分析 Github 众多前端代码库,总结出来的前端代码书写规范. 目录前端 ...
- 技术胖前端代码规范秘籍推荐
技术胖前端代码规范秘籍推荐 6个文档 ,一本书籍 ,2个工具 京东凹凸实验室前端代码规范 腾讯前端代码规范 百度前端代码规范 JavaScript Standard Style :是一个个人代码规范 ...
最新文章
- oracle外键死锁,Oracle技术之和外键相关的阻塞和死锁问题总结(二)
- Spring + Mybatis 使用 PageHelper 插件分页
- 可消费消息数量_17 个方面,综合对比 主流消息队列
- 程序员的数学笔记3--迭代法
- D5SJ醴陵 2013最新版
- C#中ref和out的使用小结
- 三星Galaxy Note10系列国内发布会官宣:8月21日见!
- MyBatis 实现关联表查询
- zblock 结构_结构方块 - Minecraft Wiki,最详细的官方我的世界百科
- octet-stream文件怎么看
- 将文件从VMWare虚拟机的Linux系统传到U盘
- 小米5查看设备号信息及验证type-c数据线
- php自学建议_php自学提升进阶路线
- 需要系数 计算机房,计算电流及需要系数表
- webpack打包命令报错显示无法加载文件——解决办法
- Android open failed: ENOENT (No such file or directory)以及open failed: EISDIR (Is a directory)
- Android包体积优化(常规、进阶、极致)
- 快速提取过火区域,卫星影像评估西昌山火方法初探
- 计算机理论基础知识书面形式,计算机基础知识ord.doc
- OggBoard:无聊游戏的终结者
热门文章
- android愤怒小鸟游戏、自定义View、掌上餐厅App、OpenGL自定义气泡、抖音电影滤镜效果等源码
- Spark中,RDD概述(五大属性,弹性介绍,5个特性)
- r,w,a 与 r+, w+, a+的区别(转)
- python创建_python 创建txt并写入Python基础1 Hello World!
- c语言数星星结构体,1469: 数星星(结构体专题)
- 盘点|世界流行的十大机械工程设计软件,你会用几种?
- 压铸件浇口去除导致裂纹与缺料问题的分析与解决
- Go 1.19.3 channel原理简析
- xshell常用命令
- 管理学计算机要求,[管理学]计算机第一章.ppt