做PC项目时遇到一个页面的选项较多,所以考虑了一下路由功能
来源:互联网 发布:拳皇13出招优化 编辑:程序博客网 时间:2024/05/07 12:00
说一下前端路由实现的简要原理,以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示。直接看代码或许更直观。
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 anythingfunction changeBgColor(color) { content.style.backgroundColor = color;}Router.route('/', function() { changeBgColor('white');});Router.route('/blue', function() { changeBgColor('blue');});Router.route('/green', function() { changeBgColor('green');});
0 0
- 做PC项目时遇到一个页面的选项较多,所以考虑了一下路由功能
- 今天做了一个小小的项目 总结一下。
- Oracle Database 12c中对分区功能做了较多的调整
- 最近把EJB3.0的所有规范都看了,也做了一下。所以把它共享一下。
- 做一个新系统架构要考虑的模块功能
- 就最近一段时间,就遇到了两次session id 一直变化的,所以做个总结。
- 遇到了一个C++的小问题,百度了一下
- 做一个 页面失效的功能
- 做项目应该考虑的
- 不区分大小写的串比较---Windows下的stricmp和Linux下的strcasecmp, 遇到了, 所以记录一下!
- 昨天做项目的时候,遇到了一个tabbar 影响底部按钮的问题
- 记录一下做项目时遇到问题的解决思路(一)
- 由于嵌入式项目版本较多不好管理,于是笔者写了一个“版本小助手”,和大家分享一下,附上程序
- 安装Ubuntu时遇到的问题,做一个笔记记录一下
- 这几刚干完一个简单的项目,总结一下。本人是新手 第一次做项目,老手就不用看了
- 找到一个sql车站的老题~~做了一下
- 做了一个不错的词典,分享一下
- 做了一个不错的词典,分享一下
- 5 docker 安全
- service与dao层的不同点
- 1.编程实现: 两个int(32位)整数m和n的二进制表达中, 有多少个位(bit)不同? 输入例子: 1999 2299 输出例子:7
- Android使用MulticastSocket实现多点广播图片
- sql语句 扩展
- 做PC项目时遇到一个页面的选项较多,所以考虑了一下路由功能
- Web前端学习【二】
- java的封装性
- JavaEE中的MVC(一)Dao层彻底封装
- MATLAB-图像复原和分割
- c#面试题
- docker之web server(python)
- 地14周实践-1 数组大折腾(2)
- Codeforces Round #382 (Div. 2)C