pill静态站点动态加载内容的方案
pill 是一个小巧的为了解决静态站点，web 内容加载问题，通过拦截js 的一些事件通过执行fetch 解决问题
原理说明
- 拦截导航事件（链接的点击，以及历史导航）
- 通过fetch 加载请求
- 获取加收到的html 内容
- 替换当前页面的内容
用途
解决我们单页面应用资源加载的问题（还是希望实现动态内容加载，类似微前端的灵活管理需求）
使用
- 参考html
<html>
<head>
<title>Home</title>
<script src="https://unpkg.com/pill@1/dist/pill.min.js"></script>
<style>
/* global styles */
#indicator {
position: fixed;
top: 0;
right: 0;
display: none;
}
</style>
</head>
<body>
<div id="indicator">Loading
<div id="content">
<style>/* page styles */</style>
<!-- page content here -->
</div>
<script>
const indicator = document.querySelector('#indicator')
pill('#content', {
onLoading() {
// Show loading indicator
indicator.style.display = 'initial'
},
onReady() {
// Hide loading indicator
indicator.style.display = 'none'
}
})
</script>
</body>
</html>
- 提供的方法
标准调用方法签名
(selector:string, options:PillOptions) -> void
钩子：onError() , onLoading(), onMouting(), onReay()
几个其他配置选项：
fromError() 可以用来自定义错误
getKetFromUrl() 通过url 或者加载的key
shouldReload() 决定上次加载的资源是否需要从server 获取
shouldServe() 处理内容对于连接的处理，是使用原生的还是使用pill提供的
- 官方的一个demo
项目结构
代码概述：
说明
pill 的原理并不难，但是实现的功能确实比较实用的，我们就可以实现类似next.js 以及nuxt.js 的功能，但是需要的东西更少
实际上早期我们可能都会使用ajax+ template 的机制，进行占位内容的替换，pill增强了基于ajax+template 的能力，基于此我们
可以方便的融合多中框架，实现一个简单的基于客户端的微前端方案，同时结合下basket.js也是一个很好的使用
参考资料
https://github.com/rumkin/pill
https://github.com/addyosmani/basket.js
