什么是前端（js）路由器

概述

路由器是WebApp应用程序切换页面的枢纽。早起由于浏览器处理JS脚本的能力较弱，大部分逻辑和交互都在服务端完成；因此路由器这个词最早出现服务端；服务端通过客户端请求的URL解析出需要返回给客户端的HTML文档的路径，最终返回相对应HTML文档。

现在由于浏览器处理JS脚本的能力越来越强大和开发者们对客户端的性能优化以高要求及提升用户体验的实质性需求。在前端开发中，出现了路由器这个概念。

前端中的路由器是通过监听浏览器的hash值变化，从而匹配规则中相对应的网页页面路径；然后通过逻辑控制页面中多个层的显示与隐藏，这里的层其实是指的同级DIV容器，每个容器代表一个页面和拥有一个被定义的路径；这样就形成了一套规则和逻辑。

他有什么优势：

• 提升用户体验和降低维护成本
• 减少同步加载的时间和减少AJAX请求，从而减少用户在使用时的等待时长，页面加载更为流畅
• 减少页面渲染所带来的性能消耗，DOM加载其实是非常消耗资源的，页面可以进行部分异步刷新，不用重载窗口
• 开发成本降低，现在的前后端分离模式，解耦了前后紧密合作的关系，自由度更高

有优势就有劣势，开发难度增加，但是这也不算什么…

什么是浏览器hsah？

定义

hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分（从 # 号开始的部分）

例如锚点

当用户点击a标签，窗口滚动到div的位置，这就是锚点的用法；后面的“#input”是浏览器hsah部分

	// https://weui.io/#input
	
	

浏览器hsah目前只存在于客户端浏览器，不影响于服务端； 改变浏览器hash部分，不触发网页重载；但是会改变浏览器的访问历史

// 比如，访问https://weui.io/#input
// 浏览器实际发出的请求是如下这样
GET /index.html HTTP/1.1
Host：weui.io

在第一个#后面出现的任何字符，都会被浏览器解读为hash：

// 比如，访问https://weui.io/?text=#input
// 浏览器实际发出的请求是如下这样
GET /index.html?text= HTTP/1.1
Host：weui.io

如何处理这种情况：

// 将text=#input中的“#”进行encodeURIComponent('#')转码
// 编译后 https://weui.io/?text=%23input
// 浏览器实际发出的请求是如下这样
GET /index.html?text=%23input HTTP/1.1
Host：weui.io

每一次改变hash值部分，都会在浏览器的访问历史中增加一个记录，使用"后退"按钮，就可以回到上一个位置。

onhashchange事件

hashchange是H5的新特性；当hash值发生变化时，就会触发这个事件；IE10+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。

	// 该事件直接Windows监听 
	// https://weui.io/#input
	window.addEventListener("hashchange", callback, false);
	function callback(){
		console.log(location.hash); // input
	}

如何实现路由器

改变hash值，监听hash值得变化，通过逻辑处理需要显示的div层，例如：

	// 案例
	<button onclick="_router(this,'red')">点击显示红色层</button>
    <button onclick="_router(this,'blue')">点击显示蓝色层</button>
    <button onclick="_router(this,'green')">点击显示绿色层</button>

    <div id="red"><h1 style="color:red;">我是红色层</h1></div>
    <div id="blue" style="display:none;"> <h1 style="color:blue;">我是蓝色层</h1></div>
    <div id="green" style="display:none;"> <h1 style="color:green;">我是绿色层</h1></div>

    <script>
        //  监听hash变化
        window.addEventListener('hashchange', callback, false);
        function callback() {
            // 获取改变后的hsah值
            console.log(location.hash);
            // 设置当前hash对应的div层显示，其他层隐藏
            isshow(location.hash);
        }

        function _router(that, router) {
            // 修改hash值
            location.hash = router;
        }

        function isshow(router) {
            red.style.display = 'none';
            blue.style.display = 'none';
            green.style.display = 'none';
            document.getElementById(router.replace(/#/,'')).style.display = 'block';
        }
    </script>