1.创建命名空间的过程,以及如何将字符串转化成json格式对象代码:
/***这是一个jquery插件,目的是为了让传进去的字符串用.的形式分割后变成json的格式对象,分别形成对象的格式如下*window.cn*window.cn.itcast*window.cn.itcast.sh04*window.cn.itcast.sh04.MenuitemTree*以上的json格式对象就成为了所谓的命名空间.*/
(function($){$.nameSpace = function(namespace){//传进来的参数namespace是一个字符串,先将此字符串用.分割var ss = namespace.split(".");//定义一个空的字符串tempNsvar tempNs = [];//循环ss,将每次得到的ss的值放入tempNs的末尾for (var i = 0; i < ss.length; i++) {tempNs.push(ss[i]);//将每次放入tempNs的值之间加入"."var n = tempNs.join(".");if (typeof window[n] != "object") {//这里是关键,window.cn={}的意思是在window对象动态添加一个属性cn,这里用到了eval函数,为了把里面 //的内容解析成js.eval("window." + n + "={}");}}};})($);
下面用命名空间的方式修改插件
服务端(插件端):
/*** 写一个方法:dataTree* 功能:创建树*/(function($){/*** 因为命名空间是json格式的对象,所以将来要用继承的方法赋值给具体的树,所以在这里必须是json格式* @param {Object} config*/$.DataTree = {createTree: function(config){//var treeObj = this;//把this赋值给当前变量var param = {};//如果config为undefine,则选择后者,如果config有值,则选择前者config = config||{};/*** 把config的内容赋值到setting中* 如果没有,直接赋值,如果有,则覆盖*/$.extend(true, param, $.DataTree.defaultConfig, config);$.post(config.url, config.data, function(data){$("#"+config.id).zTree(param.setting, data);});}};/*** 该插件的默认的配置*/$.DataTree.defaultConfig = {setting: {isSimpleData: true,treeNodeKey: "id",treeNodeParentKey: "pid",showLine: true,root: {isRoot: true,nodes: []}}};})($);
客户端(调用端)
$().ready(function(){$.nameSpace("cn.itcast.sh04.MenuitemTree");/*** 把$.DataTree中的功能赋值给cn.itcast.sh04.MenuitemTree*/$.extend(cn.itcast.sh04.MenuitemTree, $.DataTree);cn.itcast.sh04.MenuitemTree.createTree({id:'tree',url: 'menuitemAction_showMenuitems.action',data: null,setting: {treeNodeKey: 'mid'}});
下面一种方式是仿照EXT中的写法,服务端中增加一个自定义的插件完成继承功能(extend),而客户端不再写
$.extend(cn.itcast.sh04.MenuitemTree, $.DataTree);直接用自定义的插件写,下面先贴出自定义extend方法的插件:
/*** $.shExtend($.DataTree,config);* @param {Object} jsonObj* 是基本的组件的对象* @param {Object} config* 用户传递过来的配置*/(function($){$.shExtend = function(jsonObj,config){jsonObj.createTree(config);return jsonObj;};})($);
这个插件的作用是通过这个插件直接完成
$.extend(cn.itcast.sh04.MenuitemTree
这行代码的作用,下面贴出客户端的完整代码:
$().ready(function(){$.nameSpace("cn.itcast.sh04.MenuitemTree");/*** 把$.DataTree中的功能赋值给cn.itcast.sh04.MenuitemTree*/cn.itcast.sh04.MenuitemTree = $.shExtend($.DataTree,{id:'tree',url:'menuitemAction_showMenuitems.action',data:null,setting:{treeNodeKey:'mid'}});cn.itcast.sh04.MenuitemTree.createTree();});
下面写一个树的组建,用两种方式来创建树,一种是直接加载树,一种是点击触发事件加载节点:
/*** 写一个树的组件* 1、组件中应该识别:是全部加载树还是点击事件加载树* 2、组件中的方法:* 1、全部加载树* 2、点击事件加载树* 3、expand事件由客户端直接传递到插件中* 4、对post请求做封装* $.post(url,data,function(data){** })* 其中url,data可以传递过来,第三个参数用callback解决*/(function($){$.TreePanel = {/*定义这个变量是是因为在ztree的说明文档中,有说明:在指定节点下增加子节点。* 请通过 zTree 核心函数 zTree(setting, [zTreeNodes]) 运行后,返回的 zTreePlugin 对象执行此方法.* 预先定义zTreePlugin是因为之后要用到。*/zTreePlugin: '',//下面的代码就和之前的一样了param: {},createTree: function(config){/*** 先对配置文件进行赋值*/config = config ||{};$.extend(true, $.TreePanel.param, $.TreePanel.defaults, config);if ($.TreePanel.param.loadAllTree) {//一次性加载树$.TreePanel.method.loadTree();}else {//点击事件加载树$.TreePanel.method.loadSubNodes();}},/*** 默认的配置*/defaults: {loadAllTree: false,setting: {isSimpleData: true,treeNodeKey: "id",treeNodeParentKey: "pid",showLine: true,root: {isRoot: true,nodes: []},callback:{/*** 由+变成-号执行的是这块的代码* @param {Object} event* @param {Object} treeId* @param {Object} treeNode*/expand:function(event, treeId, treeNode){/*** 因为加载的是子节点,所以isRoot为false* pid的值也要做相应的改变*/$.TreePanel.param.isRoot = false;$.TreePanel.param.data.pid = treeNode.mid;$.TreePanel.method.loadSubNodes(treeNode);}}}},/*** 组件的方法*///将方法提取出来便于阅读method: {/** 一次性加载树*/loadTree: function(){$.post($.TreePanel.param.url, $.TreePanel.param.data, function(data){/*** 一次性加载树*/$("#" + $.TreePanel.param.id).zTree($.TreePanel.param.setting, data);});},/*** 点击事件加载树*/loadSubNodes: function(treeNode){if ($.TreePanel.param.isRoot) {//加载的是根节点$.post($.TreePanel.param.url, $.TreePanel.param.data, function(data){$.TreePanel.zTreePlugin = $("#" + $.TreePanel.param.id).zTree($.TreePanel.param.setting, data);});}else {//加载的是子节点if (!$.TreePanel.zTreePlugin.getNodeByParam("pid", treeNode.mid)) {$.post($.TreePanel.param.url, $.TreePanel.param.data, function(data){/*** 第一个参数为父节点* 第二个参数为子节点*/$.TreePanel.zTreePlugin.addNodes(treeNode, data, true);});}}}}};})($);
理解难度略大~