关于javascript:今天我使用了MutationObserver

什么是MutationObserver

MutationObserver接口提供了监督对DOM树所做更改的能力。它被设计为旧的Mutation Events性能的替代品，该性能是DOM3 Events标准的一部分。

其实就是当指定的DOM发生变化时，咱们应用MutationObserver定义的办法会被执行。
如果你还没有get到点的话，不必急，上面介绍个实例。
有时候，当咱们的性能都是一些弹框类的款式，不会经常出现时，
比方账号登陆，手机登陆，重置明码，绑定手机号等等。

用户更加关注后续的业务，上述这些性能只是辅助性能，这个我的项目的首次版本中，我将所有的性能都写在了index.html中默认暗藏，大略的构造就是：

<div class = "loginPage"></div>
<div class = "phoneLoginPage"></div>
<div class = "resetpwdPage"></div>
<div class = "bindphonePage"></div>

而后在应用的时候显示进去。
这样写性能实现上没什么问题，也很好了解，
然而后续优化的时候发现，性能沉积到肯定水平，造成index.html十分的臃肿，代码外面对于图片的援用都会造成首次加载时，十分多的http申请。

自然而然我想到的解决方案 是将单个的性能都模块化，当须要时往页面中增加。我在index.html中增加一个容器，专门放下面这些性能。

<div class = "contont-div"></div>

而后每个性能一个js脚本，做成单例，当须要的时候show进去，不须要的时候hide

(function (g) {
    g.SinglePage.loginPage = (function () {
        var _$reg = null;
        return {
            show: function () {
                if (_$reg) {
                    return;
                }
                _$reg = ......
                //上面是show的具体业务逻辑省略
            },
            hide: function () {
                if (_$reg) {
                    _$reg.remove();
                }
                _$reg = null;
            }
        }
    })();
}(window))

最开始的时候，所有都很顺利，当须要登录的时候，我关上登陆，而后在其余面板关上时候敞开登陆框，然而随着性能越来越多，呈现了一个问题，我不确定我关上的面板什么时候会被敞开了。

$('.contont-div').html();

因为用的是jq的html办法往容器中增加html代码，显示上不会有什么问题，然而，当我不晓得我关上的面板什么时候敞开时，我就没法让单例销毁，造成的结果就是不是我手动敞开的单例，再也打不开了，因为，单例的实例没有被销毁。

因而应用了MutationObserver。
为了防止咱们在监测到dom发生变化时，用switch case 去找对应的单例的实例，咱们革新一下性能的html

//登陆性能
<div class = "mul_loginPage"></div>

其中mul_前面的字符串和登陆性能的脚本名称保持一致。
每个单例代码中都蕴含hide办法，用于革除实例。
其余性能同理。

 let targetNode = document.querySelector(`.contont-div`);
 let config = {
     childList: true
 };
 const mutationCallback = (mutations) => {
     for (let mutation of mutations) {
         let type = mutation.type;
         switch (type) {
             case "childList":
                 let _removeNodes = mutation.removedNodes;
                 for (let i = 0, l = _removeNodes.length; i < l; i++) {
                     let _tmpNode = _removeNodes[i];
                     let _class = $(_tmpNode).attr('class');
                     if (!_class) {
                         continue;
                     }
                     let _arg = _class.split('_');
                     var _sj = _arg[1];
                     if (_sj && g.SinglePage[_sj]) {
                         g.SinglePage[_sj].hide();
                     }
                 }
                 break;
         }
     }
 };
 let observer = new MutationObserver(mutationCallback);
 if (targetNode) {
     observer.observe(targetNode, config);
 }

这样，我就不必放心当其余单例笼罩已有单例时，被笼罩的单例不会革除实例的问题了。