js导入html自制路由器电源线,js实现自定义路由

本文实现自定义路由，主要是事件hashchange的使用，然后根据我们的业务需求封装。

首先实现一个router的类，并实例化。

function _router(config){

this.config = config ? config : {};

}

_router.prototype = {

event:function(str,callback){

var events = str.split(' ');

for (var i in events) window.addEventListener(events[i],callback,false);

},

init: function() {

this.event('load hashchange',this.refresh.bind(this));

return this;

},

refresh: function() {

this.currentUrl = location.hash.slice(1) || '/';

this.config[this.currentUrl]();

},

route: function(path,callback){

this.config[path] = callback || function(){};

}

}

function router (config){

return new _router(config).init();

}

上边唯一需要注意的是，在使用addEventListener的时候，需要注意bind函数的使用，因为我是踩了坑，这才体会到$.proxy()。

上边使用的时候可以使用两种方法进行注册，但第二种是依赖第一种的。

方法一：

var Router = router({

'/' : function(){content.style.backgroundColor = 'white';},

'/1': function(){content.style.backgroundColor = 'blue';},

'/2': function(){content.style.backgroundColor = 'green';}

})

方法二：

Router.route('/3',function(){ content.style.backgroundColor = 'yellow'; })

完整代码：

• /1: blue
• /2: green
• /3: yellow

var content = document.querySelector('body');

function _router(config){

this.config = config ? config : {};

}

_router.prototype = {

event:function(str,callback){

var events = str.split(' ');

for (var i in events) window.addEventListener(events[i],callback,false);

},

init: function() {

this.event('load hashchange',this.refresh.bind(this));

return this;

},

refresh: function() {

this.currentUrl = location.hash.slice(1) || '/';

this.config[this.currentUrl]();

},

route: function(path,callback){

this.config[path] = callback || function(){};

}

}

function router (config){

return new _router(config).init();

}

var Router = router({

'/' : function(){content.style.backgroundColor = 'white';},

'/1': function(){content.style.backgroundColor = 'blue';},

'/2': function(){content.style.backgroundColor = 'green';}

})

Router.route('/3',function(){

content.style.backgroundColor = 'yellow';

})

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！