浅看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