zoukankan      html  css  js  c++  java
  • 浅看spa单页应用路由

    路由观察浏览器的URL的变更。当URL 变更时,路由会解析它并生成一个新的路由实例。

    一个基本的路由是这样的:

    class Router {
        private _defaultController: string;
        private _defaultAction: string;
    
        constructor(defaultController: string, defaultAction: string) {
            this._defaultController = defaultController || "home";
            this._defaultAction = defaultAction || "index";
        }
    
        public initialize() {
            $(window).on('hashchange', ()=> {
                var r = this.getRoute();
                this.onRouteChange(r);
            })
        }
    
        //  读取URL
        private getRoute() {
            var h = window.location.hash;
            return this.parseRoute(h);
        }
    
        //  解析URL
        private parseRoute(hash: string) {
            var comp, controller, action, args, i;
            if(hash[hash.length - 1] === "/") {
                hash = hash.substring(0, hash.length - 1);
            }
            comp = hash.replace("#", '').split('/');
            controller = comp[0] || this._defaultController;
            action = comp[1] || this._defaultAction;
    
            args = [];
            for (i = 2; i < comp.length; i++) {
                args.push(comp[i]);
            }
            return new Route(controller, action, args);
        }
    
        private onRouteChange(route: Route) {
            //  在此处执行控制器
        }
    }

    上面这个类使用默认controller和默认方法的名字作为它的构造函数的参数。当没有参数被传入时,home和index作为默认controller名和默认方法名。

    initialize方法被用来创建hashchange事件的监听。浏览器会在window.location.hash变更的时候触发这个事件。比如,当前页面的URL是http:localhost:8080,当用户点击了下面的链接<a href="#tasks/index">点我</a>,window.location.hash的值会变成“/task/index”。浏览器地址栏中的地址会变更,但hash字符会阻止浏览器重载当前页面。随后路由会使用parseRoute调用getRoute方法将URL转变成一个新的Route类实例。

    URL遵循下面的命名规范:

    #controllerName/actionName/arg1/arg2/arg3/argN

    这意味着task/index URL 会被转换成:

    new Route(“task”, “index”, []);

    Route类的实例被传入onRouteChange()方法中,它将负责调用处理这个路由的controller

  • 相关阅读:
    告别ThinkPHP6的异常页面, 让我们来拥抱whoops吧
    ThinkPHP6 上传图片代码demo
    【ThinkPHP6:从TP3升级到放弃】1. 前言及准备工作
    PHP数字金额转换大写金额
    提高PHP开发效率, PhpStorm必装的几款插件
    5分钟弄懂Docker!
    GitHub 上排名前 100 的 IOS 开源库简介
    GitHub 上排名前 100 的 Android 开源库简介
    android线程消息传递机制——Looper,Handler,Message
    Android Activity:四种启动模式,Intent Flags和任务栈
  • 原文地址:https://www.cnblogs.com/pjl43/p/9538859.html
Copyright © 2011-2022 走看看