码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript实现前端简单路由

时间:2017-02-18 18:13:37      阅读:194      评论:0      收藏:0      [点我收藏+]

标签:zh-cn   简洁   目的   view   操作   方法   php   backbone   开发   

http://www.helloweba.com/view-blog-385.html

WEB开发中路由概念并不陌生,我们接触到的有前端路由和后端路由。后端路由在很多框架中是一个重要的模块,如Thinkphp,Wordpress中都应用了路由功能,它能够让请求的url地址变得更简洁。同样前端路由在单页面应用也很常见,它使得前端页面体验更流畅。

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

本文将使用javascript实现一个极其简单的路由实例。

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异步请求页面内容等功能。虽然这个实例非常简单,但实际上很多路由系统的根基都立于此,其他路由系统主要是对自身使用的框架机制进行配套及优化。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <ul>
        <li><a onclick="location.href=‘#/‘">首页</a></li>
        <li><a href="#/product">产品</a></li>
        <li><a onclick="location.href=‘#/server‘">服务</a></li>
    </ul>
    <div id="result"></div>

    <script type="text/javascript">
        console.log(Date.now());
        /**
         * 以 hash 形式(也可以使用 History API 来处理)为例,当 url 的 hash 发生变化时,触发 hashchange 注册的回调,回调中去进行不同的操作,进行不同的内容的展示。
         */
        function Router(){
            this.routers = {};
            this.curUrl = ‘‘;

            this.route = function(path, callback){
                this.routers[path] = callback || function(){};
            };

            this.refresh = function(){
                console.log(location.hash);
                this.curUrl = location.hash.slice(1) || /;
                this.routers[this.curUrl]();
            }
            this.init = function(){
                window.addEventListener(load, this.refresh.bind(this), false);
                window.addEventListener(hashchange, this.refresh.bind(this), false);
            }
        }

        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 = 这是服务页;
        });
    </script>
</body>
</html>

 

Javascript实现前端简单路由

标签:zh-cn   简洁   目的   view   操作   方法   php   backbone   开发   

原文地址:http://www.cnblogs.com/jiangxiaobo/p/6413536.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!