基于虚拟dom重写eleTree树组件

插件使用webpack构建,整体思路如下:

  1. build文件夹下为webpack配置目录,包含开发环境和生产环境的配置,即开发环境需要启动本地测试,生产环境直接生成代码,所以入口也不相同,开发环境入口为src/dev/index.js,里面包含测试代码
  2. src/entry.js为插件入口,包含layui引入和设置全局遍历,通过es6的import引入可以在webpack的配置环境的output参数添加libraryTarget: 'umd'
  3. src/index.js为树组件的定义目录,定义了thisTree类,然后通过const eleTree = (opts) => methods.call(new thisTree(opts)),向外暴漏唯一的变量,这段代码同时包含方法的调用,通过call修改methods对象中的this对象为当前thisTree类的实例
  4. 在methods对象中调用不同的方法,再次修改方法中的this为当前thisTree类的实例,方法中的第一个参数为当前methods对象,这个是为了在该方法中返回当前methods对象,通过这个操作可以实现方法的链式调用,方法中的后续参数为调用时传入的参数,部分代码如下:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    // /src/index.js
    const eleTree = (opts) => methods.call(new thisTree(opts))
    // /src/methods/index.js
    export default function() {
    //函数内部第一个参数为当前methods方法,后续参数为传入的参数,函数内部返回methods方法即可实现链式调用
    let methods = {
    on: (...args)=>on.call(this, methods, ...args),
    // ...
    }
    return methods
    }
    // /src/methods/其它js
    export default function(methods, opts = {}) {
    // ...
    return methods
    }
  5. 自定义事件的处理,首先通过methods方法on,获取需要监听的方法,保存到实例的eventList数组里面,然后在需要触发方法的地方执行emit触发相应的方法即可,例如emit.call(thisTree, {v, type: 'checkbox', event})(/src/event/nodeClick.js),emit内部的this依然为当前thisTree类的实例,然后传入不同的参数,on方法中的回调函数便可以使用这些参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // /src/dev/index.js
    ele.on('checkbox', function(data) {
    console.log(this)
    console.log(data)
    })
    // /src/event/customEvent.js
    export function on(methods, type, callback) {
    // 事件保存
    this.eventList[type] = callback
    return methods
    }
    export function emit({v, type, event, otherOpt}) {
    // 事件触发
    if(this.eventList[type]){
    let data = getCurrentNodeData.call(this, v)
    this.eventList[type].call(event, Object.assign({}, otherOpt, {data, type}))
    }
    }
  6. 其他文件夹,mock生成后台数据,方便测试,opera包含树的各种方法操作目录,public为公共文件夹,vnode为虚拟dom目录

  7. 文档通过vuepress插件构建,代码在/docsBuild文件夹,/docs文件夹为文档生成目录

在线文档
github源码

0%