1、flex中的缩写代表什么？
- flex-grow
- flex-shrink
- flex-basis
2、slice 、splice、spilt的区别
-
slice 对数组进行截取的操作，不会影响原数组
-
splice 对数组进行增删改查的操作，会影响原数组
-
spilt 按照一定的规则将字符串切割成字符串数组
3、对hash、history模式的了解，以及如何实现
hash 请求地址#后面 hash 值的变化，并不会导致浏览器向服务器发出请求，而hash值的变化会触发hashchange这个事件，可以监听hashchange事件来实现内容的更新，但是请求地址看起来不美观。
<!DOCTYPE html>
<html lang="en">
<body>
<ul>
<ul>
<!-- 定义路由 -->
<li><a href="#/home">home</a></li>
<li><a href="#/about">about</a></li>
<!-- 渲染路由对应的页面 -->
<div id="routeView"></div>
</ul>
</ul>
</body>
<script>
let routerView = document.getElementById('routeView')
window.addEventListener('hashchange', ()=>{
let hash = location.hash;
routerView.innerHTML = hash
})
window.addEventListener('DOMContentLoaded', ()=>{
if(!location.hash){//如果不存在hash值，那么重定向到#/
location.hash="/"
}else{//如果存在hash值，那就渲染对应UI
let hash = location.hash;
routerView.innerHTML = hash
}
})
</script>
</html>
history 请求地址里没有带#号，是随着h5发布后才出现的，多了两个API：pushState和replaceState，同时需要服务器做处理，不然刷新会出现404报错。
<!DOCTYPE html>
<html lang="en">
<body>
<ul>
<ul>
<li><a href='/home'>home</a></li>
<li><a href='/about'>about</a></li>
<div id="routeView"></div>
</ul>
</ul>
</body>
<script>
let routerView = document.getElementById('routeView')
window.addEventListener('DOMContentLoaded', onLoad)
window.addEventListener('popstate', ()=>{
routerView.innerHTML = location.pathname
})
function onLoad () {
routerView.innerHTML = location.pathname
var linkList = document.querySelectorAll('a[href]')
linkList.forEach(el => el.addEventListener('click', function (e) {
e.preventDefault()
history.pushState(null, '', el.getAttribute('href'))
routerView.innerHTML = location.pathname
}))
}
</script>
</html>
