为什么需要扩展标签属性？（搭建场景体会）

关于给指定标签扩展属性

在了解这个问题之前需要先弄清楚为什么要给标签扩展属性，是因为原来定义的标签属性不够用？还是因为自定义的标签属性能够更好的区分多个相同的标签？

了解CRM项目开发过程之后，明白了给标签扩展属性主要有两个作用：

• 保存数据
• 区分标签更好的定位（弥补标签中id属性值不能重复的缺陷）

下面根据实际应用场景详细体会。

场景搭建

在项目开发过程中，在保存数据上也有一些人们常常遵守的规范：

• 如果是表单组件标签（例如：input select textarea 等）：优先使用标签自带的value 属性，如果value 属性被占用或不方便使用，则可以扩展属性，也就是自定义属性。
• 如果是非表单组件标签：推荐使用自定义的扩展属性。

假设我们删除数据列表中的一条或者多条数据，一些Web项目中常常会使用哪些方式呢？

• 使用选项框 - >勾选 - >点击“删除”按钮（使用复选框删除）

  

• 每条数据后面有“删除”按钮 - >点击进行删除（直接使用按钮删除）

  

使用复选框删除（保存数据）

思路：要想使用“勾选”复选框方式删除数据，那么就要在点击删除按钮之后，将已经勾选的要删除的数据的id传递给后台执行sql进行删除

• 怎么在勾选复选框之后把id传递给后台？给复选框这个表单组件的value 属性赋属性值，类似这样:

  //js代码中的ajax部分
  //这里activityList的值是一个存放实体类型的集合，遍历集合里面的对象
  $.each(data.activityList, function (index, obj) {
    htmlString+="<tr class='active'>"
    
    // checkbox中value存放了市场活动的id属性
    htmlString+="<td><input type='checkbox' value='"+obj.id+"'/></td>"
    
    htmlString+="<td><a style=\"text-decoration: none; cursor: pointer;\" οnclick=\"window.location.href='workbench/activity/toActivityDetail?id="+obj.id+"'\">"+obj.name+"</a></td>"
    htmlString+="<td>"+obj.owner+"</td>"
    htmlString+="<td>"+obj.startDate+"</td>"
    htmlString+="<td>"+obj.endDate+"</td>"
    htmlString+="</tr>"
  }
  $("#tBody").html(htmlString); // 写入页面
  

• 那怎么把“已经勾选”的复选框的value 的属性值收集起来传递给后台呢？获取“已经勾选”的dom对象，把dom对象中的值取出来即可，类似这样：

  //选择标签id是tBody下的子标签input,并且input标签的类型是checkbox复选框，并且复选框还要被选中checked
  var ids = $("#tBody input[type='checkbox']:checked");
  //收集完参数通过ajax将数据传递给后台
  

• input 表单组件直接使用value 属性即可

直接使用按钮删除（定位元素和保存数据）

思路：每条数据对应一个按钮，点击对应的按钮对每条数据进行删除，那么这个按钮怎么处理？是做成超链接？还是给该按钮绑定触发事件？

一般情况下数据都是通过集合和数组遍历到网页上：

• 超链接：循环遍历数据时给每个a 标签（删除按钮）拼接一个链接地址（带上每条数据的id）–其实这是最简单的方式

  ​

• 绑定触发事件：不给a 标签链接地址，而是给该标签绑定触发事件，点击删除按钮之后交给js函数处理

  特殊情况：假如每条数据后面有“删除”按钮，由于是a 标签的id 属性值不能重复（标签之间的id属性值唯一），网页上存在不止一条数据，如果使用id属性定位每条数据，给每条数据附一个不一样的id值，那么js函数要绑定每条数据不切实际，因此需要使用自定义扩展属性，类似这样：（定位元素）

  <c:forEach items="${activityRemarkList}" var="remark">
    <%--name：自定义属性(允许重复)--%>
    <a class="myHref" name="deleteA">删除</a>
  </c:forEach>
  <%--每条数据都可以通过相同的name属性值来绑定触发事件--%>
  <script>
  $("#remarkDivList").on("click","a[name='deleteA']",function () {});
  </script>
  

  点击“删除”按钮触发事件，但是这里的按钮不能只触发事件，还有把按钮上对应的数据的id传递过去，但是非表单标签没有value 属性，因此需要扩展属性，类似这样：（保存数据）

  <c:forEach items="${activityRemarkList}" var="remark">
    <%--name：自定义属性(允许重复)--%>
    <%--remarkId：自定义属性，是该标签携带id值--%>
    <a class="myHref" name="deleteA" remarkId="${remark.id}">删除</a>
  </c:forEach>
  <%--每条数据都可以通过相同的name属性值来绑定触发事件--%>
  <script>
    $("#remarkDivList").on("click","a[name='deleteA']",function () {
      // 收集参数
      var id = $(this).attr("remarkId");
    });
  </script>
  

声明

以上只是自己在学习上的见解，如果存在错误还请评论区斧正！
​