利用Pjax下载动态加载插件方案分享

 更新时间:2022年09月29日 08:41:43   作者:游侠好梦  
在纯静态网站里,有时候会动态更新某个区域往会选择 Pjax(swup、barba.js)去处理。本文主要和大家分享下Pjax下载动态加载插件方案,感兴趣的可以了解一下

在纯静态网站里,有时候会动态更新某个区域往会选择 Pjax(swup、barba.js)去处理,他们都是使用 ajax 和 pushState 通过真正的永久链接,页面标题和后退按钮提供快速浏览体验。

但是实际使用中可能会遇到不同页面可能会需要加载不同插件处理,有些人可能会全量选择加载,这样会导致加载很多无用的脚本,有可能在用户关闭页面时都不一定会访问到,会很浪费资源。

解决思路

首先想到的肯定是在请求到新的页面后,我们手动去比较当前 DOM 和 新 DOM 之间 script 标签的差异,手动给他插入到 body 里。

处理 Script

一般来说 JavaScript 脚本都是放在 body 后,避免阻塞页面渲染,假设我们页面脚本也都是在 body 后,并在 script 添加 [data-reload-script] 表明哪些是需要动态加载的。

首先我们直接获取到带有 [data-reload-script] 属性的 script 标签:

// NewHTML 为 新页面 HTML
const pageContent = NewHTML.replace('<body', '<div id="DynamicPluginBody"').replace('</body>', '</div>');
let element = document.createElement('div');
element.innerHTML = pageContent;
const children = element.querySelector('#DynamicPluginBody').querySelectorAll('script[data-reload-script]');

然后通过创建 script 标签插入到 body

children.forEach(item => {
    const element = document.createElement('script');
    for (const { name, value } of arrayify(item.attributes)) {
        element.setAttribute(name, value);
    }
    element.textContent = item.textContent;
    element.setAttribute('async', 'false');
    document.body.insertBefore(element)
})

如果你的插件都是通过 script 引入,且不需要执行额外的 JavaScript 代码,只需要在 Pjax 钩子函数这样处理就可以了。

执行代码块

实际很多插件不仅仅需要你引入,还需要你手动去初始化做一些操作的。我们可以通过 src 去判断是引入的脚本,还是代码块。

let scripts = Array.from(document.scripts)
let scriptCDN = []
let scriptBlock = []

children.forEach(item => {
    if (item.src)
        scripts.findIndex(s => s.src === item.src) < 0 && scriptCDN.push(item);
    else
        scriptBlock.push(item.innerText)
})

scriptCDN 继续通过上面方式插入到 body 里,然后通过 eval 或者 new Function 去执行 scriptBlock 。因为 scriptBlock 里的代码可能是会依赖 scriptCDN 里的插件的,所以需要在 scriptCDN 加载完成后在执行 scriptBlock 。

const loadScript = (item) => {
    return new Promise((resolve, reject) => {
        const element = document.createElement('script');
        for (const { name, value } of arrayify(item.attributes)) {
            element.setAttribute(name, value);
        }
        element.textContent = item.textContent;
        element.setAttribute('async', 'false');
        element.onload = resolve
        element.onerror = reject
        document.body.insertBefore(element)
    })
}

const runScriptBlock = (code) => {
    try {
        const func = new Function(code);
        func()
    } catch (error) {
        try {
            window.eval(code)
        } catch (error) {
        }
    }
}

Promise.all(scriptCDN.map(item => loadScript(item))).then(_ => {
    scriptBlock.forEach(code => {
        runScriptBlock(code)
    })
})

卸载插件

按照上面思去处理之后,会存在一个问题。 比如:我们添加了一个 全局的 'resize' 事件的监听,在跳转其他页面时候我们需要移除这个监听事件。

这个时候我们需要对代码块的格式进行一个约束,比如像下面这样,在初次加载时执行 mount 里代码,页面卸载时执行 unmount 里代码。

<script data-reload-script>
    DynamicPlugin.add({
        // 页面加载时执行
        mount() {
            this.timer = setInterval(() => {
                document.getElementById('time').innerText = new Date().toString()
            }, 1000)
        },
        // 页面卸载时执行
        unmount() {
            window.clearInterval(this.timer)
            this.timer = null
        }
    })
</script>

DynamicPlugin 大致结构:

let cacheMount = []
let cacheUnMount = []
let context = {}

class DynamicPlugin {
    add(options) {
        if (isFunction(options))
            cacheMount.push(options)

        if (isPlainObject(options)) {
            let { mount, unmount } = options
            if (isFunction(mount))
                cacheMount.push(mount)
            if (isFunction(unmount))
                cacheUnMount.push(unmount)
        }

        // 执行当前页面加载钩子
        this.runMount()
    }

    runMount() {
        while (cacheMount.length) {
            let item = cacheMount.shift();
            item.call(context);
        }
    }

    runUnMount() {
        while (cacheUnMount.length) {
            let item = cacheUnMount.shift();
            item.call(context);
        }
    }
}

页面卸载时调用 DynamicPlugin.runUnMount()。

处理 Head

Head 部分处理来说相对比较简单,可以通过拿到新旧两个 Head,然后循环对比每个标签的 outerHTML,用来判断哪些比是需要新增的哪些是需要删除的。

结尾

本文示例代码完整版本可以 参考这里

到此这篇关于利用Pjax下载动态加载插件方案分享的文章就介绍到这了,更多相关Pjax下载动态加载插件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序通过点击事件传参(data-)的操作示例

    微信小程序通过点击事件传参(data-)的操作示例

    微信小程序可以通过直接写 data-index="1" 进行数据的绑定 ,利用 bindtap 点击事件执行函数从而获取到参数信息,本文给大家介绍微信小程序通过点击事件传参(data-)的操作,感兴趣的朋友一起看看吧
    2023-12-12
  • javascript实现网页端解压并查看zip文件

    javascript实现网页端解压并查看zip文件

    昨天给大家分享了在网页端使用zip.js插件实现在线压缩文件的代码,今天给大家分享一下javascript实现网页端解压并查看zip文件的方法,非常的实用,有需要的小伙伴可以参考下
    2015-12-12
  • js 数组克隆方法 小结

    js 数组克隆方法 小结

    在JS中,对于对象类型的变量的引用是通过类似C之类的“指针”的方式来操作的,及如果多个变量引用同一个对象,则任意一个变量对对象的操作都会影响到其它的变量。
    2010-03-03
  • 基于JavaScript实现简单抽奖功能代码实例

    基于JavaScript实现简单抽奖功能代码实例

    这篇文章主要介绍了基于JavaScript实现简单抽奖功能代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-10-10
  • layui框架table 数据表格的方法级渲染详解

    layui框架table 数据表格的方法级渲染详解

    今天小编就为大家分享一篇layui框架table 数据表格的方法级渲染详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • JS隐藏参数post传值实例

    JS隐藏参数post传值实例

    JS隐藏参数post传值实例,需要的朋友可以参考一下
    2013-04-04
  • 微信小程序实现答题倒计时

    微信小程序实现答题倒计时

    这篇文章主要为大家详细介绍了微信小程序实现答题倒计时,自定义计时器功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-09-09
  • 通过JS运行机制的角度说说作用域

    通过JS运行机制的角度说说作用域

    这篇文章主要给大家介绍了如何通过JS运行机制的角度说说作用域的相关资料,文中通过图文介绍的非常详细,对大家的学习或者使用JS作用域具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • electron中使用bootstrap的示例代码

    electron中使用bootstrap的示例代码

    这篇文章主要介绍了electron中使用bootstrap的示例代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • 微信小程序获取公众号文章列表及显示文章的示例代码

    微信小程序获取公众号文章列表及显示文章的示例代码

    这篇文章主要介绍了微信小程序获取公众号文章列表及显示文章的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-03-03

最新评论