前言

layui我已经使用好几年了，我们都知道layui已经内置了JQuery等常用组件，只需要在初始化后就能直接使用，我之前一直都没用到过JQuery相关的插件，所以也没思考过这个问题，今天在写api接口系统的时候前端是bootstrap则需要加载bootstrap.min.js才能使用能多的方法，如导航栏下拉、弹窗等，都需要加载这个文件，然而这个js依赖JQuery，正常来用的话是需要先加载JQuery再加载bootstrap.min.js才能正常使用，上面也说了，layui已经内置了JQuery，如果再加载一次就是重复的了，也会影响速度、性能等方面，那么如何才能使layui内置的JQuery再全局都可使用呢？

了解JQuery

当我们导入jQuery时，jQuery仅向window这个全局空间注入两个变量：

window.$ = window.jQuery = { jQuery object };

这时就可以在全局中使用$和jQuery来使用JQuery的内置方法了

解决方案

我们平常使用layui：

<script>
    layui.use(['layer', 'form'], function () {
        const layer = layui.layer, form = layui.form;
        layer.msg('Hello World');
    });
</script>

加载layui内置的JQuery：

<script>
    layui.use(['layer', 'form'], function () {
        const layer = layui.layer, form = layui.form, $ = layui.jquery;
        layer.msg('Hello World');
    });
</script>

此时我们在layui.use里引入的组件都是局部的，也就是说外部其他依赖JQuery的js 使用不了内部的组件，上面在JQuery里讲了，在引入JQuery文件后会向window自动导入JQuery的变量，同理，我们手动导入即可。

<script>
    layui.use(['layer', 'form'], function () {
        const layer = layui.layer, form = layui.form, $ = layui.jquery;
        window.jQuery = $;
        layer.msg('Hello World');
    });
</script>

此时就可以在全局的js中使用layui内置的JQuery方法了，但是layui.use该回调会在 html 文档加载完毕后再执行，那么在依赖JQuery的js文件，肯定是不管放在layui的前后都是使用不了JQuery的，解决方法就是在layui.use加载完成后再加载所需要引入的js文件即可，完整代码：

<script>
    layui.use(['layer', 'form'], function () {
        const layer = layui.layer, form = layui.form, $ = layui.jquery;
        window.jQuery = $;
        addScript("/Static/bootstrap/3.3.7/js/bootstrap.min.js");
        function addScript(url) {
            const script = document.createElement('script');
            script.setAttribute('type', 'text/javascript');
            script.setAttribute('src', url);
            document.getElementsByTagName('head')[0].appendChild(script);
        }
        layer.msg('Hello World');
    });
</script>