简单分析ztree源码
为了把 SVG标注代码抽成⼀个库，我要学习⼀下是怎么写的。
开始正⽂。
这只是⼀个很简单的版本，以后可能会详细分析...
(function ($) {
var settings = {},
roots = {},
caches = {},
_consts = { /*...*/ },
_setting = { /*...*/ },
_initRoot = function (setting) { /*...*/ },
_initCache = function (setting) { /*...*/ },
_bindEvent = function (setting) { /*...*/ },
_unbindEvent = function (setting) { /*...*/ },
_eventProxy = function (setting) { /*...*/ },
_initNode = function (setting, level, n, parentNode, isFirstNode, isLastNode, openFlag) { /*...*/ },
_init = { /*...*/ },
jquery源码在线data = { /*...*/ },
event = { /*...*/ },
handler = { /*...*/ },
tools = { /*...*/ },
view = { /*...*/ };
$.fn.zTree = {
consts: _consts,
_z: { /*...*/ },
getZTreeObj: function (treeId) { /*...*/ },
destroy: function (treeId) { /*...*/ },
init: function (obj, zSetting, zNodes) { /*...*/ }
};
var zt = $.fn.zTree,
$$ = tools.$,
consts = zt.consts;
})(jQuery);
整个 ztree 是个⾃执⾏函数。
因为 ztree 是基于 jQuery 的，所以挂在 jQuery 对象下。⾃⼰写库的时候，不需要jQuery的话⼀般挂在window对象下。
所有带 _ 的变量都是内部变量。使⽤者不能调⽤，或者说不应该调⽤。
$.fn.zTree 之前，不带 _ 的变量，是使⽤者不直接使⽤，但是会与使⽤者传⼊的数据（设置）对接的变量。
与使⽤者直接接触的是 $.fn.zTree中的变量。
再来看⼀下 $.fn.zTree.init。
init: function (obj, zSetting, zNodes) {
/* ... */
var zTreeTools = { /* ... */ }
/ *...* /
return zTreeTools
}
使⽤者把配置对象zSetting数据对象zNodes传⼊，得到操作台对象zTreeTools。
此后对这个 ztree实例的操作都是⽤这个对象做的。
这也是使⽤者需要⼀个变量去接收 init ⽅法返回的对象的原因。使⽤者接收到的就是zTreeTools。
更详细的内容待续...

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。