360企业网站认证,常德建设网站,教程网网站源码php,郑州 网站制作阿里设计规范
!!! 项目中除注释之外 不要出现汉字情况#xff01;#xff01;#xff01;
代码格式化问题
vscode安装 Prettier插件 将其设为默认格式化 这个工具能够使输出代码保持风格一致。 注释与命名
样式命名
class、id都需小写命名使用英文#xff0c;禁止使用…阿里设计规范
!!! 项目中除注释之外 不要出现汉字情况
代码格式化问题
vscode安装 Prettier插件 将其设为默认格式化 这个工具能够使输出代码保持风格一致。 注释与命名
样式命名
class、id都需小写命名使用英文禁止使用特殊字符名称间隔使用 - 符号类名命名需要语义化参考下面的示例
.wrap{} //外层容器.mod-box{} //模块容器.btn-start{} //开始.btn-download-ios{} //ios下载.btn-download-andriod{} //安卓下载.btn-head-nav1{} //头部导航链接1.btn-news-more{} //更多新闻.btn-play{} //播放视频.btn-ico{} //按钮ico.btn-lottery{} //开始抽奖.side-nav{} //侧栏导航.side-nav-btn1{} //侧栏导航-链接1 .btn-more{} //更多图片命名
图片名称必须小写禁止使用特殊字符、中文使用英文或拼音缩写禁止特殊字符名称间隔使用 - 符号命名需要能体现图片的大概用途
常用示例 bg.jpg //背景图片mod-bg.jpg //模块背景sprites.png //精灵图btn-start.png //开始按钮ico-play.png //修饰性图片禁止文件名和实际图片内容不符。反面例子图片名为’weixin-qrcode’图片内容却是头像。 文件命名
所有文件名统一使用小写首页命名为index.html html内页有明显分类的参考使用以下示例命名无明确意义的可用page01.html、page02.html禁止使用特殊字符统一使用小写字母 常用命名
专题名称 描述
index.html 引导页首页
main.html 首页
news.html 资讯页
newsdetail.html 资讯详情页
raiders.html 攻略页
raidersdetail.html 攻略页详情页
download.html 下载页面
actlist.html 活动列表页面
video.html 视频
cdkey.html CDKEY 兑换页
wallpaper.html 壁纸页面按照小驼峰命令英文单词过长或超出2个以上可缩略至前四位如
// 业务统计
approvalStatistical// 缩略
approvalStat有复数含义采用复数命名如
pages, componets, filters, mixins images组件进行目录划分目录命名为小驼峰公用组件加上gd前缀如
|components
|-- gdCustomCheck
| |-- index.vue
|-- gdCustomTable
| |-- index.vue目录命名
按照小驼峰命名首字母小写
项目文件夹projectName样式文件夹css / scss脚本文件夹js
css规范
颜色 除特殊情况 如echarts图或特殊要求请勿直接在本页面写入color、background-color 等颜色相关的样式 字体 如需对字体大小进行调整 可以采用如下方式 --size 为 14px
font-size: calc(var(--size) - 2px); 表示在14的基础上 -2px
font-size: calc(var(--size) 2px); 表示在14的基础上 2px
font-size: var(--size) 表示 字体大小为 14px选择器 非特殊情况下禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外 非特殊情况下禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外 非特殊情况下禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外 避免
避免使用标签选择器。因为在 Vue 中特别是在局部组件使用标签选择器效率特别低损耗性能建议需要的情况直接定义 class非特殊情况下禁止使用 ID 选择器定义样式。有 JS 逻辑的情况除外避免使用important选择器避免大量的嵌套规则控制在3级之内对于超过4级的嵌套考虑重写或新建子项避免使用ID选择器及全局标签选择器防止污染全局样式
推荐使用
提取公用样式进assets文件styles里按模块/功能区分
|assets
|-- styles
| |-- common 放置公用样式如重置混合复写element样式等
| |-- modules 放置模块样式
**加粗样式**
2. 推荐使用直接子选择器css
/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}/* 不推荐 */
*{}
#jdc {}
.jdc div{}!!! 使用 scoped 关键字约束样式生效的范围 !!! style langscss scoped
.app-wrapper {...
}
/style使用变量
可复用属性尽量抽离为页面变量易于统一维护
// CSS
.class-name {color: red;border-color: red;
}// SCSS
$color: red;
.class-name {color: $color;border-color: $color;
}使用混合mixin
根据功能定义模块然后在需要使用的地方通过 include 调用避免编码时重复输入代码段
// CSS
.jdc_1 {-webkit-border-radius: 5px;border-radius: 5px;
}
.jdc_2 {-webkit-border-radius: 10px;border-radius: 10px;
}// SCSS
mixin radius($radius:5px) { // 当前代码可写入公用样式库mixin文件中-webkit-border-radius: $radius;border-radius: $radius;
}
.jdc_1 {include radius; //参数使用默认值
}
.jdc_2 {include radius(10px);
}注释规范
以/ 注释内容 /格式注释前后空格嵌套子类需要一个回车分割开
/* 注释内容 */
.pha-element {width: 20px;/* 这里需要换行 */.pha-element-l {color: blue}
}函数/方法注释必须包含函数说明有参数和返回值时必须使用注释标识它的作者, 依赖关系和兼容性信息
单行注释双斜线后应跟空格且缩进与上下文的代码保持一致或在行尾注释在行尾依然需要左右空格
// 一些说明...
const userID 24;
const userID 12; // 一些说明多行注释一般用于注释难以理解的、可能存在错误的、逻辑强的代码且缩进一致
/** 针对下方代码的说明* 第一行太长写第二行*/
const a 1!!! 如果注释掉一些还肯能有用的代码 标注其用处 和什么时候要打开 !!! 函数注释写明传入参数名称类型推荐完整注释以下格式
/*** Description 加入购物车* Author lint * Date 2020-09-08 * param {Number} goodId 商品id* param {ArrayNumber} specs sku规格* param {Number} amount 数量* param {String} remarks 备注* returns Promise 购物车信息*/
apiProductAddCard (goodId, specs, amount, remarks) {return axios.post(***, { goodId, specs, amount, remarks })
}/*** Description 根据字典编码获取选项名称* Author lint* Date 2020-09-08* param {String} key 编码* param {String} val 值* returns {String} 字典名称*/
getDictText(key, val) {const item this.dictData[key].find(k k.dictKey val)return item ? item.dictValue :
}文件注释
/*** Description: 文件名称* Author: lint* Date: 2020-09-08* */这里可以注释一下 文件的路由地址 和菜单名称 方便查找和修改 JS规范
在vue-cli 脚手架使用架自带的指向 src 开发目录的 ‘’ 符号引入文件资源使用计算属性规避 v-if 和 v-for 用在一起统一使用单引号坚持单一原则函数内仅做该函数应该做的尽量避免通过传入标记控制不同行为优先考虑三目运算符但谨记不要写超过3层的三目运算符对于无用代码必须及时删除例如一些调试的 console 语句、无用的弃用功能代码如在开发分支可提交打印代码但要注意打印格式如下
// 推荐
console.log(路由: 文件路由, 打印简述: 打印数据)// 不推荐
console.log(打印数据, 1111)条件语句避免负面条件特指调用某一函数
// 推荐
function isUserNotBlocked(user) {// ...
}// 不推荐
if (!isUserNotBlocked(user)) {// ...
}请求数据的方法使用try catch 错误捕捉注意执行回调!!! /*** 接口请求* param req 接口api* param params 参数*/
async httpInterface(req, params) {try {this.loading trueconst res await req(params)return Promise.resolve(res)} catch (e) {return Promise.reject(e)} finally {this.loading false}
}// 使用
this.httpInterface(req, {}).then((resove, reject) {console.log(resove, reject)
})finally 很重要
