簡述如何制作 zTree v3.x 系列的擴展 js 庫

  zTree v3.x 版本修改了結構，將原先混在一起的代碼進行了拆分，調整了內部結構。目前的結構可以比較方便靈活的用插件形式覆蓋核心代碼或開發自己的新功能，而又不用去特意修改核心代碼，也便于以后的 zTree 代碼升級。

    因為這兩天準備要開始進行 zTree v3.3 中擴展功能的開發，故趁機簡單介紹一下如何制作 zTree v3.x 的擴展 js 庫。

    為了便于瀏覽，我利用 jquery.ztree.excheck-3.2.js 的代碼結構來講解。

一、擴展庫代碼最外層結構

//利用匿名函數 將作用域保護起來
//注意：一定要先加載 jQuery 以及 zTree 的js，最后加載 擴展庫。 如果放在一個文件中，也要將 擴展庫的代碼放在最后
(function($){
   // 在這里面進行全部的操作
   .....
})(jQuery);

二、擴展庫內部結構

    下面的結構可以直接對照 excheck 和 exedit 兩個js 來比較，就可以快速了解代碼結構，從而開發出自己需要的擴展庫了。 另外，對于不需要的功能，完全可以進行相應的刪除，避免多余代碼。

(function($){

    //default consts of exLib
    //這里保存 zTree 內部需要的常量
    var _consts = {},

    //default setting of exLib
    //這里保存 zTree 需要的配置信息（完全可以利用這個為自己的項目制作 zTree 的公共默認配置，減少頁面代碼）
    _setting = {},

    //default root of exLib
    //設置 zTree 內部基本屬性(初始化時執行）
    _initRoot = function (setting) {},

    //default cache of exLib
    //設置 zTree 內部的緩存初始化(初始化時執行）
    _initCache = function(treeId) {},

    //default bind event of exLib
    //設置 zTree 內部事件回調函數(初始化時執行）  例如：onCheck等
    _bindEvent = function(setting) {},

    //default event proxy of exLib
    //設置 zTree 事件代理中的處理邏輯，根據不同事件跳轉到不同的 handler 處理 ( *** 參考 excheck 代碼，如果使用必須 return proxyResult  *** ) 
    _eventProxy = function(e) { ... return proxyResult;},

    //default init node of exLib
    //設置 節點數據初始化的處理(加載節點時執行)
    _initNode = function(setting, level, n, parentNode, isFirstNode, isLastNode, openFlag) {},

    //add dom for check
    //專門用于在節點<a>之前生成 DOM 使用，主要用于 checkbox & radio
    _beforeA = function(setting, node, html) {},

    //update zTreeObj, add method of exLib
    //設置 zTreeObj 的各種對外方法，可以制作新的接口也可以覆蓋已有接口
    _zTreeTools = function(setting, zTreeTools) {
//      zTreeTools.xxx1 = function() {}
//      zTreeTools.xxx2 = function() {}
    },

    //method of operate data
    //定義 zTree 節點數據操作的方法
    _data = {},

    //method of event proxy
    //定義 zTree 各種事件綁定 & Proxy 的方法
    _event = {},

    //method of event handler
    //定義 zTree 事件處理的方法
    _handler = {},

    //method of tools for zTree
    //定義 zTree 內部的工具方法
    _tools = {},

    //method of operate ztree dom
    //定義 zTree 視圖相關的方法
    _view = {},

    //將本擴展庫內的方法、屬性注入到 core 中
    _z = {
        tools: _tools,
        view: _view,
        event: _event,
        data: _data
    };
    $.extend(true, $.fn.zTree.consts, _consts);
    $.extend(true, $.fn.zTree._z, _z);

    //獲取幾個主要的全局對象
    var zt = $.fn.zTree,
    tools = zt._z.tools,
    consts = zt.consts,
    view = zt._z.view,
    data = zt._z.data,
    event = zt._z.event;

    //針對 zTree 初始化進行注入新內容

    //合并 配置 setting
    data.exSetting(_setting);

    //添加 綁定事件處理
    data.addInitBind(_bindEvent);
    //添加 初始化 Cache 方法
    data.addInitCache(_initCache);
    //添加 初始化 節點數據 方法
    data.addInitNode(_initNode);
    //添加 初始化 事件代理 方法
    data.addInitProxy(_eventProxy);
    //添加 初始化 zTree 內部基本屬性 方法
    data.addInitRoot(_initRoot);
    //添加 初始化節點 <A> 之前的DOM 方法
    data.addBeforeA(_beforeA);
    //添加 zTreeObj 對象的對外接口
    data.addZTreeTools(_zTreeTools);

    //對原始內部方法進行功能擴展，但不完全覆蓋
//  Override method in core

    //這段代碼是從 excheck 中直接提取出來的，供參考
//  var _createNodes = view.createNodes;
//  view.createNodes = function(setting, level, nodes, parentNode) {
//      if (_createNodes) _createNodes.apply(view, arguments);
//      if (!nodes) return;
//      view.repairParentChkClassWithSelf(setting, parentNode);
//  }

})(jQuery);

補充，敬請恭候 v3.3 中將發布的幾個新的擴展庫....