简单分析 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。

更详细的内容待续...