代码文件和类名的规范命名,可以提高代码可读性以及方便查找样式,也是模块化组件化不可或缺的。
// 每个模块都有属于自己的名字 可以多积累词汇量 直接百度翻译也可 举个栗子
reagion 地域
chart 图表
wrap container 常用于最外层
content main 主体内容
item 渲染项
// 驼峰命名法,‘-’符号连接等等 以下是个人习惯
文件命名:
reagionAnalysis.vue // 或 reagion-analysis.vue 地域分析界面
样式类名命名
reagion-analysis-wrap // 最外层盒子
reagion-analysis-content // 主要内容
reagion-analysis-chart // 地域图表
region-chart-item // 单个图表
建议:
1.类名最好不要超过4个‘-’的分割或者驼峰,保持可读性
2.命名语义化,带区分,这里就可以避免vue中scope的缺点(个人不建议使用scope)
代码规范主要在于养成好的书写习惯
// 可以通过拆分的方式控制代码的行数
let firstName=event.message.firstName
let secondName =event.message.secondName
this.status?firstName:secondName // 三目运算嵌套
this.dataList.filter(item=>item.createTime).join().split() // 链式编程
dataList 数据列表
reagionData 地图数据
status 状态
// Boolean 类型可以通过前面加 is 去区分 举个栗子
isHidden 是否隐藏
isEmpty 是否为空
// if else if 不建议超过5层
if(status==='0'){
// 如果状态为0的处理
}else if(status==='1'){
// 如果状态为1的处理
}else if(status==='2'){
// 如果状态为2的处理
}else{
// 其他
}
...
// 如果有需要很多判断 可以尝试 switch(status){case '0':}
// 可以参考以下顺序写
export default {
name:'componentDemo',
data () {
return {}
},
// 注册组件
components:{},
created(){},
monuted(){},
computed:{},
filters:{},
watch:{},
mixins:[mixins],
extends:extend,
//methods处理方法一般逻辑 内容较多 所以放这
methods: {},
beforeDestroy(){}
}
暂时就这么多了,命名规范,组件化,模块化很有利于代码的可读性和项目的维护,也能提高开发效率,欢迎指正交流