防止页面中js文件重复引入报错问题解决方法浅谈

今天使用layerUI做页面布局，index主页面嵌套子页面，因为在子页面中重复引入layui.js，layerui上传图片事件导致前台页面报错——layer is not a valid module；

该错误也可能是引入的jquery放在了layui.js后面导致报错；

百度寻得解决方法如下：

//防止    layui.js  重复引入 
function importOnceJs(scriptPath) {
    var scripts = document.getElementsByTagName("script");
    for (var index = 0; index < scripts.length; index++) {
      if (scripts[index].src.lastIndexOf(scriptPath) != -1) {
        return;
      }
    }
    var scriptTag = document.createElement("script");
    scriptTag.type = "text/javascript";
    scriptTag.src = scriptPath;
    scriptTag.charset = "utf-8";
    var headTag = document.getElementsByTagName("head")[0];
    headTag.appendChild(scriptTag);
  }

类比推出防止css重复引入方法：

//防止    layui.css  重复引入 
function importOnceCss(linkPath) {
    var links = document.getElementsByTagName("link");
    for (var index = 0; index < links.length; index++) {
      if (links[index].href.lastIndexOf(linkPath) != -1) {
        return;
      }
    }
    var linkTag = document.createElement("link");
    linkTag.rel = "stylesheet";
    linkTag.href = linkPath;
    linkTag.media = "all";
    var headTag = document.getElementsByTagName("head")[0];
    headTag.appendChild(linkTag);
  }

方法调用
importOnceJs("../layui/layui.js");
importOnceCss("../layui/css/layui.css");

使用该方法需要将该部分JavaScript代码放在head标签中，页面加载自上而下，不影响layerjs其他方法渲染

以上拙见若有不足之处还望各位大神批评指正

转载于:https://my.oschina.net/xiaohuoer1995/blog/1600171