针对我司的代码规范，我整理出一下几点：第一部分的html的规范，二是css的规范，其次是javascript的规范，最后是vue2.x的规范。
一、html规范
DOCTYPE 声明
HTML文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：
<!DOCTYPE html>
CHARSET
一般情况下统一使用 “UTF-8” 编码
<meta charset="UTF-8">
元素及标签闭合
HTML元素共有以下5种：
-
空元素：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr
-
原始文本元素：script、style
-
RCDATA元素：textarea、title
-
外来元素：来自MathML命名空间和SVG命名空间的元素。
-
常规元素：其他HTML允许的元素都称为常规元素。
元素标签的闭合应遵循以下原则：
- 原始文本元素、RCDATA元素以及常规元素都有一个开始标签来表示开始，一个结束标签来表示结束。
- 某些元素的开始和结束标签是可以省略的，如果规定标签不能被省略，那么就绝对不能省略它。
- 空元素只有一个开始标签，且不能为空元素设置结束标签。
- 外来元素可以有一个开始标签和配对的结束标签，或者只有一个自闭合的开始标签，且后者情况下该元素不能有结束标签。
为了能让浏览器更好的解析代码以及能让代码具有更好的可读性，有如下约定：
- 所有具有开始标签和结束标签的元素都要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上。
- 空元素标签都加上 “/” 字符
类型属性
不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含
推荐：
<link rel="stylesheet" href="" >
<script src=""></script>
不推荐：
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
语法标准
-
缩进使用 tab（2 个空格）；
-
元素嵌套规范：嵌套的节点应该缩进，每个块状元素独立一行，内联元素可选；
-
在属性上，使用双引号，不要使用单引号；
-
属性名全小写，用中划线（-）做分隔符；
-
要在自动闭合标签结尾处使用斜线；
Page title
<!-- 属性名全小写，用中划线（-）做分隔符 --> <h1 class="hello-world">Hello, world!</h1>
文件模板
二、css规范
语法标准
-
缩进使用 tab（2 个空格）；
-
每个声明结束都要加分号；
-
注释统一使用 /* */；
/* 这里是注释 */
.element { width: 50px; height: 50px; }
-
引号
/* url 的内容要用引号 */
.element:after { content: ""; background-image: url("logo.png"); }
/* 属性选择器中的属性值需要引号 */
li[data-type="single"] { ...; }
-
命名
/* class 类名使用小写字母，以中划线分隔*/
.element-content {
}
/* id 采用小驼峰（camelCase）式命名*/
#myDialog {
}
代码易读性
-
为单个css选择器或新申明开启新行
.jdc, .jdc_logo, .jdc_hd {
color: #ff0; }.nav{
color: #fff; } -
颜色值
rgb()rgba()hsl()hsla()rect()中不需有空格，且取值不要带有不必要的 0.jdc {
color: rgba(255,255,255,.5); } -
属性值十六进制数值尽量不用简写
.jdc {
color: #ffffff;
}
-
不要为
0指明单位.jdc {
margin: 0 10px; }
属性书写顺序
遵循以下顺序：
-
布局定位属性：display / position / float / clear / visibility / overflow
-
自身属性：width / height / margin / padding / border / background
-
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
-
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
.jdc {
display: block;
position: relative;
float: left;
width: 100px;
height: 100px;
margin: 0 10px;
padding: 20px 0;
font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
color: #333;
background: rgba(0,0,0,.5);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;}
三、javasript规范
变量命名
- 采用camalCase
函数命名
-
命名方式: 小驼峰式命名方法
-
命名规范: 动词+方法描述的方式。
-
推荐动词：
动词
描述
返回值
is
是否为某个值
布尔值
can
是否能执行某个操作
布尔值
has
是否有某个值
布尔值
set
设置某个值
无返回值、返回是否设置成功或者返回链式对象
get
获取某个值
非布尔值
function setName(name) { this.name = name; } function getName() { return this.name; }若是构造函数，则使用大驼峰式命名方法。
function Student(name, age) { this.name = name; this.age = age; } const oStudent = new Student('Tom', 18);
书写优化方法
-
多个 else-if 带返回值的 优化策略
/* 优化前 */
function getPosition(direction){
if(direction == "left"){ return "左" }else if(direction == "right"){ return "右" }else if(direction == "top"){ return "上" }else if(direction == "bottom"){ return "下" }else{ return "未知" } }/* 优化后 */
function getPosition(direction){ return ({ left:"左", right:"右", top:"上", bottom:"下" })[direction] || "未知" }
四、Vue2.x规范
目录、文件、组件命名规范
- 目录
同一采用kebab-case风格
- 组件文件
组件名应该始终是多个单词的
组件名应该倾向于完整单词而不是缩写
命名遵守PascalCase约定。组件文件名除index.vue之外，一律采用PascalCase写法；
在components公共组件文件夹下，每个index.vue都要有一个描述组件功能的以PascalCase方式命名的文件夹；
在views每个构成具体业务的小组件遵循PascalCase的规范命名.vue文件
- utils下的公共方法文件，assets下的图片，styles，js；
统一采用 kebab-case 风格
- api文件下的文件
统一采用camelCase的方法，里面的成员方法同一采用camelCase方式命名
组件开发规范
-
注册组件的时候，全部使用
PascalCase格式。import UserBook from './user/UserBook'
-
props命名规范
声明prop的时候，其命名应该始终使用camelCase，而在模板中应该始终使用kebab-case
<welcome-message greeting-text="hi"></welcome-message>
<script>
props: {
greetingText: String;
}
</script>
-
组件/实例的选项顺序
- name (全局引用)
- components (模板依赖)
- directives ...
- filters ...
- mixins (组合)
- props (接口)
- data (本地状态属性)
- computed ...
- watch (响应回调)
- created (生命周期函数)
- mounted ...
- methods (实例属性)
-
methods命名规范
采用camelCase，操作性函数同一使用动词或名词+动词的形式
jumpPage() {
}
openCarInfoDialog () {
}
请求数据的方法，以data结尾
getListData () {
}
postFormData () {
}
附注
参考文档如下：
