当前位置:Gxlcms > JavaScript > 用js写的一个路由(简单实例)

用js写的一个路由(简单实例)

时间:2021-07-01 10:21:17 帮助过:4人阅读

前几天在网上看了一个大牛用js写了一个路由的,有一句代码一直不知道怎么回事,后来就自己写了一个,写的比较的粗糙,我觉得把面向对象的思想都搞得乱七八糟的,不过功能实现了。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>js实现路由</title>
  6. </head>
  7. <body>
  8. < a href=" " >white</ a>
  9. < a href="#/green" >green</ a>
  10. < a href="#/blue" >blue</ a>
  11. < a href="#/yellow" >yellow</ a>
  12. </body>
  13. </html>
  14. <script>
  15. function Route(){
  16. }
  17. Route.prototype.open=function(route,callback){
  18. var arr={};
  19. arr[route]=callback;
  20. window.addEventListener('hashchange',function(){
  21. var temp=window.location.hash;
  22. for(var i in arr){
  23. if(i==temp.slice(1,temp.length)){
  24. arr[i]();
  25. }
  26. }
  27. })
  28. }
  29. window.Route=new Route();
  30. function change(color){
  31. var body=document.getElementsByTagName('body')[0];
  32. body.style.backgroundColor=color;
  33. console.log(color);
  34. }
  35. Route.open('/',function(){
  36. change('');
  37. });
  38. Route.open('/green',function(){
  39. change('green');
  40. });
  41. Route.open('/blue',function(){
  42. change('blue');
  43. });
  44. Route.open('/yellow',function(){
  45. change('yellow');
  46. });
  47. </script>

以上就是小编为大家带来的用js写的一个路由(简单实例)的全部内容了,希望对大家有所帮助,多多支持脚本之家~

人气教程排行