zoukankan      html  css  js  c++  java
  • pill静态站点动态加载内容的方案

    pill 是一个小巧的为了解决静态站点,web 内容加载问题,通过拦截js 的一些事件通过执行fetch 解决问题

    原理说明

    1. 拦截导航事件(链接的点击,以及历史导航)
    2. 通过fetch 加载请求
    3. 获取加收到的html 内容
    4. 替换当前页面的内容

    用途

    解决我们单页面应用资源加载的问题(还是希望实现动态内容加载,类似微前端的灵活管理需求)

    使用

    • 参考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>
        <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

  • 相关阅读:
    PHP 文件上传下载
    php文件类型MIME对照表
    如何书写安全的PHP代码
    wordpress顶部空白解决方案
    PHP发送邮件
    UTF8下面截取中文字符。
    dedecms 5.5 实现tag分页伪静态
    PHP MySQL 函数
    php异步调用
    归并排序及序列逆序数
  • 原文地址:https://www.cnblogs.com/rongfengliang/p/12496132.html
Copyright © 2011-2022 走看看