事起缘由:最近做了不少的活动页面,其中一些页面需要用到单页面的技术做切换。因为常用,所以考虑封装。

虽然市面上有不少路由库,但是如果为了这么简单的一个小功能就去引入一个庞大的库,显然是不优雅的。最优雅的方式是亲手撸一个~(•‾̑⌣‾̑•)~

还好几十行代码就能搞得掂。

组件代码:

/**
 * 路由配置组件
 * 方法:
        @method set(_hash, callback)  # 配置路由信息,参数分别是路由hash、回调函数
        @method bindhashChange(callback)  # 监听hash路由变化,回调函数的参数为change后的hash
 * 实例化方法:
        var router = Router.init();
 */
function Router() {
    this.hash = window.location.hash.substring(1);
}
Router.prototype = {
    // 设置路由
    set: function(_hash, callback) {
        var _this = this;
        checkRouter(_this.hash);
        _this.bindhashChange(function(__hash) {
            checkRouter(__hash);
        });

        function checkRouter(__hash) {
            if(_hash == __hash) {
                if(typeof callback == "function") {
                    callback();
                }
            }
        }
    },
    // hashChange事件监听
    bindhashChange: function(callback) {
        var _this = this;
        if (('onhashchange' in window) && ((typeof document.documentMode === 'undefined') || window.documentMode == 8)) {
            _this.addEvent(window, "hashchange", function() {
                _this.hash = window.location.hash.substring(1);
                if(typeof callback == "function") {
                    callback(_this.hash);
                }
            });
        } else {
            setInterval(function () {
                var ischanged = _this.hash != window.location.hash.substring(1);
                if (ischanged) {
                    _this.hash = window.location.hash.substring(1);
                    if(typeof callback == "function") {
                        callback(_this.hash);
                    }
                }
            }, 150);
        }
    },
    // 事件绑定函数兼容
    addEvent: function(ele, eventType, callback) {
        if(ele.addEventListener) {
            return ele.addEventListener(eventType, callback, false);
        }else if(ele.attachEvent) {
            return ele.attachEvent(eventType, callback);
        }else {
            return ele["on" + eventType] = callback;
        }
    }
};
// 实例化
Router.init = function() {
    var router = new Router();
    return router;
};

使用实例:

HTML代码:

<a class="btn" href="#green">turn green</a>
<a class="btn" href="#red">turn red</a>
<a class="btn" href="#brown">turn brown</a>

JS代码:

var body = document.getElementsByTagName("body")[0];

var router = Router.init();
router.set("green", function() {
    body.style.background = "#3ac593";
});
router.set("red", function() {
    body.style.background = "#d05560";
});
router.set("brown", function() {
    body.style.background = "#bd6c3c";
});

活生生的Demo:

本文作者:子匠_Zijor,转载请注明出处:http://www.dengzhr.com/js/1241