[JavaScript知识库]代码规范---命名及总结篇

必要性

代码文件和类名的规范命名，可以提高代码可读性以及方便查找样式，也是模块化组件化不可或缺的。

命名方式

// 每个模块都有属于自己的名字 可以多积累词汇量 直接百度翻译也可 举个栗子
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）

结语

代码规范主要在于养成好的书写习惯

1.命名上通俗易懂，划分上区分开来

2.每行代码行数不宜太多，三目运算链式编程亦如此

// 可以通过拆分的方式控制代码的行数
let firstName=event.message.firstName
let secondName =event.message.secondName 
this.status?firstName:secondName // 三目运算嵌套
this.dataList.filter(item=>item.createTime).join().split() // 链式编程

3.变量命名常用驼峰命名，同样保持语义化，不重复

dataList 数据列表
reagionData 地图数据
status 状态
// Boolean 类型可以通过前面加 is 去区分 举个栗子
isHidden 是否隐藏
isEmpty 是否为空

4.判断不要超过太多层，比较用全等 ===

// if else if 不建议超过5层
if(status==='0'){
 // 如果状态为0的处理
}else if(status==='1'){
// 如果状态为1的处理
}else if(status==='2'){
// 如果状态为2的处理
}else{
// 其他
}
...
// 如果有需要很多判断 可以尝试 switch(status){case '0':}

5.每个文件可以将样式，界面归到一个文件下

6.关于vue2的一些使用习惯

// 可以参考以下顺序写
export default {
	name:'componentDemo',
	data () {
		return {}
	},
	// 注册组件
	components:{},
	created(){},
	monuted(){},
	computed:{},
	filters:{},
	watch:{},
	mixins:[mixins],
	extends:extend,
	//methods处理方法一般逻辑 内容较多 所以放这
	methods: {},
	beforeDestroy(){}
}

暂时就这么多了，命名规范，组件化，模块化很有利于代码的可读性和项目的维护，也能提高开发效率，欢迎指正交流😀