前言

今天分析的是layui框架內置模塊tree.js，該模塊的功能是構建樹形菜單，具體的形式(layui官網該模塊的具體形式)如下：

自實現樹形菜單

使用html+css+js實現了樹形菜單，具體的實現思路如下：

• html中定義包含樹形菜單的容器節點
• 規劃好樹形菜單的樣式以及圖標
• 使用js構建html結構以及綁定事件，實現樹形菜單的點擊折疊

實現效果圖如下：

核心的實現是構建html結構，組織樹狀結構的數據，使用遞歸構建樹，在本次實現中html的組織有兩種形式，具體如下所述：
- 子菜單和父菜單邏輯上形成父子關系，結構上是分離的
- 子菜單和父菜單邏輯以及機構上都是父子關系

在剛一開始，我實際上是實現的第一種形式的，該形式的html結構體現如下：

<ul>
    <li>菜單1</li>
    <ul>
        <li>子菜單1</li>
        <li>子菜單2</li>
    </ul>
</ul>

后來又補充了下一種形式的（這種更常見），該形式的html結構體現如下：

<ul>
    <li>
        <span>菜單1</span>
        <ul>
            <li>子菜單1</li>
            <li>子菜單2</li>
        </ul>
    </li>
</ul>

遞歸形成樹形菜單結構的代碼如下（第二種形式）：

tool.menuView = function(parentNode, menu) {
    if (!parentNode || parentNode.nodeType !== 1 ||   !Array.isArray(menu)) return;
        for (let i = 0; i < menu.length; i++) {
            let option = menu[i], name = option.name,
                children = option.children, 
                liNode = tool.createElement('li');
            tool.append(parentNode, liNode);
            if (children && children.length > 0) {
                 let ulNode = tool.createElement('ul');
                 tool.menuView(ulNode, children);
                 let [iNode, spanNode] = tool.createElement(['i', 'span'])
                 spanNode.innerText = name;
                 iNode.className = 'fa fa-play';
                 tool.append([liNode, parentNode, liNode], [[iNode, spanNode], [liNode], [ulNode]]);
             } else {
                 liNode.innerText = name;
             }
          }
   };

需要傳入的數據形式如下：

data = [
    {
        name: '菜單1',
        children: [
            {
                name: '子菜單1'
            },
            {
                name: '子菜單2
            }
        ]
    }
];

構建樹形結構是關鍵的一步，之后就是對交互的處理，該模塊的具體代碼組織如下圖：

本次實現較大的缺點：

• 可擴展性不強，對于樹形菜單的css樣式沒有考慮作為模塊來調用的形式，傳入的容器id寫死了(css樣式)

下面來分析下layui內置的tree.js模塊的具體實現以及模塊代碼組織結構，tree.js的代碼組織如下圖所示：

基本的使用形式是：layui.tree(options)，簡潔易用。該內置模塊內容使用JQuery，對于樹形結構的形成同樣是采用遞歸形式生成，不過該內置模塊還提供皮膚模式的選擇等，對于擴展性等方面非常不錯。

該內置模塊的源碼詳細注釋以及自實現demo一如既往會上傳到我的Github上，每天都要接觸新的知識點，將知識變為自己的永遠是最好的。