显示灯箱后按需加载JavaScript

Question

我网站的每个页面都有一个按钮.单击该按钮时,会出现一个灯箱.灯箱的内容是一种依赖于包括Angular在内的多个JavaScript文件的表单.这些JavaScript文件仅用于表单,而不是网站上的其他任何地方.

为了减少页面加载时间,我的目标是仅在用户单击按钮后加载JavaScript文件.

这样做有最佳实践方法吗？我能想到的一些选择是:

1. 灯箱的内容是iframe,源html文档包含脚本标签.
2. 使用jquery.getscript方法(或类似方法)加载脚本

有没有更好的办法？

Answer 1

通过了解你的问题,你想懒惰加载你的js/css/html.您可以使用两个插件实现此目的

Require.js

优点:

1. 代码中列出的模块之间的显式依赖关系.
2. 异步模块加载.
3. 延迟(按需)模块加载.
4. 支持其中一个标准模块包装器(AMD),许多社区模块实现它,因此您的模块可以依赖它们.

缺点:

1. 我们无法动态注入AngularJS模块.这仅在需要时加载文件,即RequireJS仅加载javascript文件,但它不会在此新代码中注册新的角度模块和组件

OcLazyLoad

优点:

1. OcLazyLoad 用于加载依赖项文件,以及动态注入AngularJS模块.
2. 加载Js和Css文件毫不费力.

缺点:

1. 我们无法维护依赖文件结构.

因此,您可以使用Require.js加载代码中列出的模块之间的依赖关系并OcLazyLoad在飞行中注入Angular模块.对于你angular在飞行中关于自己的问题,我不认为在这种情况下你能做到这一点.