Javascript实现前端简单路由

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>
时间: 2024-10-14 06:37:06

Javascript实现前端简单路由的相关文章

echart封装,前端简单路由,图表设置自动化

https://github.com/cclient/EhartDemoSetByAngular 后端node.js 前端插件 echart,jquery,jqueryui,datapicker,angularjs,tag-it bootstrap(这个坑死我,选型失误datapicker样式和bootstrap 不兼容,记录在http://www.cnblogs.com/zihunqingxin/p/4435815.html) 源码内容 封装了echart的 大地图(上级下级跳转,echar有

JavaScript实现前端路由

在单页面应用中,前端通常需要一套路由机制,这样当url发生变化时就可以做出一些处理,从而让页面显示不同的内容.Backbone及Angular里面内置的都有一套路由实现,但有时候可能并不想使用整个框架,只需要路由处理的部分,那么下面就来看一下如何用JavaScript实现前端路由. html部分: <div class="container"> <nav class="mainMenu"> <ul> <li><a

编译原理实战入门:用 JavaScript 写一个简单的四则运算编译器(四)结语

四则运算编译器,虽然说功能很简单,只能编译四则运算表达式.但是编译原理前端部分几乎都有涉及,词法分析,语法分析,还有代码生成. 再复杂的编译器.再简单的编译器,功能上是差不多的,只是复杂的编译器实现上会更困难. 这个系列的文章是为了帮助你入门,在这个基础上再去看编译原理相关书籍,不至于打瞌睡. 如果你对编译原理很有兴趣,并且想更深一步的学习,在这里强烈推荐你看一本书--我心目中的神书--<计算机系统要素-从零开始构建现代计算机>. 这本书神在哪? 神在它通俗易懂,对小白足够友好,但又不过分肤浅

javascript标签语句简单介绍

javascript标签语句简单介绍:由于对于标签语句的应用并不多,所以可能很多朋友都不是太了解,下面就对它做一下简单介绍,希望能够给需要的朋友带来一定的帮助.标签其实是一个标示符,关于表示符这里就不多介绍了,具体可以参阅javascript标示符的概念是什么一章节, 标签可以与变量重名,它是一个独立的语法元素,它的作用是标识标签化语句(labeled statement).一.标签声明:标签可以声明在任何一个语句前面,或者语句块前,以使得语句或语句块被“标签化(labeled)”,简单的说就是

JavaScript 日期格式化 简单实用

JavaScript 日期格式化 简单实用 代码如下,引入jquery后直接后加入以下代码刷新可测试 Date.prototype.Format = function (fmt) { //author: meizz var o = { "M+": this.getMonth() + 1, //月份 "d+": this.getDate(), //日 "h+": this.getHours(), //小时 "m+": this.

javascript操作cookie简单插件

javascript操作cookie简单插件:恰当灵活的使用cookie可以给用户带来诸多方便,尽管它一直被不少人士所诟病,但是它的应用还是无处不在,关于cookie这里就不多介绍了,具体可以参阅javascript如何操作cookie一章节,下面给出操作cookie的一个简单插件,代码如下: var cookie={ //创建cookie setCookie:function (name, value, iDay) { var oDate = new Date(); oDate.setDate

Javascript函数的简单学习 - &lt;转&gt; 博客园

Javascript函数的简单学习 函数的定义与调用1:函数的定义    语法格式    function 函数名(数据类型 参数1){//function是定义函数的关键字        方法体;//statements,用于实现函数功能的语句        [返回值return expression]//expression可选参数,用于返回函数值            }    //1:函数名:区分大小写,并且在同一个页面中,函数名是唯一的    //2:parameter:可选参数,用于

javascript的constructor简单介绍

javascript的constructor简单介绍:constructor可以返回对象对创建它的构造函数的引用,例如: var arr=[1,2,3]; console.log(arr.constructor===Array); 以上代码中的输出值是true,这说明数组对象arr的constructor属性指向它的构造函数Array.可能上面的代码过于简单了,下面再来一点稍稍复杂的代码分析一下: Object.prototype.webName="蚂蚁部落"; function sh

[JavaScript] js实现简单的代码运行框

<script type="text/javascript">// <![CDATA[ function runCode(obj) { var winname = window.open('', "_blank", ''); winname.document.open('text/html', 'replace'); winname.document.write(obj.value); winname.document.close(); } //