论web开发中一些标签属性命名规则的重要性
程序员文章站
2022-05-31 23:08:04
...
在平时做项目时给页面标签赋值或者拿值等操作时，都会根据对应的id或者name、class或者通过jquery 的其他方式来操作。不过在一些很平常的一些操作来说，命名可能只是给标签赋予一个身份，指定一个名称，并没有考虑太多。
不过在一些特殊的情况下时，一个适应当下操作的命名规则很重要。
例如曾经我碰到一个进度报表：
这个报表需要统计每个不同类型（新户、分户.....）的工单对应流程（用户申请....）的数量，可能有些会调用很多的查询去统计每个的数量。其实在一些业务需求下，根据一些已存在的特殊性可以很方便的进行操作。就比如这个工单的类型最开始的时候已经定义了用什么指代它，假设1~7对应每一个工单，而流程步骤也是对应-1~8。当我想到这一步的时候，我只需要从数据库拿出三个列的数据：统计数、工单类型、流程，一个统计加分组的视图完全可以做到。
既然能拿到所有的对应数据了，那么在标签命名这一块其实根据这三个列就很好来命名了
如：id='s1o1',id='s1o2' 这两个分别对应的是新户工单的新户申请和分户申请的工单申请，
<thead>
<tr>
<th>进度</th>
<th width="100">新户</th>
<th width="100">分户</th>
<th width="100">过户</th>
<th width="100">代扣</th>
<th width="100">换表</th>
<th width="100">重签</th>
<th width="100">销户</th>
<th width="100">总数</th>
</tr>
</thead>
<tbody>
<tr>
<td class="center item">01 用户申请</td>
<td class="center num" id="s1o1">0</td>
<td class="center num" id="s1o2">0</td>
<td class="center num" id="s1o3">0</td>
<td class="center num" id="s1o4">0</td>
<td class="center num" id="s1o5">0</td>
<td class="center num" id="s1o6">0</td>
<td class="center num" id="s1o7">0</td>
<td class="center cnt num" id="s1oo">0</td>
</tr>
<tr>
<td class="center item">02 初步审核</td>
<td class="center num" id="s2o1">0</td>
<td class="center num" id="s2o2">0</td>
<td class="center num" id="s2o3">0</td>
<td class="center num" id="s2o4">0</td>
<td class="center num" id="s2o5">0</td>
<td class="center num" id="s2o6">0</td>
<td class="center num" id="s2o7">0</td>
<td class="center cnt num" id="s2oo">0</td>
</tr>
<tr>
<td class="center item">03 交施工费</td>
<td class="center num" id="s3o1">0</td>
<td class="center num" id="s3o2">0</td>
<td class="center num" id="s3o3"></td>
<td class="center num" id="s3o4"></td>
<td class="center num" id="s3o5">0</td>
<td class="center num" id="s3o6"></td>
<td class="center num" id="s3o7"></td>
<td class="center cnt num" id="s3oo">0</td>
</tr>
<tr>
<td class="center item">04 水费清算</td>
<td class="center num" id="s4o1"></td>
<td class="center num" id="s4o2">0</td>
<td class="center num" id="s4o3"></td>
<td class="center num" id="s4o4"></td>
<td class="center num" id="s4o5"></td>
<td class="center num" id="s4o6"></td>
<td class="center num" id="s4o7">0</td>
<td class="center cnt num" id="s4oo">0</td>
</tr>
<tr>
<td class="center item">05 供水协议</td>
<td class="center num" id="s5o1">0</td>
<td class="center num" id="s5o2">0</td>
<td class="center num" id="s5o3"></td>
<td class="center num" id="s5o4"></td>
<td class="center num" id="s5o5"></td>
<td class="center num" id="s5o6">0</td>
<td class="center num" id="s5o7"></td>
<td class="center cnt num" id="s5oo">0</td>
</tr>
<tr>
<td class="center item">06 施工竣工</td>
<td class="center num" id="s6o1">0</td>
<td class="center num" id="s6o2">0</td>
<td class="center num" id="s6o3"></td>
<td class="center num" id="s6o4"></td>
<td class="center num" id="s6o5">0</td>
<td class="center num" id="s6o6"></td>
<td class="center num" id="s6o7"></td>
<td class="center cnt num" id="s6oo">0</td>
</tr>
<tr>
<td class="center item">07 通水停水</td>
<td class="center num" id="s7o1">0</td>
<td class="center num" id="s7o2">0</td>
<td class="center num" id="s7o3"></td>
<td class="center num" id="s7o4"></td>
<td class="center num" id="s7o5">0</td>
<td class="center num" id="s7o6"></td>
<td class="center num" id="s7o7">0</td>
<td class="center cnt num" id="s7oo">0</td>
</tr>
<tr>
<td class="center item">08 档案存档</td>
<td class="center num" id="s8o1">0</td>
<td class="center num" id="s8o2">0</td>
<td class="center num" id="s8o3">0</td>
<td class="center num" id="s8o4">0</td>
<td class="center num" id="s8o5">0</td>
<td class="center num" id="s8o6">0</td>
<td class="center num" id="s8o7">0</td>
<td class="center cnt num" id="s8oo">0</td>
</tr>
<tr class="todo">
<td class="center item"> 待办总数</td>
<td class="center num" id="o1">0</td>
<td class="center num" id="o2">0</td>
<td class="center num" id="o3">0</td>
<td class="center num" id="o4">0</td>
<td class="center num" id="o5">0</td>
<td class="center num" id="o6">0</td>
<td class="center num" id="o7">0</td>
<td class="center cnt num" id="oo">0</td>
</tr>
<tr>
<td class="center item"> 工单完成</td>
<td class="center num" id="s0o1">0</td>
<td class="center num" id="s0o2">0</td>
<td class="center num" id="s0o3">0</td>
<td class="center num" id="s0o4">0</td>
<td class="center num" id="s0o5">0</td>
<td class="center num" id="s0o6">0</td>
<td class="center num" id="s0o7">0</td>
<td class="center cnt num" id="s0oo">0</td>
</tr>
<tr>
<td class="center item"> 工单终止</td>
<td class="center num" id="s-1o1">0</td>
<td class="center num" id="s-1o2">0</td>
<td class="center num" id="s-1o3">0</td>
<td class="center num" id="s-1o4">0</td>
<td class="center num" id="s-1o5">0</td>
<td class="center num" id="s-1o6">0</td>
<td class="center num" id="s-1o7">0</td>
<td class="center cnt num" id="s-1oo">0</td>
</tr>
</tbody>那么利用Ajax拿取返回值，使用jquery的each 用 $("#s"+this.stepId+"o"+this.orderType).text(this.count);绑值，完全一句代码可以完成。
在Ajax的success里执行
$.each(data,function(){
//给对应工单的对应流程绑值
$("#s"+this.stepId+"o"+this.orderType).text(this.count);
});
//流程统计
for (var i = -1; i < 9; i++) { //流程
var counts = 0;
for (var j = 1; j < 8; j++) {//工单类型
var z= $("#s"+i+"o"+j).text();
if(z!=''){
counts=counts+parseInt(z);
}
}
//设置流程统计
$("#s"+i+"oo").text(counts);
}
//待完成总和
var cou = 0;
//统计待完成
for (var j = 1; j < 8; j++) {//工单类型
var counts = 0;
for (var i = 1; i < 9; i++) { //流程
var z= $("#s"+i+"o"+j).text();
if(z!=''){
counts=counts+parseInt(z);
}
}
cou=cou+counts;
//设置统计待完成
$("#o"+j).text(counts);
}
//设置待完成总和
$("#oo").text(cou);
}至此完全可以给所有标签赋值。
其实每一个统计数来的 td都能点击去详细页面。而我们只需要把id传过去，进行处理就可以得到对应的统计数信息。
当然可能这种比不是适用于所有的报表什么的，只能说在某种情况下面，看清此时的需求及数据与页面的关系，定义一个正确的命名规则可以省去很多事情。
如果我还有不足的地方请大佬提示