• 【代码健壮性】善用data-属性来关联,慎用parent()之类的查找结构


    1     $(".minus,target").unbind().click(function(){
    2             console.log(this);
    3             var $thisParent = $(this).parent().parent().parent().parent().prev();
    4             var nowNum = $thisParent.find('input').val();
    5             console.log(nowNum);
    6             $(".spinner",$thisParent).spinner("value",nowNum - 1);
    7             $(this).closest(".form-group").remove();
    8             $(".spinner-down").trigger("click");
    9         }); 
     1  $(".minus,target").unbind().click(function(){
     2           
     3             var currentRow = $(this).closest("[name=spinner_row]");
     4             var $spinner =  $("#" + currentRow.data("relatedSpinner"));
     5             var nowNum = $spinner.val();
     6             console.log(nowNum);
     7             $spinner.closest(".spinner").spinner("value",nowNum - 1);
     8             $(this).closest(".form-group").remove();
     9             $(".spinner-down").trigger("click");
    10         }); 

    上面第一段代码是第一次写的,用了jquery的父元素查找功能特别冗余繁琐并且非常不利于代码的可维护,第二段代码非常好的利用了HTML 5 data- attributes属性

    下面是api官网的介绍,介绍的很清楚,以前用的比较少...

    第二段代码就是把点击模块里面加上一个data-:

    var row = '<div class="form-group" name="spinner_row" data-related-spinner="' + $(this).attr('name') + '">'

    这个值与要触发的模块的id相同的数据模板值。这样就可以利用点击模块的这个值来调用要触发的模块而不需要根据dom结构来查找,防止html结构的变化导致js代码的失效。

     

  • 相关阅读:
    2d向量类 —— js版
    多边形碰撞demo —— 小车撞墙壁
    真累啊——近一年的工作心得
    重力感应相关api
    坐标旋转
    判断web app是否从主屏启动
    “简单就是力量”、“重构”和“架构设计”
    多边形碰撞算法
    《是男人就下一百层》游戏小demo
    优秀的接口的评价标准
  • 原文地址:https://www.cnblogs.com/lijie33402/p/4581478.html
Copyright © 2020-2023  润新知