js页面密码锁

论后门的重要性：
在与产品争论需求的过程中，我用鼠标在手机上面轻轻的点了几下，线上项目就启动超级模式，所有人都大惊失色，那一刻我的气势提升到了顶端，所有问题都不再是问题。。。

开个玩笑，我脑子里面冒出这个想法是做移动端项目的时候，Hybrid开发模式，很多问题可能在本地浏览器调试没有问题，但是到了平台内部，比如原生APP，小程序里面就可能出问题，这时候我们怎么才能发现并解决问题呢，我们一般采用vconsole来定位问题，但是问题又来了，定位问题之后我们必须将原vconsole代码注释掉，然后再放到测试服务器上，所以调试过程就变成了，开启vconsole代码并且打包放到测试服务器注释vconsole代码并且打包放到测试服务器，来回打包放线上我觉得这个是纯粹的体力劳动啊，根本不符合我们程序员的高贵气质，那不行，我得像个法子。刚刚开始的想法是找某个不起眼的元素，连续点击10次，加载vconsole并加载，后来仔细想想，风险还是蛮高，而且操作的时候让别人看到了，别人也能学会超级模式了，那不行，我得想个法子。得有个类似与密码锁的功能才行。这个时候，Array浮现在我的脑海里面。[0,1,2,3]不就是密码锁嘛，输入0,1,2,3就开锁了，那么怎么输入呢？array.push(0)不就是输入0嘛？怎么清空密码锁呢？直接array=[]不就行了嘛,解决方案来了，那么下面贴代码(vue2.0框架):

 data: function () {
    return {
        codeLock:[],//密码锁
    }
},
//开启超级模式(生产线上必须屏蔽)
openSuperMode(){
    let _this = this
    if(_this.codeLock.toString() == [0,1,2,0,1,2,0,1,2].toString()){
        dynamicLoadResources(2,'https://cdnjs.cloudflare.com/ajax/libs/vConsole/3.2.0/vconsole.min.js',()=>{var vConsole = new VConsole()});
    }
    _this.codeLock = []
},
//输入密码
inputOpenCode(num){
    let _this = this
    _this.codeLock.push(num)
},

//动态加载方法
dynamicLoadResources(type,source,callback){
    if(!source || source.length ===0){
    throw new Error('dynamic load resources need resources');
    };
    var head = document.getElementsByTagName('head')[0];
    if(type == 1){
    var link = document.createElement('link');
    link.href = source;
    link.rel = 'stylesheet';
    link.type = 'text/css';
    head.appendChild(link);
    }else if(type == 2){
    var script = document.createElement('script');
    script.src = source;
    script.type = 'text/javascript';
    head.appendChild(script);
    script.onload = callback;
    }
}

代码说明：
data里面的codeLock就是指代密码锁，我们要在页面上面找到4个元素，3个是密码输入元素，1个是开锁元素（其实2个，4个都可以，看你喜欢，最后匹配密码锁的密码更改一下就行）在3个密码输入元素分别赋予点击事@click=“inputOpenCode(0)”,@click=“inputOpenCode(1)”,@click=“inputOpenCode(2)”,在开锁元素上面赋予点击事件@click="openSuperMode"然后输入密码，点击开锁即可开启！其实密码锁能做很多事情，开启调试模式只是其中一方面，但是建议正式生产环境不要放置，可能会留下比较明显的程序后门。