前端路由的两种实现

转载自  http://www.jianshu.com/p/c9de1924d215

1、原理浅析

  • hash模式
    如果a标签的href属性以"#"开头，那么当点击这个a标签时就会触发hashchange事件，在该事件处理函数中可以做很多事，比如发ajax请求，进行DOM操作替换页面等。
  • history模式
    hisroty模式相比hash模式，是一种比较新的路由模式，其浏览器兼容性如下：

pushState浏览器兼容性


原理就是利用history.pushState(state,null,url)更新浏览器url地址

2、具体实现

Talk is easy，show you the Code!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hash Test</title>
</head>
<body>
    <a href="#1">#1</a>
    <a href="#2">#2</a>
    <div id="content"></div>
    <script type='text/js-template' class="test" id="1">第一页</script>
    <script type='text/js-template' class="test" id="2">第二页</script>
    <script type="text/javascript">
        //1、选取元素
        var aElm=document.getElementsByTagName('a');
        var array=[].slice.call(aElm)
        var content=document.getElementById('content')
        //2、特性检测，如果支持history模式就用history，否则用hash模式
        if (history&&history.pushState) {
            window.addEventListener('popstate',handlePage);
            //劫持a元素的click事件，主要是为了更新history.state的状态以及替换url，当点击url跳转时先执行onclick再触发popstate
            array.forEach(function(v){
                v.onclick=function(event){
                    var path=event.target.hash.split("#")[1];
                    var newUrl=location.href.split('#')[0]+'\/'+path;
                    history.pushState({current:path},null,newUrl)
                }
            })
        } else {
            window.addEventListener('hashchange',handlePage);
        }
             //3、统一使用handlePage作为两种模式的事件处理器
        function handlePage(){
            if (history&&history.pushState) {
                var current=history.state&&history.state.current||'1';
                render(current)
            } else {
                var hash=location.hash||'#1';
                render(hash,true)
            }
            function render(selector,isHashMode){
                var hashMode=isHashMode&&true;
                var select='';
                if (hashMode) {
                    select=selector.split('#')[1];
                } else {
                    select=selector||history.state.current
                }
                var toPage=document.getElementById(select);
                content.innerHTML=toPage.innerHTML;
            }
        }
        handlePage();
    </script>
</body>
</html>

 

3、需要注意的地方

  • pushState的第三个参数url是不能跨域的
posted @ 2017-07-11 17:54  下雨天0090  阅读(233)  评论(0)  编辑  收藏  举报