h5 Hash模式 是什么

2023-12-31 08:43:22

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元素中。

文章来源:https://blog.csdn.net/zz_ll9023/article/details/135232147
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。