javascript问题求解惑

Question

《javascript设计模式与开发实践中》 单例模式有一段代码如下

    var createLoginDiv = (function () {
      var div
      return function () {
        if (!div) {
          div = document.createElement('div')
          div.innerHTML = '我是登录框'
          div.style.display = 'none'
          document.body.appendChild(div)
        }
        return div
      }
    })()
    
    document.querySelector('#btn').onclick = () => {
        var loginLayer = createLoginDiv()
        loginLayer.style.display = 'block'
    }

1.页面初始化的时候dom节点为什么没有被创建？
2.为什么执行createLoginDiv()这个函数会创建登录框呢?

Answer 1

//把上面的方法稍微分解下，你应该可以看的很明白了。

var anonFun = function () {
      var div
      return function () {
        if (!div) {
          div = document.createElement('div')
          div.innerHTML = '我是登录框'
          div.style.display = 'none'
          document.body.appendChild(div)
        }
        return div
      }
  };

var createLoginDiv = anonFun();//执行anonFun函数，返回创建div的函数，就是return后的匿名函数。

document.querySelector('#btn').onclick = () => {
        var loginLayer = createLoginDiv();//调用创建div的函数，div 在这个时候被初始化。这个时候登录框已经插入到dom树中了，只不过是隐藏的。
        loginLayer.style.display = 'block'//把隐藏的显示出来。
    }

1：页面初始化的时候dom节点为什么没有被创建？

页面初始化的时候，创建div的函数没有被调用，在按钮点击的时候才会被调用。

2:为什么执行createLoginDiv()这个函数会创建登录框呢?

createLoginDiv（）这个函数是真正创建登录框和div的函数，所以执行后就创建了。

你的代码用到了闭包，关于闭包，可以参考我以前学习闭包整理的文章：闭包整理

Answer 2

div = document.createElement(div) 应该是 div = document.createElement('div')吧

Answer 3

1.页面初始化的时候createLoginDiv是个立即执行函数，返回一个创建div的函数，但这个函数没有执行；
2.createLoginDiv()，相当于上面返回的创建div的函数执行。

Answer 4

1、div = document.createElement(div) 这句在动态的创建登录框，
document.body.appendChild(div)这句是吧创建的标签添加到body里面
2、标签名为undefined是 这句话应该这样写： div = document.createElement("div");//标签要带引号