美文网首页
网上看到一个路由的实现

网上看到一个路由的实现

作者: Jalon | 来源:发表于2016-03-28 14:05 被阅读0次

网上看到一个精致的路由的实现,大概原理是:
轮询路由的状态,在改变的时候,当match到对应的预设好的路由时,执行其注册的回调函数。其实是还可以加上视图view的。他的代码如下:

var Router = {
    routes: [],
    mode: null,
    root: '/',
    config: function (options) {
        this.mode = options && options.mode && options.mode == 'history'
        && !!(history.pushState) ? 'history' : 'hash';
        this.root = options && options.root ? '/' + this.clearSlashes(options.root) + '/' : '/';
        return this;
    },
    getFragment: function () {
        var fragment = '';
        if (this.mode === 'history') {
            fragment = this.clearSlashes(decodeURI(location.pathname + location.search));
            fragment = fragment.replace(/\?(.*)$/, '');
            fragment = this.root != '/' ? fragment.replace(this.root, '') : fragment;
        } else {
            var match = window.location.href.match(/#(.*)$/);
            fragment = match ? match[1] : '';
        }
        return this.clearSlashes(fragment);
    },
    clearSlashes: function (path) {
        return path.toString().replace(/\/$/, '').replace(/^\//, '');
    },
    add: function (re, handler) {
        if (typeof re == 'function') {
            handler = re;
            re = '';
        }
        this.routes.push({re: re, handler: handler});
        return this;
    },
    remove: function (param) {
        for (var i = 0, r; i < this.routes.length, r = this.routes[i]; i++) {
            if (r.handler === param || r.re.toString() === param.toString()) {
                this.routes.splice(i, 1);
                return this;
            }
        }
        return this;
    },
    flush: function () {
        this.routes = [];
        this.mode = null;
        this.root = '/';
        return this;
    },
    check: function (f) {
        var fragment = f || this.getFragment();
        for (var i = 0; i < this.routes.length; i++) {
            var match = fragment.match(this.routes[i].re);
            if (match) {
                match.shift();
                this.routes[i].handler.apply({}, match);
                return this;
            }
        }
        return this;
    },
    listen: function () {
        var self = this;
        var current = self.getFragment();
        var fn = function () {
            if (current !== self.getFragment()) {
                current = self.getFragment();
                self.check(current);
            }
        }
        clearInterval(this.interval);
        this.interval = setInterval(fn, 50);
        return this;
    },
    navigate: function (path) {
        path = path ? path : '';
        if (this.mode === 'history') {
            history.pushState(null, null, this.root + this.clearSlashes(path));
        } else {
            window.location.href.match(/#(.*)$/);
            window.location.href = window.location.href.replace(/#(.*)$/, '') + '#' + path;
        }
        return this;
    }
}

// configuration
Router.config({mode: 'history'});

// returning the user to the initial state
Router.navigate();

// adding routes
Router
    .add(/about/, function () {
        console.log('about');
    })
    .add(/products\/(.*)\/edit\/(.*)/, function () {
        console.log('products', arguments);
    })
    .add(function () {
        console.log('default');
    })
    .check('/products/12/edit/22').listen();

// forwarding
Router.navigate('/about');

相关文章

  • 网上看到一个路由的实现

    网上看到一个精致的路由的实现,大概原理是:轮询路由的状态,在改变的时候,当match到对应的预设好的路由时,执行其...

  • 计算机网络期末保命复习(3)

    RIP协议 RIP协议是向量-距离路由选择算法在局域网上的直接实现 RIP协议规定了路由器之间交换路由信息的时间、...

  • 手写一个laravel(七) 路由实现

    手写一个laravel(七) 路由实现 创建Route/Router.php 为路由的实现类,实现get,any等...

  • 策略路由

    路由模式下的vlan绑定需要通过策略路由来发往wan端,刚好看到一篇文章讲策略路由,Mark一下。 网上搜...

  • 组件化2.路由框架的设计

    路由框架原理 路由框架是为了实现组件之间的通信 路由框架维护了一个分组的路由表路由表中存放了路由地址和路由信息路由...

  • 网上看到的

    人一旦有了感情,就窝囊得不行,你说要敬往事一杯酒,再爱也不回头。 实际就算你醉到黄昏独自愁,如果那人伸出手,你还是...

  • 【HCIP】1路由

    一、什么是路由? 就是一个网段的数据包转发到另一个网段。 1、实现路由的设备 凡是具备路由功能的网络设备 2、实现...

  • 实现一个简易的前端路由

    实现一个简易的前端路由

  • 前端中的 hash 和 history 路由

    前端路由有有 hash 路由和 history 路由两种路由方式,他们的原理是什么,又怎样实现一个简单的路由监听呢...

  • ARouter源码分析

    ARouter源码解读 以前看优秀的开源项目,看到了页面路由框架ARouter,心想页面路由是个啥东东,于是乎网上...

网友评论

      本文标题:网上看到一个路由的实现

      本文链接:https://www.haomeiwen.com/subject/vhmjlttx.html