关于前端导航的开发设计

0x01 场景

---

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

0x02 coding

---

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

代码片段

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

<!--Menu list item-->
<li class="navdao sub-a">
    <a href="<?=site_url().'/main'?>">
        <i class="demo-psi-home"></i>
        <span class="menu-title">
            <strong>Dashboard</strong>
        </span>
    </a>
</li>
<li class="navdao sub-b">
    <a href="<?=site_url().'/main/vuls'?>">
        <i class="fa fa-user-secret"></i>
        <span class="menu-title">
            <strong>漏洞管理</strong>
        </span>
    </a>
</li>   
<!--Menu list item-->
<li class="navdao active">
    <a href="#">
        <i class="fa fa-eye"></i>
        <span class="menu-title">
            <strong>扫描/测试</strong>
        </span>
        <i class="arrow"></i>
    </a>

    <!--Submenu-->
    <ul class="collapse">
        <li class="active-link"><a href="<?=site_url().'/main/proactive_scan'?>">主动式安全扫描</a></li>
        <li><a href="<?=site_url().'/main/passive_scan'?>">被动式安全扫描</a></li>
        <li><a href="<?=site_url().'/main/baseline_scan'?>">基线安全扫描</a></li>
        <li><a href="<?=site_url().'/main/penetration_test'?>">人工渗透测试</a></li>
    </ul>
</li>

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

    $('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健壮性强一点，层级变化功能不受影响。