简述如何制作 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 中将发布的几个新的扩展库....