JSP页面layui弹出层失效问题

前两天写了一个个人网站，使用了layui的组件，其中有一些坑和大家说一下。

1.导入的问题

1. 首先layui的导入，必须jqery在前，layui.js在后，自己编写的js文件应该在最后，否则会导致弹出层失效的问题.
2. 建议将自己编写的js文件myStyle.js放入整个页面的最下方，也就是body的上面，因为有时候自己写的js文件需要获取页面的元素来监听，可能导致事件已经启动，但页面未加载完，元素为空的情况，导致js效果等不出现的问题。
3. jQuery>layui.js>common.js>myStyle.js
4. 最好的方式就是将script文件全部放入页面的最后。
   
   

2.myScript.js引入layui的问题

我这里使用layui组件写了一个按钮，并设置它的点击事件为οnclick="welcome()"

而我在js中的代码出现了问题，一直弹不出layer的消息弹窗。

这是我的运行结果：

发现layer对象是存在的，但是方法却没有得到执行，在重新思考过后换了一个方式编写，于是便解决了问题。

对于layui组件的引用，最好采用模块中引用方法的方式，而不是在方法中引用模块。

3.浏览器缓存导致弹出层失效的问题

<!--前端代码 -->
<div class="main layui-anim-fadeout">
        <div class="main-img1">
            <img src="./static/img/web-logo.png" alt="图片正在加载">
        </div>
        <div class="main-img2">
            <img src="./static/img/story-logo.png" alt="图片正在加载">
        </div>
        <div class="welcome_btn animated bounce">
            <div class="layui-btn layui-btn-lg layui-btn-radius " onclick="welcome()">WELCOME!</div>
        </div>
        <div class="introduce">
            <a href="#introduce" id="introduce1"></a>
        </div>
    </div>

//js部分代码
function welcome() {
    layui.use('layer', function () {
        var layer = layui.layer;
        layer.msg("感谢有你的陪伴!  嘿嘿>=<", {offset: '500px'});
    });
}

我把js改成

function welcome() {
    layui.use('layer', function () {
        var layer = layui.layer;
        layer.msg("1");
    });
}

发现浏览器还是弹出 感谢有你的陪伴! 嘿嘿>=< 字样，删除了js代码后还是会有这个弹窗，在多次尝试后，发现浏览器会有缓存，在我关闭浏览器后才弹出1的弹窗。

所以关闭浏览器或者更换浏览器可以解决上述问题。