Javascript实现前端简单路由

http://www.helloweba.com/view-blog-385.html

WEB开发中路由概念并不陌生，我们接触到的有前端路由和后端路由。后端路由在很多框架中是一个重要的模块，如Thinkphp，Wordpress中都应用了路由功能，它能够让请求的url地址变得更简洁。同样前端路由在单页面应用也很常见，它使得前端页面体验更流畅。

前端路由在很多开源的js类库框架中都得到支持，如angularJS，Backbone，Reactjs等等。前端路由和后端路由原理一样，是让所有的交互和展现在一个页面运行以达到减少服务器请求，提高客户体验的目的，越来越多的网站特别是web应用都用到了前端路由。

本文将使用javascript实现一个极其简单的路由实例。

HTML

页面中有一个导航菜单ul，和一个div#result用来显示结果，当点击导航菜单时，#result中会显示不同的结果内容。

<ul>  <li><a href="#/">首页</a></li>  <li><a href="#/product">产品</a></li>  <li><a href="#/server">服务</a></li>
</ul>
<div id="result"></div>

JAVASCRIPT

说一下前端路由实现的简要原理，以 hash 形式（也可以使用 History API 来处理）为例，当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示。

function Router(){ this.routes = {}; this.curUrl = ''; this.route = function(path, callback){ this.routes[path] = callback || function(){}; }; this.refresh = function(){ this.curUrl = location.hash.slice(1) || '/'; this.routes[this.curUrl](); }; this.init = function(){ window.addEventListener('load', this.refresh.bind(this), false); window.addEventListener('hashchange', this.refresh.bind(this), false); }
}

上面代码中路由系统Router对象实现，主要提供三个方法：

init 监听浏览器 url hash 更新事件。

route 存储路由更新时的回调到回调数组routes中，回调函数将负责对页面的更新。

refresh 执行当前url对应的回调函数，更新页面。

Router调用方式如下：点击触发 url 的 hash 改变，并对应地更新内容，运行后你会发现每次点击菜单时，#result中会变换背景色和内容。

var R = new Router();
R.init();
var res = document.getElementById('result'); R.route('/', function() { res.style.background = 'blue'; res.innerHTML = '这是首页'; }); R.route('/product', function() { res.style.background = 'orange'; res.innerHTML = '这是产品页'; }); R.route('/server', function() { res.style.background = 'black'; res.innerHTML = '这是服务页'; });

以上为一个前端路由的简单实现，实际应用中，应该对hash进行正则匹配处理，以满足大量url的应用，同时增加ajax异步请求页面内容等功能。虽然这个实例非常简单，但实际上很多路由系统的根基都立于此，其他路由系统主要是对自身使用的框架机制进行配套及优化。

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta charset="utf-8"><title></title>
</head>
<body><ul><li><a onclick="location.href='#/'">首页</a></li><li><a href="#/product">产品</a></li><li><a onclick="location.href='#/server'">服务</a></li></ul><div id="result"></div><script type="text/javascript">console.log(Date.now());/*** 以 hash 形式（也可以使用 History API 来处理）为例，当 url 的 hash 发生变化时，触发 hashchange 注册的回调，回调中去进行不同的操作，进行不同的内容的展示。*/function Router(){this.routers = {};this.curUrl = '';this.route = function(path, callback){this.routers[path] = callback || function(){};};this.refresh = function(){console.log(location.hash);this.curUrl = location.hash.slice(1) || '/';this.routers[this.curUrl]();}this.init = function(){window.addEventListener('load', this.refresh.bind(this), false);window.addEventListener('hashchange', this.refresh.bind(this), false);}}var R = new Router();R.init();var res = document.getElementById('result');R.route('/',function(){res.style.background = 'blue';res.innerHTML = '这是首页';});R.route('/product',function(){res.style.background = 'orange';res.innerHTML = '这是产品页';});R.route('/server',function(){res.style.background = 'black';res.innerHTML = '这是服务页';});</script>
</body>
</html>

转载于:https://www.cnblogs.com/jiangxiaobo/p/6413536.html