一、命名规范
*命名原则:”简洁明了“为核心原则*
全部采用小写方式,仅限1到3个词组15个字符以内,用横线分割;
例:
project-name 或者 my-project-name
推荐2个词组即可,若超过15个字符可用缩写,例:my-pro-name
2.目录名称:
全部采用小写方式,限1词组10个字符以内
有复数结构时,要采用复数命名法
例:
components,libs,imgs,plug
全部采用小驼峰方式,限1到2个词组10个字符以内,可用缩写
例:
fundHome,finIndex,home
强制使用:index.vue和index.js
全部采用大驼峰方式,限1到3个词组15个字符以内,可用缩写
例:
NameCard.vue WxQuestion.vue
全部采用小驼峰方式,限1到2个词组10个字符以内,可用缩写
例:
index.vue index.js
(1) 声明变量禁止使用var关键字,使用const和let;
(2) script中 data变量 和 方法命名全部采用小驼峰方式
例:isRef、isShare、initData()、getUserInfo()
例:
const _this = this;
(2) 组件属性优先级顺序:条件 > ref > id > class > 参数 > 方法
(4) 组件方法:用$emit抛出方法时必须使用横线“-”连接,限1到3个词组15个字符以内
例:
this.$emit("pro-callback",res);
<product-swipev-if="isShare"ref="productSwipe"class="product_swipe_css":user-info="userInfo":is-ref="isRef"@pro-callback="proCallback"\></product-swipe>
(2) class名:用下划线“_”连接,限1到3个词组15个字符以内
例:
@default-color:#333
例:
.txtOverflow(@width:100%){display:block;width:@width;position:relative;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
(2) 接口名称:全部采用大驼峰,限2到3个词组20个字符以内
(3) 回调函数统一使用Promise函数,回调成功参数统一为res,错误参数为err
(4) 接口导出只能使用export {}按需导出,不能使用export default {}全量导出
例:
//获取用户信息constGetUserInfo=(params={})=>{returnnewPromise((resolve,reject)=>{getData(`/Beta.AuthMWeb/api/User/Get`,params,"get").then(res=>{if(res.State===0){resolve(res);}else{reject(res);}}).catch(err=>{console.error(err);reject(err);});});};export{GetUserInfo}
例:nav_right_back.png
(1) path路径/name路由名称/meta变量,全部采用小驼峰方式
例:
{path:"/login",name:"login",meta:{needLogin:false,title:"登录页"},component:()=>import(/* webpackChunkName:"login" */"@/views/login/index.vue")},
以上命名规范中未提到的其他名称命名,全部采用小驼峰方式
Html规范原则:1)、让浏览器更好、更快的解析代码 2)、让代码具有更好的可读性
例:
<div id="demo" class="demo_css" title="示例"></div>
例:
<inputtype="radio"name="radioName"checked="checked"/>
4.在Html中不能使用小于号“<”和大于号“>”,会影响浏览器解析,可使用字符实体
例:
<a href="#">查看更多>></a>
(1) 嵌套规则:块状元素可以嵌套行内元素,行内元素禁止嵌套块状元素
例:
div、p、ul.li等块状元素可以嵌套span、label、button,反之禁止使用
(2) Html中禁止使用空标签占位进行布局,可用padding和margin实现
(3) Html标签嵌套不能超过6层,否则就要重新考虑布局 或 拆分为组件
6.Html模板中应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法
7.Html中vue的指令都是用缩写形式,例:‘@’ 和 ‘:’
10.v-for和v-if、v-show不要同时使用在同一个标签上,可用""处理
11.Js和html中使用if/v-if判断时,多个条件互斥时,必须使用if-else if/v-if、v-else-if 语法,可提高代码效率
例:
<style lang="less" scoped>...</style>
4.所有样式都嵌套在父类选择器下,每个组件中style样式里只有一个样式根节点
例:
<style lang="less" scoped>.page_main_css{position:relative;overflow:hidden;width:100%;display:flex;justify-content:center;align-items:center;&>.null_img{width:80px;}&>.txt_tip_p{font-size:12px;text-align:center;color:#999;}}</style>
例:
:not(),:last-child等
6.避免使用style设置Dom样式,尽可能用className来改变元素样式
JS规范原则:简洁高效,增强可读性
例:
箭头函数,await/async、解构、let、for...of等等
(3) 必须加上required或者default,二者选其一
7.公用方法必须使用beta-jsdk和beta-util中的,禁止再次封装已存在的方法
8.Vue项目中禁止使用jQuery、zepto等操作Dom的组件库
13.一个函数的参数控制在6个以内,超过6个需要一对象的形式传参
15.定义的Vue组件全部采用按需导入(公共组件库中除外:betafinance、betacommon)
例:
//阅读数量和历史早报const readHistory = () => import(/* webpackChunkName: "readHistory" */ "./plug/readHistory");
16.使用localStorage请使用beta-util中封装的stLS、gtLS、rmLS方法
18.Js和html中使用if/v-if判断时,多个条件互斥时,必须使用if-else if/v-if、v-else-if 语法,可提高代码效率
注释原则:详尽说明,方便记忆,便于维护
(3) 每一个函数都必须添加注释,介绍函数的主要功能;若有参数,每一个参数都必须添加注释 例:
(4) 函数内部关键变量、复制逻辑或算法都必须添加注释 例:
所有项目目录结构、目录名称必须统一(项目名称除外)