Javascript实现前端简单的路由实例

网络编程 2024/9/26 佚名

3 1 2

前言

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

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异步请求页面内容等功能。虽然这个实例非常简单，但实际上很多路由系统的根基都立于此，其他路由系统主要是对自身使用的框架机制进行配套及优化。好了，本文的内容到这就结束了，希望能对大家的学习或者工作带来一定的帮助，如果有疑问大家可以留言交流。

js实现简单路由,js前端路由,js前端路由原理

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“Javascript实现前端简单的路由实例”

暂无评论...

P70系列延期，华为新旗舰将在下月发布

3月20日消息，近期博主@数码闲聊站透露，原定三月份发布的华为新旗舰P70系列延期发布，预计4月份上市。

而博主@定焦数码爆料，华为的P70系列在定位上已经超过了Mate60，成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢？
根据目前爆料的消息来看，华为P70系列将推出三个版本，其中P70和P70 Pro采用了三角形的摄像头模组设计，而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智，但辨识度绝对拉满。

更新日志

2024年09月26日

Javascript实现前端简单的路由实例

JavaScript常用代码书写规范的超全面总结

JavaScript中Array的实用操作技巧分享

评论“Javascript实现前端简单的路由实例”

P70系列延期，华为新旗舰将在下月发布

更新日志

友情链接