建设银行wap网站,大气的wordpress,四川省建设主管部门网站,东莞网站托管前言 规范的目的是为了编写高质量的代码#xff0c;让你的团队成员每天的心情都是愉悦的#xff0c;大家在一起是快乐的。 现在软件架构的复杂性需要协同开发完成#xff0c;如何高效地协同呢#xff1f;无规矩不成方圆#xff0c;无规范难以协同#xff0c;比如#xf…前言 规范的目的是为了编写高质量的代码让你的团队成员每天的心情都是愉悦的大家在一起是快乐的。 现在软件架构的复杂性需要协同开发完成如何高效地协同呢无规矩不成方圆无规范难以协同比如指定交通法规表面上是要限制行车权实际上是保障公众地人身安全试想如果没有限速没有红绿灯谁还敢上路行驶。对软件来说适当的规范和标准绝不是消灭代码内容地创造性、优雅性而是限制过度个性化以一种普遍认可地统一方式一起做事提升协作效率降低沟通成本。代码地字里行间流淌的是软件系统地血液质量的提升是尽可能少踩坑杜绝踩重复的坑切实提升系统稳定性码出质量。 一、变成规约
(一)、命名规范
1.1.1、项目命名 全部采用小写方式以中线分割 正例mall-management-system
反例mall_management-system/mallManagementSystem
1.1.2、目录命名 全部采用小写方式以中线分割有复数结构时要采用复数命名法缩写不用复数 正例scripts/styles/components/images/utils/layouts/demo-styles/demo-scripts/img/doc
反例script/style/demo_scripts/demoStyles/imgs/docs
【特殊】VUE的项目中的components中的组件目录使用kebab-case命名
正例head-search/page-loading/authorized/notice-icon
反例HeadSearch/PageLoading
【特殊】VUE的项目中的除components组件目录外的所有目录也是用kebab-case命名
正例page-one/shopping-car/user-management
反例ShoppingCar/UserManagement
1.1.3、JS、CSS、SCSS、HTML、PNG文件命名 全部采用小写方式以中划线分割 正例render-dom.js/signup.css/index.html/comany-logo.png
反例renderDom.js/UserManagement.html
1.1.4、命名严谨性 代码中的命名严禁使用拼音与英文混合的方式更不允许直接使用中文的方式。说明正确的英文拼写和语法可以让阅读者易于理解避免歧义。注意即使纯拼音命名方式也要避免采用 正例henan/luoyang/rmb等国际通用的名称可视同英文
反例DaZhePromotion[打折]/getPingfenByName()[评分]/int 某变量 3
杜绝完全不规范的缩写避免望文不知意;
反例AbstractClass 缩写 命名成 AbsClass; condition 缩写 命名成 condi此类随意缩写严重降低了代码的可阅读性
(二)、HTML规范(Vue Template 同样适用)
1.2.1、HTML类型 推荐使用HTML5的文档类型申明; 建议使用text/html格式的 HTML.避免使用XHTML。XHTML以及它的属性比如application/xhtmlxml在浏览器中的应用支持与优化都十分有限规定字符编码IE兼容模式规定字符编码doctype大写 正例
!DOCTYPE html
htmlheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/headbodydiv classwrapper/div/body
/html1.2.2、缩进 缩进使用2个空格(一个tab)嵌套的节点应该缩进 1.2.3、分块注释 在每一个块状元素列表元素和表格元素后加上一对HTML注释。 1.2.4、语义化标签 HTML5新增很多语义化标签所以优先使用语义化标签避免一个页面都是div或者p标签 正例
header/header
footer/footer反例
divp/p
/div1.2.5、引号 使用双引号(“”)而不是单引号(‘’) 正例
div classbox/div反例
div classbox/div(三)、css规范
1.3.1、命名 类名使用小写字母以中划线分隔id采用驼峰式命名scss中的变量、函数、混合、placeholder 采用驼峰式命名 ID 和 class 的名称总是使用可以反应元素目的和用途的名称或其他通用的名称代替表象和晦涩难懂的名称。 不推荐
.fw-800{font-weight: 800;
}
.red{color: red;
}推荐
.heavy{font-weight: 800;
}
.important{color: red;
}1.3.2、选择器
(1)、css选择器中谜面使用标签名 从结构、表现、行为分离的原则来看应该尽量避免css中出现HTML标签并且在css选择器中出现标签名会存在潜在的问题。 (2)、直接使用子选择器 很多前端开发人员写选择器链的时候不使用子选择器(注直接子选择器和后代选择器的区别)。有时这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而在任何情况下这是一个非常不好的做法。如果你不写很通用的需要匹配到DOM末端的选择器你应该是直接考虑子选择器。 不推荐
.content .title{font-size: 2rem;
}推荐
.content.title{font-size:2rem;
}1.3.3、尽量使用缩写属性
不推荐
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;推荐
padding: 0 1em 2em;1.3.4、每个选择器及属性独占一行
不推荐
button{ width: 100px;height: 50px;
}推荐
button{width: 100px;height: 50px;
}1.3.5、省略0后面的单位
不推荐
div{padding-bottom: 0px;margin: 0em;
}推荐
div{padding-bottom: 0;margin: 0;
}1.3.6、避免使用ID选择器及全局标签选择器防止污染全局样式
不推荐
#header{padding-bottom: 0px;margin: 0em;
}推荐
.header{padding-bottom: 0px;margin: 0em;
}(四)、LESS规范
1.4.1、代码组织
(1)、将公共less文件放置在style/less/common文件夹
例//color.less,common.less
(2)、按以下顺序组织 import;变量声明;样式声明; import mixins/size.less;default-text-color: #333;.page{width: 960px;margin: 0 auto;
}1.4.2、避免嵌套层级过多 将嵌套深度限制在3级。对于超过4级的嵌套给予重新评估。这可以避免出现过于详实的ccss选择器。避免大量的嵌套规则。当可读性受到影响时将之打断。推荐避免出现多余20行的嵌套规则出现。 不推荐
.main{.title{.name{color: #fff;}}
}推荐
.main-title{.name{color: #fff;}
}(五)、javascript规范
1.5.1、命名
(1)、采用小写驼峰命名lowerCamelCase代码中的命名均不能以下划线也不能以下划线或美元符号结束
反例_name/name_/name$
(2)、方法名、参数名、成员变量、局部变量都统一使用lowerCamelCase风格必须遵循驼峰形式
正例localValue/getHttpMessage()/inputUserId
其中method方法命名必须是 动词 或者 动词名称 形式
正例saveShopCarData/openShopCarInfoDialog
反例save/open/show/go
特此说明增删改查详情统一使用如下 5 个单纯不得使用其他(目的是为了统一各个端)
add/update/delete/detail/get
附函数方法常用的动词
get 获取 set 设置
add 增加 remove 删除
create 创建 destory 销毁
start 启动 stop 停止
open 打开 close 关闭
read 读取 write 写入
load 载入 save 保存
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 折叠
enter 进入 exit 退出
abort 放弃 quit 离开
obsolete 废弃 depreciate 废旧
collect 收集 aggregate 聚集(3)、常量命名全部大写单词间用下划线隔开力求语义表达完整清除不要嫌名字长
正例MAX_STOCK_COUNT
反例MAX_COUNT
1.5.2、代码格式
(1)、使用2个空格进行缩进
正例
if(xy) {x 10;
} else {x 1;
}(2)、不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性 说明任何情形没有必要插入多个空行进行隔开。 1.5.3、字符串 统一使用单引号(‘’)不使用双引号(“”)。这在创建HTML字符串非常有好处 正例
let str foo
let testDiv div idtest/div;反例
let str foo;
let testDiv div idtestdiv;1.5.4、对象声明
(1)、使用字面值创建对象
正例let user {}
反例let user new Object()
(2)、使用字面量来代替对象构造器
正例
var user {age: 0,name: 1,city: 3
}反例
var user new Object();
user.age 0;
user.name 0;
user.city 0;1.5.5、使用ES6 必须优先使用ES6中新增的语法糖和函数。这将简化你的程序并让你的代码更加灵活和可复用。比如箭头函数、await/async解构letfor...of等等 1.5.6、括号 下列关键字后必须有大括号(即使代码块的内容只有一行)if、else、for、while、do、switch、try、catch、finally、with 正例
if(condition){doSomething();
}反例
if(condition) doSomething();1.5.7、undefined判断 永远不要直接使用undefined进行变量判断使用typeof和字符串undefined对变量进行判断 正例
if(typeof person undefined){...
}反例
if(person undefined){...
}1.5.8、条件判断和循环最多三层 条件判断能使用三目运算符和逻辑运算符解决的就不要使用条件判断但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数并写清注释。 1.5.9、this的转换命名 对上下文 this 的引用只能使用 self 来命名 1.5.10、慎用console.log 因console.log大量使用会有性能问题所以在非webpack项目中谨慎使用log功能 二、Vue项目规范
(一)、Vue编码基础 vue项目规范以Vue官方规范(https://cn.vuejs.org/v2/style-guide)中的A规范为基础在其上面进行项目开发故所有代码均遵守该规范。 请仔仔细细阅读 Vue官方规范切记此为第一步 2.1.1、组件规范
(1)、组件名为多个单词 组件名应该始终是多个单词组成(大于等于2)且命名规范为kebab-case格式。这样做可以避免跟现有的以及未来的HTML元素相冲突因为所有的HTML元素名称都是单个单词的。 正例
export default {name: TodoItem
}反例
export default {name: Todo,
}
export default {name: todo-item
}(2)、组件文件名为pascal-case格式
正例
components/
|- my-component.vue反例
components/
|- myComponent.vue
|- MyComponent.vue(3)、基础组件文件名为base开通使用完整单词而不是缩写
正例
components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue反例
components/
|- MyButton.vue
|- VueTable.vue
|- icon.vue(4)、和父组件紧密耦合的子组件应该以父组件名作为前缀命名
正例
components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue (完整单词)反例
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- UProfOpts.vue (使用了缩写)(5)、在Template模板中使用组件应使用PascalCase模式并且使用自闭和组件
正例
!-- 在单文件组件、字符串模板和JSX中 --
MyComponent /
Rowtable :columndata//Row反例
my-component/rowtable :columndata//row(6)、组建的data必须是一个函数 当在组件中使用data属性的时候(除了new Vue外的任何地方)它的值必须是返回一个对象的函数。因为如果直接是一个对象的话子组件之间的属性值就会互相影响。 正例
export default {data(){return {name: jack}}
}反例
export default {data: {name: jack}
}(7)、Prop定义应该尽量详细 必须使用camelCase驼峰命名必须指定类型必须加上注释表明其含义必须加上required或者default两者二选其一如果有业务需要必须加上validator验证 正例
props: {// 组件状态用于控制组件的颜色status: {type: String,required: true,validator: function(value) {return [succ,info,error].indexOf(value) ! -1} },// 用户级别用于显示皇冠个数userLevel: {type: String,required: true}
}(8)、为组件样式设置作用域
正例
templatebutton classbtn btn-closeX/button
/template!-- 使用scoped特性 --
style scoped.btn-close {background-color: red;}
/style反例
templatebutton classbtn btn-closeX/button
/template!-- 没有使用scoped特性 --
style.btn-close {background-color: red;}
/style(9)、如果特性元素较多应该主动换行
正例
MyComponent fooa barb bazcfooa barb bazcfooa barb bazc
/反例
MyComponent fooa barb bazc fooa barb bazc fooa barb bazc/2.1.2、模板中使用简单的表达式 组件模板应该只包含简单的表达式复杂的表达式则应该重构为计算属性或方法。复杂表达式会让你的模板变得不那么生命式。我们应该尽量描述应该出现的是什么而非如何计算那个值。而且计算数学和方法使得代码可以重用。 正例
templatep{{ normalizedFullName }}/p
/templatescript// 复杂表达式已经移入一个计算属性computed:{normalizedFullName: function(){return this.fullName.split().map(function(word){return word[0].toUpperCase() word.slice(1)}).join()}}
/script
反例
templatep{{fullName.split().map(function(word){return word[0].toUpperCase() word.slice(1)}).join()}}/p
/template2.1.3、指令都使用缩写形式 指令推荐都是用缩写形式(用:表示 v-bind、用表示v-on、用#表示v-slot) 正例
input inputonInputfocusonFocus
/反例
input v-on:inputonInputfocusonFocus
/2.1.4、标签顺序保持一致 单文件组件应该总是让标签顺序保持一致 正例
template.../template
script.../script
style.../style反例
template.../template
style.../style
script.../script2.1.5、必须为v-for设置键值key
2.1.6、v-show与v-if选择 如果运行时需要非常频繁地切换使用v-show;如果在运行时条件很少改变使用v-if 2.1.7、script标签内部结构顺序 name components mixins props data computed filter 钩子函数(钩子函数安其执行顺序) methods 2.1.8、Vue Router规范
(1)、页面跳转数据传递使用路由参数 页面跳转例如 A 页面跳转到 B 页面需要将 A 页面地数据传递到 B页面推荐使用 路由参数进行传参而不是将需要传递地数据保存vuex然后在 B 页面去出vuex地数据因为如果在 B 页面刷新会导致vuex数据丢失导致 B 页面无法正常显示数据。 正例
let id 123;
this.$router.push({name: userCenter,query:{id:id}})(2)、使用路由懒加载(延迟加载)机制
{path: uploadAttachment,name: uploadAttachment,meta: {title: 上传附件},component: () import(/view/components/uploadAttachment/index.vue)
}(3)、router中的命名规范 path、childrenPoints命名规范采用kebeb-case命名规范(尽量vue文件的目录结构保持一致因为目录、文件名都是kebeb-case,这样很方便找到对应的文件)name命名规范采用kebeb-case命名规范且和component组件名保持一致(因为要保持keep-alive特性keep-alive按照component的name进行换乘所以两者必须高度保持一致) // 动态加载
export const reload [{path ‘/reload,name: reload,component: Main,meta: {title: 动态加载,icon: icon iconfont}childred: [{path: /reload/smart-reload-list,name: SmartReloadList,meta: {title: SmartReload,childrenPoins:[{title: 查询,name: smart-reload-search}]},component: () important(/views/reload/smart-reload/smart-reload-list.vue)}]
}](4)、router中的path命名规范 path除了采用kebab-case命名规范以外必须以/开头即使是children里的path也要以/开头。目的 经常有这样的场景某个页面有问题要立刻找到这个vue文件如果不以/开头path为parent和children组成的可能经常需要在router文件里搜索多次才能找到而如果以/开头则能立刻搜索到对应的组件 {path: file,name: File,component: Main,meta: {title: 文件服务,icon: iox-cloud-upload},children: [{path: /file/file-list,name: FileList,component: () import(/views/file/file-list.vue)},{path: /file/file-add,name: FileAdd,component: () import(/views/file/file-add.vue)}]
}(二)Vue项目目录规范
2.2.1、基础 vue项目中的所有命名一定要与后端名统一比如权限后端privilege前端无论router、storeapi等都必须使用rivielege单词 2.2.2、使用Vue-cli脚手架 使用vue-cli3来初始化项目项目名按照上面的命名规范 2.2.3、目录说明 目录名按照上面的命名规范其中components组件用大写驼峰其余除components组件目录外的所有目录均使用kebab-case命名。 src 源码目录
|-- api 所有api接口
|-- assets 静态资源imagesiconsstyles等
|-- components 公用组件
|-- config 配置信息
|-- constants 常量信息项目所有Enum全局常量等
|-- directives 自定义指令
|-- filters 过滤器全局工具
|-- datas 模拟数据临时存放
|-- lib 外部引用的插件存放及修改文件
|-- mock 模拟接口临时存放
|-- plugins 插件全局使用
|-- router 路由统一管理
|-- store vuex统一管理
|-- themes 自定义样式主题
|-- views 视图目录
| |-- role role模块名
| |--|-- role-list.vue role列表页面
| |--|-- role-add.vue role新建页面
| |--|-- role-update.vue role更新页面
| |--|-- index.less role模块样式
| |--|-- components role模块通用组件文件夹
| |-- employee employee模块(1)、api目录 文件、变量命名要与后端保持一致此目录对应后端API接口按照后端一个controller一个api.js文件。若项目较大时可以按照业务划分子目录并与后端保持一致api中的方法名字要与后端api url尽量保持语义高度一致性对于api中的每个方法要添加注释注释与后端swagger文档保持一致。 正例
后端 url EmployeeController.java
/employee/add
/employee/delete/{id}
/employee/update前端 employee.js
// 添加员工
function adEmployee(data) {return postAxios(/employee/add,data)
}// 跟新员工信息
function updateEmployee(data ){return postAxios(/employee/update,data)
}// 删除员工
function delefeEmployee(employeeId) {return postAxios(/employee/delete/ employeeId)
}// 获取员工信息
function getEmployee(data) {return postAxios(/employee/get,data)
}// 获取员工信息列表
function getEmployeeList(data) {return postAxios(/employee/getlist,data)
}(2)、assets目录 assets为静态资源里面存放images、styles、icons等静态资源静态资源命名格式为kebab-case | assets
|-- icons
|-- images
| |-- background-color.png
| |-- upload-header.png
|-- styles(3)、components目录 此目录应按照组件进行目录划分目录命名为kebab-case组件命名规范也为kebab-case | components
|-- error-log
| |-- index.vue
| |-- index.less
|-- markdown-editor
| |-- index.vue
| |-- index.js
|-- kebab-case(4)、constants目录 此目录存放项目所有常量如果常量在vue中使用请使用vue-enum插件 目录结构
| constants
|-- index.js
|-- role.js
|-- employee.js
例子 employee.js
export const EMPLOYEE_STATUS {NORMAL: {value: 1,desc: 正常},DISABLED: {value: 1,desc: 禁用},DELETED: {value: 2,desc: 已删除}
}export const EMPLOYEE_ACCOUNT_TYPE {QQ: {value: 1,desc: QQ登录},WECHAT: {value: 2,desc: 微信登录},DINGDING: {value: 3,desc: 钉钉登录},USERNAME: {value: 4,desc: 用户名密码登录}
}export default {EMPLOYEE_STATUS,EMPLOYEE_ACCOUNT_TYPE
}(5)、router与store目录 这两个目录一顶要将业务进行拆分不能放到一个js文件里。router尽量按照views中的结构保持一致store按照业务进行拆分不同的js文件 (6)、views目录 命名要与后端、router、api等保持一致components中组件要使用PascalCase规则 |-- views 视图目录
| |-- role role 模块名
| | |-- role-list.vue role 列表页面
| | |-- role-add.vue role新建页面
| | |-- role-update.vue role更新页面
| | |-- index.less role模块样式
| | |-- components role 模块通用组件文件夹
| | | |-- role-header.vue role 头部组件
| | | |-- role-modal.vue role弹出框组件
| |-- employee employee 模块
| |-- behavior-log 行为日志log模块
| |-- code-generator 代码生成器模块2.2.4、注释说明 整理必须加注释的地方 公共组件使用说明api目录的js文件必须加注释store中的state、mutation、action等必须加注释vue文件中的template必须加注释若文件较大添加start end注释vue文件的methods每个method必须添加注释vue文件的data非常见单词要加注释 2.2.5、其他
(1)、尽量不要手动操作DOM 因使用vue框架所以在项目开发中尽量使用vue的数据驱动更新DOM尽量(不到万不得已)不要手动操作DOM包括增删改dom元素、以及更改样式、添加事件等。 (2)、删除无用代码 因使用了git/svn等代码版本工具对于无用代码必须及时删除例如一些调试的console语句、无用的弃用功能代码
