H5 Hash模式是一种前端路由的实现方式,其基本原理是将路由的路径通过“#”拼接在真实url后面。在这种模式下,当“#”后的路径发生变化时,浏览器并不会重新发起请求,而是会触发onhashchange事件。通过监听hash的改变,可以实现无刷新跳转的功能。
以下是一个简单的H5 Hash模式的例子:
<!DOCTYPE html> ?
<html lang="en"> ?
<head> ?
? ? <meta charset="UTF-8"> ?
? ? <meta name="viewport" content="width=device-width, initial-scale=1.0"> ?
? ? <meta http-equiv="X-UA-Compatible" content="ie=edge"> ?
? ? <title>Document</title> ?
</head> ?
<body> ?
? ? <button id="btn">按钮</button> ?
? ? <div id="div1"></div> ?
? ? <script> ?
? ? ? ? let oBtn = document.getElementById('btn'); ?
? ? ? ? let oDiv = document.getElementById('div1'); ?
? ? ? ? let obj = {}; ?
? ? ? ? oBtn.onclick = function() { ?
? ? ? ? ? ? var number = randomNum(35, 7); ?
? ? ? ? ? ? oDiv.innerHTML = number; ?
? ? ? ? ? ? var MRN = Math.random(); ?
? ? ? ? ? ? obj[MRN] = number; ?
? ? ? ? ? ? window.location.hash = MRN; ?
? ? ? ? } ?
? ? ? ? window.onhashchange = function() { ?
? ? ? ? ? ? var number = obj[window.location.hash.substring(1)] || ''; ?
? ? ? ? ? ? oDiv.innerHTML = number; ?
? ? ? ? } ?
? ? ? ? function randomNum(alls, now) { ?
? ? ? ? ? ? var arr = []; ?
? ? ? ? ? ? var newArr = []; ?
? ? ? ? ? ? for (var i = 1; i <= alls; i++) { ?
? ? ? ? ? ? ? ? arr.push(i); ?
? ? ? ? ? ? } ?
? ? ? ? ? ? for (var i = 0; i < now; i++) { ?
? ? ? ? ? ? ? ? newArr.push(arr.splice(Math.floor(Math.random() * arr.length), 1)); ?
? ? ? ? ? ? } ?
? ? ? ? ? ? return newArr; ?
? ? ? ? } ?
? ? </script> ?
</body> ?
</html>
在这个例子中,我们首先创建了一个按钮和一个div元素。当点击按钮时,会触发onclick事件,该事件会生成一个随机数,并将其显示在div元素中。同时,会将这个随机数通过哈希值保存到window.location.hash中。然后我们监听了hashchange事件,当hash值变化时,就会获取新的随机数并显示在div元素中。