这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
下面小编就为大家带来一篇用 js 写的一个路由 (简单实例)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
前几天在网上看了一个大牛用 js 写了一个路由的, 有一句代码一直不知道怎么回事, 后来就自己写了一个, 写的比较的粗糙, 我觉得把面向对象的思想都搞得乱七八糟的, 不过功能实现了。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- js实现路由
- </title>
- </head>
- <body>
- < a href=" ">
- white
- </ a>
- < a href="#/green">
- green
- </ a>
- < a href="#/blue">
- blue
- </ a>
- < a href="#/yellow">
- yellow
- </ a>
- </body>
- </html>
- <script>
- function Route() {}
- Route.prototype.open = function(route, callback) {
- var arr = {};
- arr[route] = callback;
- window.addEventListener('hashchange',
- function() {
- var temp = window.location.hash;
- for (var i in arr) {
- if (i == temp.slice(1, temp.length)) {
- arr[i]();
- }
- }
- })
- }
- window.Route = new Route();
- function change(color) {
- var body = document.getElementsByTagName('body')[0];
- body.style.backgroundColor = color;
- console.log(color);
- }
- Route.open('/',
- function() {
- change('');
- });
- Route.open('/green',
- function() {
- change('green');
- });
- Route.open('/blue',
- function() {
- change('blue');
- });
- Route.open('/yellow',
- function() {
- change('yellow');
- });
- </script>
以上就是小编为大家带来的用 js 写的一个路由 (简单实例) 的全部内容了,希望对大家有所帮助,多多支持 phperz~
来源: http://www.phperz.com/article/17/0516/331629.html