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
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
· 全程不用写代码，我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· 记一次.NET内存居高不下排查解决与启示
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· .NET10 - 预览版1新功能体验（一）
2018-03-15 nginx 支持ie 6 等低版本https 的配置