jQuery 插件開發——Menu（導航菜單）

　　故事背景：由於最近太忙了，已經很久沒有寫jquery插件開發系列了。但是憑着自己對這方面的愛好，我還是抽了一些時間來過一下插件癮的。今天的主題是導航菜單，這個我相信不管做B/S還是做C/S都非常熟悉一個功能模塊。其實大家有沒有發現，我們開發插件的目的是為了重用，既然是需要重用的肯定也是開發中常用的，所以說白了，我們開發插件的需求來自開發中常用的功能。只要你想，你仔細分析，相信絕大部分常用功能都可以分裝出來做插件的。額。。。有種秀智商的趕腳啊，呵呵，不好意思，想到哪里就說道哪里了。相信大家還是能清楚啥時需要開發插件的。本篇文章其實需求來源是來源於我現在做的一個項目，但是后期我又做了優化，和原有需求不同。當然，我改的這個版本的樣式就沒有那么炫了。但是代碼肯定優化了。

　　還是我一直提到的，你開發插件，你肯定要清楚該插件是做啥的，啥時用。也就是需求分析要做好。相信有人會說又裝13了，其實這不是裝，因為menu是大家所熟知的，但是我也相信就算大家熟知的事情你也不一定就了解它的所有功能。開發的插件是根據業務來的，不同的業務需求對導航菜單的要求也不同。不管是樣式還是功能。例如面包削，這個就是菜單的“附贈”品，很多網站需要有，但是也有很多網站不需要。所以，請大家也不要裝，除非你真的是大牛，可以目空一切。但是一般大牛都好像很謙虛的，很深奧的樣子，至少我看到的都不錯，^_^　

　　對了，其實有一句好我很想說的就是，如果你喜歡或者有意向開發jquery插件的，請你熟悉一下div+css頁面布局，如果你這方面不熟悉，其實是苦惱的。相信開發過的人都知道。很多人會說我們公司有前端專門做樣式的，但是我想說的是，多學點沒什么壞處。這樣方便你開發，能提高自己寫的代碼質量。

　　好了，感覺一扯就像吃了炫邁似的，根本停不下來，其實也就是說開發需要扯。。。^_^。。。我是想看文章的人也很累，讓大家輕松一點。

　　故事主題：jquery插件開發——Menu，導航菜單開發。

　　正常的menu功能：1、實現菜單的切換　　2、實現切換內容的加載　　3、控制菜單的收縮　　4、控制樣式變更

　　附加功能：面包削導航

　　本次開發用了大量的遞歸思想，其實好的遞歸可以為你節省很多很多代碼，但是說實話，復雜的遞歸在錯誤排查上還是很繁瑣的。所以我們要量力而行，當然還是希望大家能熟練運用遞歸，畢竟你將來是要成為牛X的猿，所以你就必須會各種算法。

　　當然本次和上次開發的插件想必又添加了委托思想 和 事件句柄。當然這個我也得感謝我的一個同事，是在他的提醒下，我添加的，這樣寫的確實現了元素和事件間的解耦。當然這個也是模仿面向對象思想中的開發了。

　　其實當你真正去多次開發插件時候，你就會發現，其實開發插件就分三步走。

　　第一步：定義插件和參數　　var menu = function () {this.defaultParams = {};};

　　第二步：定義插件屬性、方法　　  menu.prototype = {constructor: menu,init:function (params){}};

　　第三步：對外分裝　　$.menu = new menu();　　

　　其實就是這三步，然后寫好每一步實現就好了。很簡單吧。^_^我感覺這三步就像一個系統的架構一樣，大的方向定下來，下面就是向框架中填充東西，實現功能即可。當然，開發中你要把公共部分先剝離出來，下面具體講解開發的代碼。分為以下幾個部分。

　　第一部分：這部分是公共部分，比上一次寫的多了delegate，這個下面注冊事件的時候會用到，理解就像面向對象語言中理解一樣。如果對委托不是很清楚的可以百度看看，相信這種思想已經為大部分人所知了。

　　代碼如下：

$(function () {
    // 說明：創建委托函數
    //      context：函數上下文
    //      params：參數【必須是數組形式】,可以為空
    Function.prototype.delegate = function (context, params) {
        var func = this;
        return function () {
            if (params == null) {
                return func.apply(context);
            }
            return func.apply(context, params);
        };
    };
    var menuCommon = {
        coverObject: function (obj1, obj2) {
            var o = this.cloneObject(obj1, false);
            var name;
            for (name in obj2) {
                if (obj2.hasOwnProperty(name)) {
                    o[name] = obj2[name];
                }
            }
            return o;
        },
        cloneObject: function (obj, deep) {
            if (obj === null) {
                return null;
            }
            var con = new obj.constructor();
            var name;
            for (name in obj) {
                if (!deep) {
                    con[name] = obj[name];
                } else {
                    if (typeof (obj[name]) == "object") {
                        con[name] = $.cloneObject(obj[name], deep);
                    } else {
                        con[name] = obj[name];
                    }
                }
            }
            return con;
        },
        // 說明：實現委托
        delegate: function (func, context, params) {
            if ($.isFunction(func)) {
                return func.delegate(context, params);
            } else {
                return $.noop;
            }
        },
        getParam: function (param) {
            if (typeof (param) == "undefined") {
                return "";
            } else {
                return param;
            }
        }
    };
});

 　　 第二部分：定義導航默認參數，其中的data參數的格式我已經給出。

var menu = function () {
        //參數定義
        this.defaultParams = {
            id: "",     //導航容器ID
            data: "",   //數據  包含title、depth、recordId、parentId、children
            //格式：[
            //       {title: "第一級——1",
            //        depth:1,
            //        recordId:1,
            //        parentId:0,
            //        children:[
            //                  {title: "第二級",
            //                   depth:2,
            //                   recordId:3,
            //                   parentId:1,
            //                   children:[]
            //                  }]
            //       },
            //       {title: "第一級——2",
            //        depth:1,
            //        recordId:2,
            //        parentId:0,
            //        children:[
            //                  {title: "第二級",
            //                   depth:2,
            //                   recordId:4,
            //                   parentId:2,
            //                   children:[]
            //                  }]
            //       }]
            boolBreadCut: true,    //是否要面包削
            breadCutId: "",         //面包削ID
            navClickCallback: $.noop     //導航點擊回調事件
        };
        this.options = {};
 };

  　　第三部分：定義屬性、方法，並代碼實現。這部分很重要，封裝了各種方法，包括我說的事件句柄、遞歸等思想都在這里體現。代碼中有注釋。其中createMenu、getNodeById  getBreadCutNameList這個三個方法是用遞歸實現的。

menu.prototype = {
        constructor: menu,
        init: function (params) {
            this.options = $.coverObject(this.defaultParams, params);
            this._init();
        },
        _init: function () {
            this._initMenu();
        },
        _initMenu: function () {
            if (this.options.data == null) {
                return;
            }
            if (this.options.data.length < 1) {
                return;
            }
            var htmlStr = this.createMenu(this.options.data, this.options.id, "");
            $("#" + this.options.id).html(htmlStr);
            //注冊導航事件
            this._registeNavClick();
        },

        //生成菜單的Html元素
        createMenu: function (data, id, htmlStr) {
            $.each(data, function (i, item) {
                var depth = item.depth;
                var recordId = item.recordId;
                var parentId = item.parentId;
                var marginLeft = parseInt(item.depth) * 20;

                htmlStr += "<div class='zwsMenu' depth='" + depth + "'>";

                if (depth === 1) {
                    htmlStr += "<div id='" + recordId + "' isShow='true' depth='" + depth + "' parentId='" + parentId + "' class='menu_depth_1' >";
                    htmlStr += "    <div class='menu_depth_1_icon' attrIcon='firstLevel' style ='margin-left:" + marginLeft + "px;'></div>";//第一級小圖標
                    htmlStr += "    <div class ='meun_title' >" + item.title + "</div>";//標題
                    htmlStr += "</div>";
                } else {
                    htmlStr += "<div id='" + recordId + "' isShow='true' depth='" + depth + "' parentId='" + parentId + "' class='menu_depth_other' >";
                    htmlStr += "    <div class='menu_depth_other_icon' attrIcon='otherLevel' style ='margin-left:" + marginLeft + "px;'></div>";//其他級小圖標
                    htmlStr += "    <div class ='meun_title' >" + item.title + "</div>";//標題
                    htmlStr += "</div>";
                }

                if (item.children != null && item.children.length > 0) {
                    htmlStr += "<div class='meun_navArea' depth='" + item.children[0].depth + "' parentId='" + recordId + "' isShow='false' navArea=''>";

                    htmlStr = menu.prototype.createMenu(item.children, id, htmlStr);

                    htmlStr += "</div>";
                }

                htmlStr += "</div>";
            });

            return htmlStr;
        },

        /*****************（注冊事件 begin）*****************/

        //說明：
        //      注冊導航事件
        _registeNavClick: function () {
            var options = this.options;

            $("div[depth][isShow='true']").each(function (i, item) {
                var itemClick = $.delegate(menu.prototype._handleNavClick, this, [{ item: item }]);//樣式改變
                var itemClickCallBack = $.delegate(options.navClickCallback, this);//回調事件
                var itemShowBreadCut = $.delegate(menu.prototype.createBreadCut, this, [{ item: item, options: options }]);//面包削

                $(item).click(itemClick);
                $(item).click(itemClickCallBack);
                $(item).click(itemShowBreadCut);

            });
        },

        //說明：
        //      注冊面包削事件
        _registeBreadCutClick: function () {
            $(".meun_breadCut_name").each(function (i, item) {
                var breadCutId = $(this).attr("id");
                var itemClick = $.delegate(menu.prototype._handleBreadCutClick, this, [{ breadCutId: breadCutId }]);//樣式改變
                $(item).click(itemClick);
            });
        },

        /*****************（注冊事件 end）*****************/

        /*****************（事件句柄 begin）*****************/

        //說明：
        //      導航事件句柄
        //      params：導航每行元素
        _handleNavClick: function (params) {
            var id = params.item.id;

            var isShow = $("div[navArea][parentId='" + id + "']").attr("isShow");
            var depth = parseInt($("#" + id).attr("depth"));
            var parentId = parseInt($("#" + id).attr("parentId"));

            //當前深度級的導航
            var currDepthLevel = $("div[parentId='" + parentId + "'][depth='" + depth + "']");

            //獲取下級導航區域
            var navHide = currDepthLevel.next("div[depth='" + (depth + 1) + "'][navArea]");
            navHide.attr("isShow", "false").css("display", "none");

            //將所有導航都置成 未選中狀態
            var navHideIconOtherLevel = $("div[attrIcon='otherLevel']");
            var meunTitle = $("div.meun_title");
            navHideIconOtherLevel.removeClass("menu_depth_other_icon_selected").addClass("menu_depth_other_icon");
            meunTitle.removeClass("meun_title_color");

            //當點擊第一級導航時候
            if (depth === 1) {
                var navHideIconFirstLevel = $("div[attrIcon='firstLevel']");
                navHideIconFirstLevel.removeClass("menu_depth_1_icon_selected").addClass("menu_depth_1_icon");
            }

            //獲取第一級導航和其他級導航中圖標
            var iconFirst = $("#" + id).find("div[attrIcon='firstLevel']");
            var iconOther = $("#" + id).find("div[attrIcon='otherLevel']");
            var currTitle = $("#" + id).find("div.meun_title");

            //控制當前點擊的導航的下級導航是否顯示
            var navCurr = $("div[parentId='" + id + "']");
            if (isShow == "true") {
                navCurr.attr("isShow", "false").css("display", "none");

                currTitle.removeClass("meun_title_color");
                iconFirst.removeClass("menu_depth_1_icon_selected").addClass("menu_depth_1_icon");
                iconOther.removeClass("menu_depth_other_icon_selected").addClass("menu_depth_other_icon");
            }
            else {
                navCurr.attr("isShow", "true").css("display", "block");

                currTitle.addClass("meun_title_color");
                iconFirst.removeClass("menu_depth_1_icon").addClass("menu_depth_1_icon_selected");
                iconOther.removeClass("menu_depth_other_icon").addClass("menu_depth_other_icon_selected");
            }
        },

        //說明：
        //      面包削事件句柄
        _handleBreadCutClick: function (params) {
            var breadCutId = params.breadCutId;
            var navId = breadCutId.substr(9, breadCutId.length - 9);
            $("#" + navId).click();
        },

        /*****************（事件句柄 end）*****************/

        //說明：
        //     驗證面包削
        validateBreadCut: function (options) {
            if (!options.boolBreadCut) {
                return false;
            }
            var breadCutObj = $("#" + options.breadCutId);  //面包削區域
            if (options.breadCutId == "" || breadCutObj.length < 1) {
                return false;
            }
            return true;
        },

        //說明：
        //      創建面包削
        createBreadCut: function (params) {
            var item = params.item;
            var itemId = item.id;
            var options = params.options;
            var optionData = options.data;

            if (!menu.prototype.validateBreadCut(options)) {
                return;
            }

            var depth = parseInt($("#" + itemId).attr("depth"));
            var separator = "<div class='meun_breadCut_separator'> &gt; </div>";//分隔符
            var breadCutHtml = "";
            breadCutHtml += "<div class='meun_breadCut'>";

            var itemNode = menu.prototype.getNodeById(itemId, optionData);

            var breadCutNodeList = menu.prototype.getBreadCutNodeList(itemNode, optionData, []);

            for (var i = 1; i <= depth; i++) {
                breadCutHtml += "<div id='breadCut_" + breadCutNodeList[depth - i].recordId + "' class='meun_breadCut_name'>";
                breadCutHtml += breadCutNodeList[depth - i].title;
                breadCutHtml += "</div>";
                if (i != depth) {
                    breadCutHtml += separator;
                }
            }
            breadCutHtml += "</div>";

            $("#" + options.breadCutId).html(breadCutHtml);

            //注冊事件
            menu.prototype._registeBreadCutClick();

        },

        //說明：
        //      獲取面包削列表
        //      item：當前點擊的導航
        //      optionsData：數據源
        //      breadCutNameList：返回列表
        getBreadCutNodeList: function (item, optionData, breadCutNameList) {
            if (item != null && item.parentId >= 0) {
                var node = menu.prototype.getNodeById(item.recordId, optionData);
                breadCutNameList.push(node);//獲得列表

                item = menu.prototype.getNodeById(item.parentId, optionData);
                menu.prototype.getBreadCutNodeList(item, optionData, breadCutNameList);
            }
            return breadCutNameList;
        },

        //說明：
        //      根據ID獲取節點
        //      id：節點ID
        //      optionsData：數據源
        getNodeById: function (id, optionsData) {
            if (id < 1) {
                return null;
            }
            $.each(optionsData, function (i, v) {
                if (v.recordId == id) {
                    nodeTS = v;
                    return false;
                }
                if (v.children.length > 0) {
                    menu.prototype.getNodeById(id, v.children);
                }
            });
            return typeof (nodeTS) !== "undefined" ? nodeTS : null;
        }
    };

 　　第四部分：這部分很簡單，就是對外封裝，一句話而已。

$.menu = new menu();

 　　第五部分：這部分當然是調用啦^_^，具體的參數說明在定義默認參數的時候都用注釋，這里就不再累述。

$.menu.init({
      id: "leftMenu",
      data: data,//注意格式
      navClickCallback: function () {
      },
      boolBreadCut: true,
      breadCutId: "mbx"
});

    　第六部分：樣式表，本次樣式比較簡單、少，所以可以貼出來。

.menu_depth_1 {
    width: 200px;cursor: pointer;height: 33px;line-height: 33px;
    margin-top: 2px;background-image: url("../Images/MenuImg/bg.png");
}
.menu_depth_1_icon {
    width: 11px;height: 11px;background-image: url("../Images/MenuImg/right-depth1.png");
    margin-top: 10px;margin-right: 3px;float: left;
}
.menu_depth_1_icon_selected {
    width: 11px;height: 11px;background-image: url("../Images/MenuImg/down-depth1.png");
    margin-top: 10px;margin-right: 3px;float: left;
}
.menu_depth_other {
    width: 200px;cursor: pointer;background-color: #FFFFFF;height: 33px;line-height: 33px;display: none;
    border-bottom: 1px dashed #E0E0E0;
}
.menu_depth_other_icon {
    width: 7px;height: 7px;background-image: url("../Images/MenuImg/right-depth2-1.png");
    margin-top: 13px;margin-right: 3px;float: left;
}
.menu_depth_other_icon_selected {
    width: 7px;height: 7px;background-image: url("../Images/MenuImg/right-depth2-2.png");
    margin-top: 13px;margin-right: 3px;float: left;
}
.meun_title {
    width: auto;height: 100%;float: left;
}
.meun_title_color {
    color: #FF6600;
}
.meun_navArea {
    width: 100%;height: auto;
}

/*面包削*/
.meun_breadCut {
    width: 100%;height: 30px;line-height: 30px;
}
.meun_breadCut_name {
    width: auto;height: 30px;line-height: 30px;cursor: pointer;float: left;
}
.meun_breadCut_separator {
    width: auto;height: 30px;line-height: 30px;margin: 0px 5px;float: left;
}

  　  第七部分：當然是最后測試了啊，測試很重要，要相信好的代碼是測出來的。哈哈。。。

　　第八部分：效果圖

　　本來是沒有添加這部分內容的，原因是當時我沒有好的圖片做效果（本人隨熟練布局，但是不會ps。。。），今天我請我公司的UI設計師給我簡單的畫了幾張圖，在此也表示很感謝我的那位同事。下面是我截的效果圖，效果圖上也有些說明。可能不是很好看，但是功能杠杠的，哈哈^_^

　　總結：其實本次開發比較急，按照我上兩篇文章，其實我應該在添加一個主題部分的，當然這里就是為什么說我要大家學習div+css的原因了，如果你會布局，你可以做出各種你喜歡的主題風格。這次我偷懶了，沒有加上，后期我會補上。文章比較長，很多知識點我也沒有寫詳細。如果有需要源碼的或者想共同探討的同仁，隨時聯系我，QQ:296319075 ，注明園友就好，同時也希望大家也能提出寶貴意見，不吝賜教。秉承共同探討、共同進步！如有轉載，請注明出處，謝謝！^_^