我们先来说一下为什么要是进行代码注释。
我们知道一个项目的代码有很多,如果我们一直去写代码,最后的功能是实现了,但是时间久了,我们后面在写其他项目的时候发现之前的项目写过,你在回头看的时候你就会发现,你连你自己写的代码都看不懂,这时候就体现到了代码注释的重要性,还有一个就是写代码注释的时候不要去很官方的去进行注释,而是要注释这一步做了什么,他实现了什么。
这样在以后反过来看自己写的代码的时候会直接知道这段代码是做什么的,他跟哪段代码相对应。我们来看一段代码的注释
// 查询
function button_query() {
// 获取各个查询条件的值
let teacherName = $('.Package_name').val(); // 姓名
let statusValue = $('#status').val(); // 状态
let package_time = $('.package_input').val(); // 电话
let myTwoSelectValue = $('#package_type').val(); // 类型
let rewardValue = $('#reward').val(); // 金额
// 定义悬赏金额范围判断的映射对象
let rewardRangeMap = {
"1": (money) => checkRange(money, 0, 100),
"2": (money) => checkRange(money, 101, 200),
"3": (money) => checkRange(money, 201, 300),
"4": (money) => checkRange(money, 301, 500),
"5": (money) => checkRange(money, 501, 1000),
"6": (money) => money > 1000
};
function checkRange(money, min, max) {
return money >= min && money <= max;
}
// 对获取到的数据进行筛选
let filteredData = datas.filter(function (item) {
// 检查发布人是否匹配(转换为小写进行模糊匹配,如果输入框为空则视为匹配所有)
let nameMatch = !teacherName || item.name.toLowerCase().includes(teacherName.toLowerCase());
// 检查状态是否匹配(如果下拉框选择的是默认值则视为匹配所有)
let statusMatch = !statusValue || item.type == statusValue;
// 检查电话是否匹配(转换为小写进行模糊匹配,如果输入框为空则视为匹配所有)
let telMatch = !package_time || item.tel.toLowerCase().includes(package_time.toLowerCase());
// 检查类型是否匹配(如果下拉框选择的是默认值则视为匹配所有)
let typeMatch = !myTwoSelectValue || item.setmeal == myTwoSelectValue;
// 检查悬赏金额是否匹配(根据不同金额范围选项进行判断)
let rewardMatch = !rewardValue || (rewardRangeMap[rewardValue] && rewardRangeMap[rewardValue](item
.money));
// 检查创建时间是否在所选日期范围内(如果未选择日期则视为匹配所有)
let timeMatch = (!startTimestamp || new Date(item.addtime).getTime() >= startTimestamp) &&
(!endTimestamp || new Date(item.addtime).getTime() <= endTimestamp);
// 假设页面上有一个id为demandInput的输入框用于输入需求描述进行查询,可根据实际情况调整
let demandMatch = true;
if ($('#demandInput').val()) {
demandMatch = item.demand.toLowerCase().includes($('#demandInput').val().toLowerCase());
}
return nameMatch && statusMatch && telMatch && typeMatch && rewardMatch && timeMatch && demandMatch;
});
if (filteredData.length == 0) {
applys(filteredData);
document.getElementById('content').innerHTML = '<div class="no_data">暂无数据</div>';
//设置定时器
} else {
res = filteredData;
// 渲染筛选后的数据到页面
applys(res);
}
}
接下来,我们再说一下为什么要规范代码的命名,在写项目的时候会分很多的区域块,这时候就要按照区域块进行命名,一是规范命名,二是这个项目是团队合作的话,别人也可以很清楚的读懂你的代码,不会像是套餐区域用别的命名,一点也不对照,所以一定要规范代码的命名,也方便自己后面返回来看代码的时候一眼都知道是哪里 。
总结:写好代码注释和命名规范,会给我们减少很多麻烦,在后面写到相同的功能和样式的时候可以直接返回来,找到我们写好的直接套用。