关于前端导航的开发设计

0x01 场景

---

当前需要在某个后台里面进行动态的导航绑定，比如刷新页面后二层父节点可以自动选中，并且正常的显示。这个需求主要来自于，我准备设定的一些导航栏的功能，不太想放到php中构建，so，在前端做相应的处理。

0x02 coding

---

这里有两种写法，分享下代码片段截图如下：

代码片段

先说说这里面用的东西，当前主要的结构是这样的：

    
        
        
            Dashboard
        
    


    
        
        
            漏洞管理
        
    
   


    
        
        
            扫描/测试
        
        
    

    
    

        
主动式安全扫描
        
被动式安全扫描
        
基线安全扫描
        
人工渗透测试
    

在处理的时候，需要注意选中后的效果添加，以及历史记录的清除。
代码片段如下：

    $('li.navdao').removeClass('active');
    // 清除子集所有的状态
    $('li.navdao').find('ul').find('li').removeClass('active-link');

    var list = $('li.navdao').find('ul').find('li');

    if (path == '/index.php/main'){
        $('li.navdao.sub-a').addClass('active-link');
    }else if(path == '/index.php/main/vuls'){
        $('li.navdao.sub-b').addClass('active-link');
    }

0x03 性能问题

---

在这里学到个东西，closest取决于遍历了多少父亲节点找到目标，而且还有个匹配过程，是会慢一点，parent只是单纯的取父亲会快点。clsest健壮性强一点，层级变化功能不受影响。