相较于1.0版本,eleTree2.0移除了jquery和layui的依赖,采用snabbdom插件重写树组件;采用webpack的方式,代码结构分离更清晰,并支持直接引入,layui模块引入,和npm的方式引入;采用后渲染的方式,即初始渲染时,只渲染展开的树节点,上万条数据无压力渲染。功能方面移除了节点拖拽功能,使用节点复制粘贴替换,新增单选功能,新增图标自定义功能。
插件使用webpack构建,整体思路如下:
- build文件夹下为webpack配置目录,包含开发环境和生产环境的配置,即开发环境需要启动本地测试,生产环境直接生成代码,所以入口也不相同,开发环境入口为src/dev/index.js,里面包含测试代码
- src/entry.js为插件入口,包含layui引入和设置全局遍历,通过es6的import引入可以在webpack的配置环境的output参数添加
libraryTarget: 'umd'
- src/index.js为树组件的定义目录,定义了thisTree类,然后通过
const eleTree = (opts) => methods.call(new thisTree(opts))
,向外暴漏唯一的变量,这段代码同时包含方法的调用,通过call修改methods对象中的this对象为当前thisTree类的实例 -
在methods对象中调用不同的方法,再次修改方法中的this为当前thisTree类的实例,方法中的第一个参数为当前methods对象,这个是为了在该方法中返回当前methods