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'; })

完整代码：

<html>
 <head>
  <title></title>
 </head>
 <body>
  <ul>
   <li><a href="#/1">/1: blue</a></li>
   <li><a href="#/2">/2: green</a></li>
   <li><a href="#/3">/3: yellow</a></li>
  </ul>
  <script>
  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';
  })
  </script>
 </body>
</html>
<script>
</script>

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

赞 (0)

相关推荐

  • AngularJS 路由详解和简单实例

    AngularJS 路由详解和简单实例

    AngularJS 路由 本章节我们将为大家介绍 AngularJS 路由. AngularJS 路由允许我们通过不同的 URL 访问不同的内容. 通过 AngularJS 可以实现多视图的单页Web应用(single page web application,SPA). 通常我们的URL形式为 http://runoob.com/first/page,但在单页Web应用中 AngularJS 通过 # + 标记 实现,例如: http://runoob.com/#/first http://r

  • AngularJS 路由和模板实例及路由地址简化方法(必看)

    AngularJS 路由和模板实例及路由地址简化方法(必看)

    最近一同事在学习AngularJS,在路由与模板的学习过程中遇到了一些问题,于是今天给她写了个例子,顺便分享出来给那些正在学习AngularJS的小伙伴们. 话说这AngularJs 开发项目非常的爽,其中爽就爽在它的开发模式,使得代码更加的清晰.更加具有可读性.更简洁.更具有维护性.但是在使用AngularJS开发的过程中也有让我头疼的地方,那就是目前前端框架更多的还是以Jquery为主,很多插件都是依赖于Jquery的,AngulaJS的插件少之又少(除了AngularUI其他的Angula

  • Angularjs制作简单的路由功能demo

    从官网下载了最新版本的Angularjs 版本号:1.3.15 做一个简单的路由功能demo 首页:index.html <!DOCTYPE html > <html> <head> <meta charset="utf-8" /> <title>测试</title> <script src="./js/angular.min.js"></script> <scri

  • director.js实现前端路由使用实例

    director.js实现前端路由使用实例

    做过后端开发,尤其是使用过类似Django或者express对服务器端的路由功能应该都比较熟悉,国外流行的博客系统wordpress也是非常经典的路由实现案例.那么,究竟什么的路由呢,下面通过wordpress来简单讲一下. 理解wordpress重写规则的的都是知道,实际上任何一条url的访问都是基于wordpress安装目录下的index.php(除了服务器上已经存在文件的访问),当wordpress的固定链接是模式设置是会很明显,例如文章的url是index.php?p=id,分类页面的u

  • nodejs中实现路由功能

    nodejs中实现路由功能

    初学Node,发现了与自己之前的观点完全不同的场面--你眼中的JavaScript,是干什么用的呢?特效?or 只是与客户端的交互?可以说,JavaScript最早是运行在浏览器中的,然而你要这样想,浏览器只是你提供了一个上下文(context),它定义了 使用JavaScript可以做什么,这里可以想成类似的一个企业,企业定义了你可以在这里做什么,但是并没有说太多关于JavaScript语言本身可 以做什么.事实上,作为一门完整的语言,JavaScript可以使用在不同的上下文中,体现出不同的

  • 全面解析JavaScript的Backbone.js框架中的Router路由

    Backbone 中的 Router 充当路由的作用,控制 URL 的走向,当在 URL 中使用 # 标签时生效. 定义 Router 至少需要一个 Router 和一个函数来映射特定的 URL,而且我们需要记住,在 Backbone 中,# 标签后的任意字符都会被 Router 接收并解释. 下面我们来定义一个 Router: <script> var AppRouter = Backbone.Router.extend({ routes: { "*actions": &

  • Vue.js路由组件vue-router使用方法详解

    使用Vue.js + vue-router 创建单页应用是非常简单的.只需要配置组件和路由映射,然后告诉 vue-router 在哪里渲染即可. 一.普通方式基本例子: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue-router使用方法</title> </head> <bod

  • JS实现简单路由器功能的方法

    本文实例讲述了JS实现简单路由器功能的方法.分享给大家供大家参考.具体实现方法如下: var wawa = {}; wawa.Router = function(){ function Router(){ } Router.prototype.setup = function(routemap, defaultFunc){ var that = this, rule, func; this.routemap = []; this.defaultFunc = defaultFunc; for (v

  • angular.js之路由的选择方法

    在一个单页面中,我们可以添加多个模块,使得网页只在需要的时候加载这个模块.模块的切换大致上可以代替网页的切换,于是,我们便可以通过模块的切换实现网页的切换,这个切换是按需加载的. 乍一看非常普通的东西,但是仔细想想就可以发现,这种思想可以解决非常多的资源. 例如,假如有一个页面,需要显示1000种商品的信息,每个商品的表现形式各不相同(设他们有各自独立的css和js),那么一般来说,我们就需要准备1000张网页去加载这些信息.但是,使用这种模块化思想,我们就可以仅仅在后台设定1000个各不相同的

  • 使用AngularJS对路由进行安全性处理的方法

     简介 自从出现以后,AngularJS已经被使用很长时间了. 它是一个用于开发单页应用(SPA)的javascript框架. 它有一些很好的特性,如双向绑定.指令等. 这篇文章主要介绍Angular路由安全性策略. 它是一个可用Angular开发实现的客户端安全性框架. 我已经对它进行了测试. 除了保证客户端路由安全性外,你也需要保证服务器端访问的安全性. 客户端安全性策略有助于减少对服务器进行额外的访问. 然而,如果一些人采用欺骗浏览器的手段访问服务器,那么服务器端安全性策略应当能够拒绝未授

  • 轻松创建nodejs服务器（4）：路由

    服务器需要根据不同的URL或请求来执行不一样的操作,我们可以通过路由来实现这个步骤. 第一步我们需要先解析出请求URL的路径,我们引入url模块. 我们来给onRequest()函数加上一些逻辑,用来找出浏览器请求的URL路径: 复制代码 代码如下: var http = require("http"); var url = require("url"); function start() {  function onRequest(request, respons

随机推荐