基于layui的tree组件

因公司使用的是layui框架,而layui的树组件实现的功能太少,所以便想着自己实现一个,顺便练练手,期间因逻辑混乱代码重构过一次。

插件整体思路

  1. 对外仅暴漏出eleTree接口,eleTree有两个方法,on方法是layui封装的事件机制,render方法为初始化,调用render方法时,初始化树,生成实例对象
  2. thisTree为实例对象上对外的方法
  3. Class为真正的构造函数,主体结构如下:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    var eleTree={
    on: function(events, callback){
    return layui.onevent.call(this, MOD_NAME, events, callback);
    },
    render: function(options) {
    var inst = new Class(options);
    return thisTree.call(inst);
    }
    }

    var thisTree=function() {
    var _self=this;
    var options = _self.config;

    // 暴漏外面的方法
    return {
    append: function(key,data) {
    if(options.data.length===0) return;
    return _self.append.call(_self,key,data);
    },
    // ...
    }
    }

    var Class=function(options) {
    // ...
    };
    Class.prototype={
    constructor: Class,
    append: function(key,data) {
    // ...
    }
    // ...
    }

代码执行过程

  1. 当调用var el=eleTree.render({})的时候调用Class构造函数初始化树,执行thisTree.call(inst);,即执行thisTree函数,函数内部的this为inst实例对象,然后返回一个包含多个方法的对象
  2. 所以返回值el为包含多个方法的对象
  3. 当调用el.append()方法时,执行inst实例对象的append方法,即执行Class原型链上的append方法,append方法内部this还是inst实例对象

在线文档
在线示例
github源码

0%