做PC项目时遇到一个页面的选项较多,所以考虑了一下路由功能
2016-12-03 12:47
288 查看
说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示。直接看代码或许更直观。
上面路由系统 Router 对象实现,主要提供三个方法
init 监听浏览器 url hash 更新事件
route 存储路由更新时的回调到回调数组routes中,回调函数将负责对页面的更新
refresh 执行当前url对应的回调函数,更新页面
Router 调用方式以及呈现效果如下:点击触发 url 的 hash 改变,并对应地更新内容(这里为 body 背景色)
function Router() { this.routes = {}; this.currentUrl = ''; } Router.prototype.route = function(path, callback) { this.routes[path] = callback || function(){}; }; Router.prototype.refresh = function() { this.currentUrl = location.hash.slice(1) || '/'; this.routes[this.currentUrl](); }; Router.prototype.init = function() { window.addEventListener('load', this.refresh.bind(this), false); window.addEventListener('hashchange', this.refresh.bind(this), false); } window.Router = new Router(); window.Router.init();
上面路由系统 Router 对象实现,主要提供三个方法
init 监听浏览器 url hash 更新事件
route 存储路由更新时的回调到回调数组routes中,回调函数将负责对页面的更新
refresh 执行当前url对应的回调函数,更新页面
Router 调用方式以及呈现效果如下:点击触发 url 的 hash 改变,并对应地更新内容(这里为 body 背景色)
<ul> <li><a href="#/">turn white</a></li> <li><a href="#/blue">turn blue</a></li> <li><a href="#/green">turn green</a></li> </ul>
var content = document.querySelector('body'); // change Page anything function changeBgColor(color) { content.style.backgroundColor = color; } Router.route('/', function() { changeBgColor('white'); }); Router.route('/blue', function() { changeBgColor('blue'); }); Router.route('/green', function() { changeBgColor('green'); });
相关文章推荐
- 如何使用 asp.net 4.0 新特性 路由功能 有助于seo优化 给一个 asp.net web项目(网站项目) 增加路由功能 ,继承,给根据路由生成的url的结尾,增加一个有利于seo优化的斜杠 /,跳转到一个路由生成的url页面
- 项目中遇到的一个js页面加载问题
- 自己写的一个项目中实现的购物车功能!购物车页面以及实现购物车相应的dao包!
- 由于嵌入式项目版本较多不好管理,于是笔者写了一个“版本小助手”,和大家分享一下,附上程序
- 有时候 如果你遇到一个不懂 没做过的功能 可以先新建一个解决方案 最近简单模拟一下
- springmvc+mybatis+maven项目集成的时候遇到一个问题,项目搭起来以后,http请求怎么都进不到controller中,页面直接返回404错误,控制台没有报任何错误,请大神帮我看看
- 在一个项目中所有的Ajax功能用一个页面来实现
- springmvc+mybatis+maven项目集成的时候遇到一个问题,项目搭起来以后,http请求怎么都进不到controller中,页面直接返回404错误,控制台没有报任何错误,请大神帮我看看
- 在一个项目中所有的Ajax功能用一个页面来实现
- WebUserControl的简单用法,最近的几个项目都反复用到TextBox,CheckBox,RadiobuttonList,所以玩一下webusercontrol,有个投票功能哦。
- 自定义Jquery插件——由于项目需要,对页面中过长的文本进行截取,鼠标移上去有一个title的提示,所以做了一个Jquery过长文本处理的插件
- 十六.增加一个项目协作留言板功能(二)----- 建立一个任务管理的列表页面
- 05传智_jbpm与OA项目_部门模块中增加部门的jsp页面增加一个在线编辑器功能
- 在做项目时偶尔会遇到这样的问题,有点感觉莫名其妙,也不是什么具体程序的错误,那倒时好发现。感觉无从下手,所以就从CSDN上狠搜了一下,有了感觉了之从记载下来以免看好!
- 【Filter 不登陆无法访问】web项目中写一个过滤器实现用户不登陆,直接给链接,无法进入页面的功能
- 一个项目中遇到的若干问题-提出问题-分析问题-解决问题
- 在同一个页面中实现登陆验证进入聊天室功能
- 在一个开源项目的开发中遇到的问题
- 做一个新系统架构要考虑的模块功能
- 利用Google把你的页面翻译成英文(一个学习英文或有此功能需要的进)