JS第四天：

来源：互联网发布：沙漠靴品牌知乎编辑：程序博客网时间：2024/05/16 09:36

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(".");
        //定义一个空的字符串tempNs
        var 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);
                        });
                    }
                }
            }
        }
    };
})($);

理解难度略大~

0 0