白云苍狗
·
Pjax 下动态加载插件方案
💡
原文中文，约3900字，阅读约需10分钟。
📝
内容提要
在静态网站中使用Pjax动态更新页面时，应注意不同插件可能导致资源浪费。建议手动比较新旧DOM，动态插入所需脚本，并在页面卸载时移除事件监听。通过约束代码块格式，确保加载和卸载时执行相应操作。
🎯
关键要点
- 在静态网站中使用Pjax动态更新页面时，需注意不同插件可能导致资源浪费。
- 建议手动比较新旧DOM，动态插入所需脚本，并在页面卸载时移除事件监听。
- 通过约束代码块格式，确保加载和卸载时执行相应操作。
- JavaScript脚本应放在body后，使用[data-reload-script]属性标识需要动态加载的脚本。
- 需要手动初始化插件，判断是引入的脚本还是代码块。
- 使用Promise.all确保所有脚本加载完成后再执行依赖的代码块。
- 在页面卸载时需移除全局事件监听，使用DynamicPlugin管理加载和卸载操作。
- Head部分处理相对简单，通过对比新旧Head判断需要新增或删除的标签。
❓
延伸问答
在使用Pjax时，如何避免资源浪费？
应手动比较新旧DOM，动态插入所需脚本，并在页面卸载时移除事件监听。
动态加载脚本时，如何标识需要加载的脚本？
可以在script标签中使用[data-reload-script]属性来标识需要动态加载的脚本。
如何确保所有脚本加载完成后再执行依赖的代码块？
使用Promise.all确保所有脚本加载完成后再执行依赖的代码块。
在页面卸载时，如何处理全局事件监听？
需要在页面卸载时移除全局事件监听，可以使用DynamicPlugin管理加载和卸载操作。
如何处理页面的Head部分？
通过对比新旧Head，判断需要新增或删除的标签。
如何初始化动态加载的插件？
需要手动初始化插件，判断是引入的脚本还是代码块，并执行相应操作。
➡️
