Ztree的设计结构与扩展

Ztree是一个比较优秀的树形展示组件,对于这个组件核心代码只有2000行不到,但是其功能却十分的强大,而且这个组件支持插件方式的扩展支持也是很不错的,
这可以让程序员围绕树的结构开发出更多的功能,比如check,edit两个功能就是以插件的方式提供,Ztree组件的代码整体结构有自身的一些特点,了解这些特征可以
使我们更好的使用这个组件.
在代码的内部主要分为以下几个部分:
1.常量定义对象(_consts);
2.组件配置对象(_setting);
3.生命周期回调方法(_initRoot,_initCache,_bindEvent...共11个分类);
4.代码主体对象(_z),这个对象按类别分为(_data,_event,_handler,_tools,_view)五个类别;
A._data,主要是数据节点的增,删,改,查,以及生命周期对象的管理;
B._event,主要是事件的绑定与代理,涉及生命周期方法_bindEvent,_unbindEvent;
C._handler,相关事件的处理器,主要与周期方法_eventProxy有关系,主要由event.bindTree,event.unbindTree调用;
D._tools,主要是一些工具方法;
E._view,视图相关的操作,涉及到几个生命周期_initNode,_beforeA,_innerBeforeA,_innerAfterA,_afterA
5.定义组件对象$.fn.zTree或是扩展$.fn.zTree

关于组件的事件设计相对比较复杂,主要分为两个体系:事件与回调,两者有相似之处但是并不相同,回调的入口主要是由event.bindTree
发起发起完成,本身实现采用的是jquery的监听实现,这个过程相对比较复杂event.bindTree使用event.proxy接管所有默认事件处理,
默认事件主要包括(selectstart,click,dblclick,mouseover,mouseout,mousedown,mouseup,contextmenu),事件处理过程如下:
event.proxy->event.doProxy->_eventProxy->handler(一系列内部处理器)->callback(一系列外部回调)

可以看到整个过程比较曲折其中_eventProxy是一个比较关键的代理处理器它会将标准事件通过target分析更加细化事件,并调用相应的
内部处理器(handler),在内部处理器中进一步细化回调callback,其实callback与handler性质是一样的,他们最大区别是在回调参数
callback回调参数更具有业务性,更像接口层,handler的回调参数更具备抽象性适合统一抽象.还有一部分回调是通过直接的事件绑定实现
而不是通过代理模式来完成回调,整体来说回调接口过程环节控制更加细腻,事件触发更加粗糙一些.

通过代理方式完成的回调接口主要有:
beforeCollapse,beforeExpand,beforeClick,beforeMouseDown,onMouseDown,beforeMouseUp,onMouseUp,
beforeDblClic
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值