利用js抽象通用面包屑导航片段失败

转载请注明出处WangYuheng’s Blog

现象

利用js记录路由值，抽象面包屑导航模块，导致业务复杂度上升

原因

每个导航菜单都包含多个参数，利用js记录每个来源请求的地址+参数, 但抽象能力不足，导致设计过分复杂，而且是无用功。

解决方法

在每个页面中写静态导航

附录为失败的导航js

var breadcrumb = {
    _cachekey: 'breadcrumbs',
    _breadcrumbs: [],
    init: function() {
        this.clearBreadcrumb();
    },
    courseIndexInit: function() {
        if (breadcrumb._breadcrumbs.length == 0) {
            breadcrumb._breadcrumbs = WName.get(breadcrumb._cachekey);
            for (var i = 0; i < breadcrumb._breadcrumbs.length; i++) {
                var _thisBreadcrumb = breadcrumb._breadcrumbs[i];
                $("#breadCrumbMenu #" + _thisBreadcrumb.name).length == 0 && $('#breadCrumbMenu').append(_thisBreadcrumb.htmlTxt);
                $("#breadCrumbMenu #" + _thisBreadcrumb.name).on("click", _thisBreadcrumb.fn);
            }
        }
    },
    refreshWNCache: function() {
        WName.get(breadcrumb._cachekey) && WName.remove(breadcrumb._cachekey);
        WName.put(breadcrumb._cachekey, breadcrumb._breadcrumbs);
    },
    refresh: function() {
        this.refreshWNCache();
        $('#breadCrumbMenu').children().remove();
        for (var i = 0; i < breadcrumb._breadcrumbs.length; i++) {
            var _thisBreadcrumb = breadcrumb._breadcrumbs[i];
            $("#breadCrumbMenu #" + _thisBreadcrumb.name).length == 0 && $('#breadCrumbMenu').append(_thisBreadcrumb.htmlTxt);
            $("#breadCrumbMenu #" + _thisBreadcrumb.name).on("click", _thisBreadcrumb.fn);
        }
    },
    fillBreadcrumb: function(vName, vFoo, vIndex) {
        var _thisBreadcrumb = this.breadcrumbTemplate[vName];
        $("#breadCrumbMenu #" + vName).length == 0 && $('#breadCrumbMenu').append(_thisBreadcrumb.htmlTxt);
        if (vFoo) {
            _thisBreadcrumb.fn = vFoo;
        }
        this._breadcrumbs[_thisBreadcrumb.seq] = _thisBreadcrumb;
        this._breadcrumbs.splice(1 + _thisBreadcrumb.seq, this._breadcrumbs.length);
        $("#breadCrumbMenu #" + vName).on("click", _thisBreadcrumb.fn);
        this.refresh();
    },
    clearBreadcrumb: function() {
        this._breadcrumbs = [];
        $('#breadCrumbMenu').children().remove();
        WName.put(breadcrumb._cachekey, null);
        WName.get(breadcrumb._cachekey) && WName.remove(breadcrumb._cachekey);
    },
    breadcrumbTemplate: {
        courseList: { name: 'courseList', htmlTxt: '<span><b>/</b><a href="#courseList" id="courseList">课程列表</a></span>', seq: 0 },
        course: { name: 'course', htmlTxt: '<span><b>/</b><a href="#course" id="course">课程首页</a></span>', seq: 1 },
        user: { name: 'user', htmlTxt: '<span><b>/</b><a href="#userBase" id="user">电子档案</a></span>', seq: 0, fn: function() { user.forupdateinfo() } }
    }
}