javascript进阶学习：js的单例模式

在实际的项目开发中，很多时候需求我们会选择采用最简单的方法去处理，比如：点击按钮展示与隐藏模态框，这个需求最容易想到的实现方法就是通过点击事件，不断地创建与销毁。实际开发中，这种最简单的方法往往非常的损耗性能。

1、单例模式

顾名思义，单例模式就是指的单一的实例开发模式，通俗的理解就是：针对上面提及到的，按照单例设计模式实现就是整个过程只创建一次模态框，然后通过函数去操控让他显示与隐藏起来。

js代码.png

1.1、示例代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title></title>
    <style type="text/css">
        .div-style {
            width: 600px;
            height: 600px;
            left: 50%;
            margin-left: -300px;
            top: 50%;
            margin-top: -300px;
            position: absolute;
            background-color: #e5e5e5;
            z-index: 999;
        }
    </style>
</head>

<body>
    <button id="btn">点击</button>
</body>
<script type="text/javascript">
    // 判断创建的次数
    var dialogFn = (function () {
        var div;
        return function () {
            if (!div) {
                // div不存在表示是第一次，则创建节点
                div = document.createElement('div');
                document.body.append(div);
                // 创建div后添加样式类
                div.setAttribute('class', 'div-style')
                // 创建后显示
                divShow();
            } else {
                // 已经存在的话，就只需要判断是否显示隐藏
                div.style.display == 'block' ? divHidden() : divShow();
            }
            function divShow() {
                div.style.display = 'block';
            }
            function divHidden() {
                div.style.display = 'none';
            }
        }
    })()

    var btn = document.querySelector('#btn');
    btn.addEventListener('click', function () {
        dialogFn()
    })
</script>

</html>

1.2、思路

新建时判断全局是否存在该节点，如果有，就直接返回该节点进行操作，没有就创建一个新的再返回去操作。

1.3、函数表达式和函数声明的区别

函数表达式：

var fn = function(){
  // 函数体
}

函数声明：

function fn(){
  // 函数体
}

这二者之间也是与一些比较微妙的区别的，函数声明与var声明变量一样，也存在函数提升，也就是说，每次一执行script脚本时，就会把有函数声明的先提前面，但是也仅仅是提升它的函数声明而已。而函数表达式则与函数声明式不同，它是只有当解析到这个位置了才会执行这段代码。

1.4、顺便解释下es6中的“暂存性死区”

es6在es5的基础上添加了let和const两个块级变量声明，而var是存在变量提升的，也就是如下代码：

var count = 10;

会在全局作用域的顶部进行如下操作：

var count;

这个时候是能拿到的，只是undefined

而let 和const 的话，他们在脚本执行的时候，会将这些方式声明的变量存储在一个区域中，也就是“暂时性死区”，存在这里，当脚本执行到这个变量位置时，就会把这些变量从死区中“捞出来”。

同时需要注意的是，const声明的变量需要明确一点的是，它是声明的常量，也就是不能修改的，但是，注意这个不能修改的是指的不能修改它的绑定目标，而不是绑定目标的内容。如下示例代码：

    const obj = {
        name:'小陈',
        addr:'上海'
    }

    obj.addr='北京'

    console.log(obj);

image.png

而一旦修改它的绑定目标，那便会出现报错，如下：

    const obj = {
        name:'小陈',
        addr:'上海'
    }

    obj = {
        name:'小李',
        addr:'长沙'
    }

    console.log(obj);