大家好,欢迎来到IT知识分享网。
一、规范目的
对于一个团队来说,制定统一的规范是有必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码的工作效率,使代码保持统一的代码风格,以便于代码整合和后期维护。
二、HTML/CSS 规范
2.1 浏览器兼容性
根据公司业务要求而定,一般:
主流程测试:chrome 30 +、IE9+;
完整测试:chrome 30 +、IE9+、360浏览器、微信 webView、手机浏览器。
2.2 html 代码规范
2.2.1 声明与编码
-
html 头部声明统一
<!DOCTYPE html>
-
页面编码统一
<meta charset="UTF-8"> <!-- ie6也支持,无须担心 -->
2.2.2 格式缩进
html 编码统一格式化显示,使用一个 Tab 键进行分层缩进(2个空格宽度),使整个页面结构层次清晰,方便阅读和修改。
2.2.3 模块注释
html 独立模块之间注释格式统一使用:
<!-- start: XXX模块 -->
…
<!-- end: XXX模块 -->
或者:
<!-- XXX模块 -->
…
<!-- /XXX模块 -->
2.2.4 标签与属性
-
由于 html 标签和属性不区别大小写,所以我们约定都采用小写,尤其是自定义标签和属性名,否则 js 中取不到,如:
<div data-bgColor="green"></div> $('div').data('bgColor'); // 取不到,已自动被浏览器转成了data-bgcolor
-
不需要为 css、js 指定类型,HTML5 中默认已包含
// 错误 <link rel="stylesheet" type="text/css" href="" > <script type="text/javascript" src="" ></script> // 正确 <link rel="stylesheet" href="" > <script src=""></script>
-
所有 html 属性必须添加双引号(非单引号)
// 错误 <div id=mainframe> 或 <div id='mainframe'> // 正确 <div id="mainframe">
-
元素嵌套规范,每个块状元素独立一行,内联元素可选
// 错误 <div> <h1></h1><p></p> </div> <p> <span></span> <span></span> </p> // 正确 <div> <h1></h1> <p></p> </div> <p><span></span><span></span></p>
-
段落元素与标题元素只能嵌套内联元素
// 错误 <h1><div></div></h1> <p><div></div><div></div></p> //正确 <h1><span></span></h1> <p><span></span><span></span></p>
-
在 html 中不能使用小于号 “<” 和大于号 “>” 特殊字符,浏览器会将他们作为标签解析,若要正确显示,在 html 源代码中使用字符实体
// 错误 <a href="#">more>></a> // 正确 <a href="#">more>></a>
-
img 标签中必须添加 alt 属性,如:
<img src="…" alt="logo" />
-
标签在运用时,应精良使用语义化标签,在语义不明显,即可用 div 也可用 p 时,应优先使用 p 标签,如:
<h1>标题<h1> <lable for="user">用户名:</lable> <input name="username" id="user">
2.3 CSS 代码规范
2.3.1 样式表编码
-
样式文件必须写上 @charset 规则,并且一定要在样式文件的第一行首个字符位置开始写,编码名用 “UTF-8”
-
字符 @charset “”; 都用小写字母,不能出现转义符,编码名允许大小混写
/* 错误 */ /* @charset规则不在文件首行首个字符开始 */ @charset "UTF-8"; .lx { } /* 正确 */ @charset "UTF-8"; .lx { }
2.3.2 css 引用规范
- 所有 css 均为外部调用,不得在页面书写任何内部样式或行内样式,vue 文件要添加 scoped 属性,避免样式污染。
2.3.3 css 注释规范
-
单行注释:注释内容第一个字符和最后一个字符都是一个空格字符,单独占一行,行与行之间相隔一行
-
错误
/*Comment Text*/ .lx{ display: block; } .lx{ display: block;/*Comment Text*/ }
-
正确
/* Comment Text */ .lx { } /* Comment Text */ .lx { }
-
-
模块注释:注释内容第一个字符和最后一个字符都是一个空格字符,
/*
与模块信息描述占一行,多个横线分隔符-
与*/
占一行,行与行之间相隔两行-
错误
/* Module A ---------------------------------------------------- */ .mod_a { } /* Module B ---------------------------------------------------- */ .mod_b { }
-
正确
/* Module A ---------------------------------------------------------------- */ .mod_a { } /* Module B ---------------------------------------------------------------- */ .mod_b { }
-
-
文件信息注释:在样式文件编码声明
@charset
语句下面注明页面名称、作者、创建日期等信息@charset "UTF-8"; /** * @desc File Info * @author Author Name * @date 2016-10-10 */
2.3.4 书写规范
-
代码格式化:应统一使用展开格式书写样式
-
样式书写一般有两种,一种是紧凑格式:
.lx{ display: block;width: 50px;}
-
一种是展开格式:
.lx { display: block; width: 50px; }
-
-
样式选择器、属性名、属性值关键字全部使用小写字母书写
/* 错误 */ .LX{ DISPLAY:BLOCK; } /* 正确 */ .lx { display:block; }
-
属性书写建议遵循以下顺序
A.)布局定位属性:display / position / float / clear / visibility / overflow B.)自身属性:width / height / margin / padding / border / background C.)文本属性:color / font / text-decoration / text-align / vertical-align / white- space / break-word D.)其他属性(CSS3):content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient …
-
css 背景图片
/* 不推荐 */ .canbox{ background-color: #ff6600; background-image: url("/img/xxx.png"); } /* 推荐(合并、css 图片引入不需要引号) */ .canbox { background: #f60 url(/img/xxx.png); }
-
属性值为 0 时,去除单位
/* 错误 */ .wrap{ margin: 0px 0px 5px 8px; } /* 正确 */ .wrap { margin: 0 0 5px 8px; }
-
用来显示动态文本输入的地方,样式里需加上英文强制换行
word-break: break-all;
-
上下相邻的两个模块应避免混用
margin-top
、margin-bottom
,否则会产生重叠现象
2.3.5 重置样式
-
移动端
* { -webkit-tap-highlight-color: transparent; outline: 0; margin: 0; padding: 0; vertical-align: baseline; } body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin: 0; padding: 0; vertical-align: baseline; } img { border: 0 none; vertical-align: top; } i, em { font-style: normal; } ol, ul { list-style: none; } input, select, button, h1, h2, h3, h4, h5, h6 { font-size: 100%; font-family: inherit; } table { border-collapse: collapse; border-spacing: 0; } a { text-decoration: none; color: #666; } body { margin: 0 auto; min-width: 320px; max-width: 640px; height: 100%; font-size: 14px; font-family: -apple-system,Helvetica,sans-serif; line-height: 1.5; color: #666; -webkit-text-size-adjust: 100% !important; text-size-adjust: 100% !important; } input[type="text"], textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
-
pc 端
html, body, div, h1, h2, h3, h4, h5, h6, p, dl, dt, dd, ol, ul, li, fieldset, form, label, input, legend, table, caption, tbody, tfoot, thead, tr, th, td, textarea, article, aside, audio, canvas, figure, footer, header, mark, menu, nav, section, time, video { margin: 0; padding: 0; } h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal } article, aside, dialog, figure, footer, header, hgroup, nav, section, blockquote { display: block; } ul, ol { list-style: none; } img { border: 0 none; vertical-align: top; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: none; } table { border-collapse: collapse; border-spacing: 0; } strong, em, i { font-style: normal; font-weight: normal; } ins { text-decoration: underline; } del { text-decoration: line-through; } mark { background: none; } input::-ms-clear { display: none !important; } body { font: 12px/1.5 \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, "Hiragino Sans GB", STHeiti, "WenQuanYi Micro Hei", "Droid Sans Fallback", SimSun, sans-serif; background: #fff; } a { text-decoration: none; color: #333; } a:hover { text-decoration: underline; }
三、JavaScript 代码规范
3.1 js 文件引入
-
引入位置:body 标签内最后部(非 body 外面),减少因载入脚本而造成其他页面内容阻塞的问题,因为 js 是单线程的
<html> <body> <div>页面内容…</div> <script src="model.js"></script> </body> </html>
-
引入方式:html 页面中禁止直接编写 js 代码,统一使用
<script>
外部引用的方式,一遍打包压缩和缓存
3.2 代码缩进
3.2.1 整体层次
使用 Tab 键进行代码缩进,(2个空格宽度)
(function() {
const i = 0;
function innerFun() {
const j = 0;
……
}
});
3.2.2 局部间隔
// 错误
let arr=[1,2],str='hello'+'Lucy';
let myfun=function(arg){
//todo…
}
// 正确
let arr = [1,2],
str = 'hello' + 'Lucy';
let myfun = function(arg) {
//todo…
}
3.3 JS 注释
3.3.1 文件头部注释
/* * @Author: TJ. * @Date: 2022-03-24 13:37:38 * @LastEditors: TJ. * @LastEditTime: 2022-03-26 11:36:08 * @Description: 品牌相关接口 * @FilePath: \cei-saas-platform\src\api\brand.js */
3.3.2 方法注释
/** * @Author: TJ * 当内容超出指定行数显示 Tooltip * @param {Object} obj 事件对象 * @param {Object} item 数据对象 * @param {String} val 提示内容 * @param {Number} num 超出几行显示 Tooltip * @param {String} tooltipModel el-tooltip 的 v-model */
3.3.3 单行注释
let funName = function(arg1, arg2) {
this.arg1 = arg1;
// 单行注释说明(上面添加一空行, //与说明之间空一格)
this.arg2 = arg2;
};
3.4 命名规则
-
变量名应由 26 个大小写字母 (A…Z,a…z),10 个数字(0…9),和 “_” (下划线)组成
-
通常,使用驼峰写法,对象、函数、实例时尤其如此
// 错误 let is_my_object = { }; let is-my-object = { }; // 正确 let isMyObject = { };
-
构造函数或类使用驼峰式大写
// 错误 let bad = new user({ name: 'nope' }); // 正确 let good = new User({ name: 'nope' });
-
常量大写,并用下划线分割,如:
NAMES_LIKE_THIS
3.5 编码规范
3.5.1 逗号
-
不要加多余的逗号,这可能会在 IE 下引起错误,同事如果多一个逗号某些 ES3 的实现会计算多数组的长度
// 错误 let hero = { firstName: 'Kevin', lastName: 'Flynn', }; // 正确 let hero = { firstName: 'Kevin', lastName: 'Flynn' };
3.5.2 分号
-
本规范遵循
Standard
的规范,不使用分号。关于应不应该使用分号的讨论有很多,本规范认为非必要的时候,应该不使用分号,好的
JS
程序员应该清楚场景下是一定要加分号的,相信你也是名好的开发者。// 错误 const test = 'good'; (function () { const str = 'hahaha'; })() // 正确 const test = 'good' ;(() => { const str = 'hahaha' })();
3.5.3 {} []
-
new 关键字的使用除了在需要实例化一个对象,或者罕见的需要延时加载数据的情况外,基本上不需要使用
new
关键字,在javascript
里分配大量的new
变量地址会有效率问题// 错误 const item1 = new Object(), item2 = new Array(); // 正确 const item1 = { }, item2 = [];
3.5.4 字符串
-
字符串统一使用单引号的形式
''
// 错误 const department = "LXW" // 正确 const department = 'LXW'
-
字符串太长的时候,请不要使用字符串换行符换行
\
,而是使用+
const str = '找创意,享生活 找创意,享生活' + '找创意,享生活 找创意,享生活 找创意,享生活' + '找创意,享生活'
-
程序化生成字符串是,请使用模板字符串
const test = 'test' // 错误 const str = ['a', 'b', test].join() // 错误 const str = 'a' + 'b' + test // 正确 const str = `ab${ test}`
3.5.5 比较运算符 & 相等
-
使用
===
和!==
而非==
和!=
-
条件声明例如
if
会用ToBoolean
这个抽象方法将表达式转成布尔值并遵循如下规则-
Objects
等于true
-
Undefined
等于false
-
Null
等于false
-
Booleans
等于布尔值
-
Numbers
在+0
,-0
, 或者NaN
的情况下等于false
, 其他情况是true
-
Strings
为''
时等于false
, 否则是true
if ([0] && []) { // true // 数组(即使是空数组)也是对象,对象等于true }
-
3.5.6 代码块
// 错误
if (test)
return false;
// 正确
if (test) return false;
// 或
if (test) {
return false;
}
// 错误
function() {
return false; }
// 正确
function() {
return false;
}
3.5.7 JS 常见参数命名建议
- 元素:ele || e
- 参数:arg
- 对象:obj
- 数组:arr
- 指令:ret
- 长度:len
四、vue 规范
注:本规范基于 vue 官方风格整理 vue 风格指南
4.1 命名规范
4.1.1 普通变量
-
命名方法:驼峰命名法
-
命名规范:
-
命名必须是跟需求相关的词,例如我们要声明一个变量表示 我的老师,我们可以这样定义 :
let myTeacher = "我的老师"
-
命名是复数的时候,需要加s,例如当我们想声明一个数组用来表示很多朋友,我们可以这样定义:
let friends = []
-
4.1.2 常量规范
-
使用大写字母和下划线来组合命名,下划线用以分割单词
const MAX_LIMIT = 150 const URL = 'https://www.taobao.com/'
4.1.3 组件命名规范
-
声明组件:组件应遵循
PascalCase约定
,也就是组件名应该始终是多个单词的(根组件App除外),并且单词首字母应该大写// good export default { name: 'TodoItem', // ... } // bad export default { name: 'Todo', // ... }
-
使用组件:使用组件应遵循
kebab-case 约定
,也就是在页面中使用组件,需要前后闭合,并以短线分割<div id="app"> <todo-item></todo-item> </div>
4.1.4 method 命名规范
-
驼峰式命名,统一使用动词,或者动词+名词形式
//good: jumpPage、openUserInfoDialog //bad: go、nextPage、show、open、login
-
请求数据方法以 data 结尾
// good getListData postFormData // bad getList postForm
-
函数方法常用动词
get 获取/set 设置, add 增加/remove 删除 create 创建/destory 移除 start 启动/stop 停止 open 打开/close 关闭, read 读取/write 写入 load 载入/save 保存, create 创建/destroy 销毁 begin 开始/end 结束, backup 备份/restore 恢复 import 导入/export 导出, split 分割/merge 合并 inject 注入/extract 提取, attach 附着/detach 脱离 bind 绑定/separate 分离, view 查看/browse 浏览 edit 编辑/modify 修改, select 选取/mark 标记 copy 复制/paste 粘贴, undo 撤销/redo 重做 insert 插入/delete 移除, add 加入/append 添加 clean 清理/clear 清除, index 索引/sort 排序 find 查找/search 搜索, increase 增加/decrease 减少 play 播放/pause 暂停, launch 启动/run 运行 compile 编译/execute 执行, debug 调试/trace 跟踪 observe 观察/listen 监听, build 构建/publish 发布 input 输入/output 输出, encode 编码/decode 解码 encrypt 加密/decrypt 解密, compress 压缩/decompress 解压缩 pack 打包/unpack 解包, parse 解析/emit 生成 connect 连接/disconnect 断开, send 发送/receive 接收 download 下载/upload 上传, refresh 刷新/synchronize 同步 update 更新/revert 复原, lock 锁定/unlock 解锁 check out 签出/check in 签入, submit 提交/commit 交付 push 推/pull 拉, expand 展开/collapse 折叠 begin 起始/end 结束, start 开始/finish 完成 enter 进入/exit 退出, abort 放弃/quit 离开 obsolete 废弃/depreciate 废旧, collect 收集/aggregate 聚集
4.1.5 props 命名
-
在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用 kebab-case
<!-- bad --> <script> props: { 'greeting-text': String } </script> <welcome-message greetingText="hi"></welcome-message> <!-- good --> <script> props: { greetingText: String } </script> <welcome-message greeting-text="hi"></welcome-message>
4.1.6 view 下的文件命名
- 每个页面生成一个文件夹和一个 index.vue 文件
- 使用名词命名,并且使用驼峰命名法
4.2 结构化规范
4.2.1 组件选项顺序
- components
- props
- data
- computed
- created
- mounted
- metods
- filter
- watch
4.2.2 vue 文件基本结构
<template>
<div>
<!--必须在div中编写页面-->
</div>
</template>
<script>
export default {
components : {
},
data () {
return {
}
},
mounted() {
},
methods: {
}
}
</script>
<!--声明语言,并且添加scoped-->
<style lang="scss" scoped>
</style>
4.2.3 多个特性元素规范
-
多个特性的元素应该分多行撰写,每个特性一行。(易读)
<!-- bad --> <img src="https://vuejs.org/images/logo.png" alt="Vue Logo"> <my-component foo="a" bar="b" baz="c"></my-component> <!-- good --> <img src="https://vuejs.org/images/logo.png" alt="Vue Logo" > <my-component foo="a" bar="b" baz="c" > </my-component>
4.2.4 元素特性顺序
- 原生属性放前面,指令放后面
- class
- id,ref
- name
- data-*
- src, for, type, href,value,max-length,max,min,pattern
- title, alt,placeholder
- aria-*, role
- required,readonly,disabled
- is
- v-for
- key
- v-if
- v-else-if
- v-else
- v-show
- v-cloak
- v-pre
- v-once
- v-model
- v-bind,:
- v-on,@
- v-html
- v-text
4.3 指令规范
4.3.1 指令采用缩写模式
// bad
v-bind:class="{'show-left':true}"
v-on:click="getListData"
// good
:class="{'show-left':true}"
@click="getListData"
4.3.2 v-for 必须加上 key
<!-- bad -->
<ul>
<li v-for="todo in todos">
{
{ todo.text }}
</li>
</ul>
<!-- good -->
<ul>
<li v-for="todo in todos" :key="todo.id">
{
{ todo.text }}
</li>
</ul>
4.3.3 避免 v-if 和 v-for 同时存在
-
解决方案:
-
将数据替换为一个计算属性,让其返回过滤后的列表
<!-- bad --> <ul> <li v-for="user in users" v-if="user.isActive" :key="user.id"> { { user.name }} </li> </ul> <!-- good --> <ul> <li v-for="user in activeUsers" :key="user.id"> { { user.name }} </li> </ul> <script> computed: { activeUsers: function () { return this.users.filter(function (user) { return user.isActive }) } } </script>
-
将 v-if 移动至容器元素上 (比如 ul, ol)
<!-- bad --> <ul> <li v-for="user in users" v-if="shouldShowUsers" :key="user.id"> { { user.name }} </li> </ul> <!-- good --> <ul v-if="shouldShowUsers"> <li v-for="user in users" :key="user.id"> { { user.name }} </li> </ul>
-
免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://yundeesoft.com/10576.html