magix中的url解析与处理

[xinglie]

传统的URL处理：

考虑这样的URL：http://etao.com/list?page=2
切换到下面的URL：http://etao.com/details?itemId=200089

直接修改URL页面肯定刷新，如果做到不刷新就只有使用hash的形式或pushState，如上述的URL切换，使用hash后会变成这样：

http://etao.com/list?page=2#!/details?itemId=20089

(关于hash中的叹号可搜索hashbang获取更多内容)

那对于上述的URL Magix中是如何处理的？

query中的path与参数为/list?page=2
hash中的path与参数为 /details?itemId=20089

Magix解析出来的对象是这样的：

{
    query:{
        path:'/list',
        params:{
            page:'2'
        }
    },
    hash:{
        path:'/details',
        params:{
            itemId:'20089'
        }
    },
    path:'/details',
    params:{
        page:'2',
        itemId:'20089'
    }
}

可以看出query与hash各自解析，然后把query与hash合并后再给出path与params

合并后的path是采用hash中的，因为当hash有值时，应当以hash中的值为准，那如果页面进入时没有hash,如最开始的：

http://etao.com/list?page=2

这个url的path如何确定？

这个时候需要看Magix.config中是如何配置的：

Magix.config({
  //…
  defaultPath:'/home'
});

取决于defaultPath如何配置。那么上述URL解析出来的对象就是：

{
    query:{
        path:'/list',
        params:{
            page:'2'
        }
    },
    hash:{
        path:'',
        params:{

        }
    },
    path:'/home',
    params:{
        page:'2'
    }
}

如果未配置defaultPath呢？如果未配置则使用空字符串。

所以在使用hash做为保存页面状态URL时，忽略query中的path，统一使用hash中的path

那相同参数时如何处理？如：

http://etao.com/list?page=2#!/list?page=3

这时候会把hash中的参数merge到query中，合并出来的即是最终的。相同参数则覆盖。最终解析的结果为：

{
    query:{
        path:'/list',
        params:{
            page:'2'
        }
    },
    hash:{
        path:'/list',
        params:{
            page:'3'
        }
    },
    path:'/list',
    params:{
        page:'3'
    }
}

以上是传统URL的处理，HTML5新加入了history.pushState相关的API，可以更友好的改变URL而不刷新页面。如果使用该功能需要启用edgerouter模块重新编译magix

启用该功能后，在支持HTML5 API的浏览器上，如URL的切换

从：http://etao.com/list?page=2
切换到：http://etao.com/details?itemId=20089
最终变成：http://etao.com/details?itemId=20089

不使用hash，直接改变

在不支持HMLT5的浏览器上，URL的切换

从：http://etao.com/list?page=2
切换到：http://etao.com/details?itemId=20089
最终变成：http://etao.com/list?page=2#!/details?itemId=20089

使用hash来保存url的变化

那么这时候的解析结果是如何的，尤其是path如何确定？

解析结果首先确定url中是否存在hash，如果存在hash则优先使用hash中的path。(为什么要优先使用hash中的？假设从不支持HTML5的浏览器上拷贝URL，则很有可能带有hash部分，粘贴到不管是支持HTML5还是不支持HTML5的浏览器上，都需要使用hash中的path,因为hash中的才是正确的)

如果没有hash则使用query中的path，对于参数更容易处理，如果存在hash，则把hash中的merge到query中，同名覆盖即可，原因同上。

以上就是hash和html5之间的解析差异，接下来再说一些使用上的细节

假设初始url是这样的：

http://etao.com/list?page=20&rows=30

使用Magix.Router的to方法进行导航：

Router.to(‘/list?page=1’);

假设我们使用pushState，并且当前浏览器支持，于是url会变成：

http://etao.com/list?page=1;

page参数改变，同时丢掉了rows参数，这是合理的

当在不支持history state的浏览器上时，url会变成：

http://etao.com/list?page=20&rows=30#!/list?page=1&rows=;

根据前面讲到的参数合并规则，虽然2种解析出来的结果并非严格一致，前者解析出来的参数为:{page:1},后者为:{page:1,rows:''}，相对于原来的url解析出来的参数{page:20,rows:30}，都是改变了参数page和rows，这是没问题的

只是从参数中取rows时，第1种是undefined，第2种是空字符串，严格来讲这是有问题的，不过在具体使用上并不会引入太大的问题(从地址栏中拿到的参数都是需要校验的)，所以暂忽略掉这个风险