基于Hash方式简单的实现前端路由

var fontEndRoute = function() {
    return {
        hashList: {},
        index: null,
        key: '!',
        init: function() {
            //初始化 绑定事件,以及调用路由回调,目的使为了跳转到index
            console.log(this);
            this.bindEvent();
            this.reload();
        },
        bindEvent: function() {
            var _this = this;
            window.onhashchange = function() {
                _this.reload();
            };
        },
        /**
         * addRouter 在路由表中新增一个路由
         * @param address {String,require} 路由地址
         * @param callback {Function,require} 回调 调用回调的时候也会传入对应的参数
         **/
        addRouter: function(address, callback) {
            this.hashList[address] = callback;
        },
        /**
         * removeRouter 在路由表中删除一个路由
         * @param address {String,require} 路由地址
         * @param callback {Function} 回调 调用回调的时候也会传入对应的参数
         **/
        removeRouter: function(address, callback) {
            if (!address) return;
            delete this.hashList[address];
            if (callback) {
                callback();
            }
        },
        /**
         * setHome 设定路由的主页面
         * @param index {String,require} 路由主页面地址
         **/
        setHome: function(index) {
            index = index ? index : 'index';
            this.index = index;
        },
        /**
         * push 路由跳转
         * @param address {String,require} 跳转的地址
         **/
        push: function(address) {
            window.location.hash = '#' + this.key + address;
        },
        /**
         * reload 重载页面
         **/
        reload: function() {
            //获取hash
            var hash = window.location.hash;
            hash = hash.replace('#' + this.key, '');
            // 获取路由地址
            var address = hash.split('/')[0];
            // 匹配路由列表调用对应回掉函数
            var callback = this.getCallback(address, this.hashList);
            //如果有回调函数
            if (callback) {
                var params = hash.split('/');
                params.shift();
                callback.apply(this, params);
            } else {
                // 如果没有匹配到路由表 那么跳转到index
                this.index && this.push(this.index);
            }
        },
        getCallback(address, hashList) {
            for (var attr in hashList) {
                if (attr === address) {
                    return hashList[attr];
                }
            }
            return false;
        }
    };
};

你可能感兴趣的:(基于Hash方式简单的实现前端路由)