使用jQuery的load方法帮女朋友实现套娃Html

最近女朋友刚入职新公司，接到的第一个任务就是将一个网站所有的页面合并成一个页面

女朋友：我接到一个jQuery项目，有大概七八个页面，好在是静态页面，全部合一起渲染展示没有多大问题

我：挺简单的嘛

女朋友：去，虽然不难，但是每一个页面的html代码都挺多的，全部合一起太痛苦了，而且也不方便维护

我：那倒是，苦力活啊

女朋友：如果能像Vue那样组件化引入就太好了

我：这可难了，而且现在改用Vue写也来不及了啊...

说完我灵机一动，想到jQuery有个load方法好像可以实现，立马改口

我：不过用jQuery应该也可以，你看...

test1.html

<div>Html</div>

index.html

<div class="include" file="test1.html"></div>

<script>
  var forEach = Array.prototype.forEach

  function loadHtml() {
    var _includeEles = $(".include")
    forEach.call(_includeEles,function(ele,index) {
      var url = $(ele).attr("file")
      if(url){
        $(ele).load(url,function(html){
          // 将加载的html内容放入当前dom的后面，然后删除当前dom，相当于将加载的内容替换原来的标签
          $(ele).after(html).remove()
        })
      }
    })
  }
  loadHtml()
<script>

女朋友：太棒了，我试一下...

...

女朋友：你这方法用是好用，内容已经加载进来了，但不知道为什么我的轮播图不起作用了

我：是不是你轮播图初始化的顺序不对

女朋友：初始化代码明明是在加载代码之后执行的呀

我一看还真是，原来jQuery的load方法是异步执行的，初始化轮播图的时候load方法还没结束呢，轮播图自然就不起作用了

我：等等，我给你加个回调函数

function loadHtml(cb) {
  var _includeEles = $(".include")
  var len = _includeEles
  forEach.call(_includeEles,function(ele,index){
    var url = $(ele).attr("file")
    if(url){
      $(ele).load(url,function(html){
        // 将加载的html内容放入当前dom的后面，然后删除当前dom，相当于将加载的内容替换原来的标签
        $(ele).after(html).remove()
        // 循环load结束后再执行回调方法cb
        if(index === len - 1) {
          cb()
        }
      })
    }else if(index === len - 1){
      cb()
    }
  })
}

loadHtml(function() {
  // 在此处执行轮播图初始化
})

问题解决

...

第二天女朋友下班回来

女朋友：如果我想在引入的html中再引入其他html，可以吗

我：啊，这不是套娃吗

女朋友：对啊，就是套娃啊，怎么，不喜欢了？

我：a piece of cake，递归走起

说做就做

/**
* @cb           回调函数
* @invalidCount 无效地址数
*/
function loadHtml(cb, invalidCount = 0) {
  var _includeEles = $(".include")
  var len = _includeEles.length
  // 直到没有.include标签或者所有的.include标签都没有url时进行回调
  if (len === 0 || len === invalidCount) {
    cb()
    return
  }

  var forEach = Array.prototype.forEach
  forEach.call(_includeEles, function (ele, index) {
    var url = $(ele).attr("file")
    !url && invalidCount++
    if (url) {
      $(ele).load(url, function (html) {
        // 将加载的html内容放入当前dom的后面，然后删除当前dom，相当于将加载的内容替换原来的标签
        $(ele).after(html).remove()
        // 遍历结束再递归加载文件内容
        if (index === len - 1) {
          loadHtml(cb, invalidCount)
        }
      })
    } else if (index === len - 1) {
      loadHtml(cb, invalidCount)
    }
  })
}
loadHtml(function() {
  // do something
})

女朋友微微一笑，完美