简单分析 ztree 源码

为了把 SVG标注 代码抽成一个库，我要学习一下 ztree 是怎么写的。

开始正文。

这只是一个很简单的版本，以后可能会详细分析...

(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 = { /*...*/ },
    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。

 

更详细的内容待续...