基于虚拟dom重写eleTree树组件(强大)

相较于1.0版本,eleTree2.0移除了jquery和layui的依赖,采用snabbdom插件重写树组件;采用webpack的方式,代码结构分离更清晰,并支持直接引入,layui模块引入,和npm的方式引入;采用后渲染的方式,即初始渲染时,只渲染展开的树节点,上万条数据无压力渲染。功能方面移除了节点拖拽功能,使用节点复制粘贴替换,新增单选功能,新增图标自定义功能。

插件使用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
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值