search

N-ZOO / everycode

前端每日一练
163 stars 18 forks source link

请利用观察者模式（Observer）来实现一个网站登录功能 #10

Closed coxo closed 8 years ago

coxo commented 8 years ago

考虑多种登录情况，比如有验证码、有Token等情况。。。

coxo commented 8 years ago

@daxiongjun

langmao commented 8 years ago

@daxiongjun

bluesrocker commented 8 years ago 
function Publisher(){ this.subscribers = {}; }
Publisher.prototype.on = function(type, method, context){
    method = (typeof method === 'function') ? method : context[method];
    if((typeof this.subscribers[type]) === 'undefined'){
        this.subscribers[type] = [];
    }
    var alreadyExists = this.subscribers[type].some(function(obj){
        if(obj.fn===method && obj.context===context){ return true; }
    });
    if(!alreadyExists){
        this.subscribers[type].push( {'fn': method, 'context': (context || this)} );
    }
    return this;
};
Publisher.prototype.publish = function(type, arg){
    var typeArr = this.subscribers[type];
    var leng = typeArr ? typeArr.length : 0;
    typeArr.forEach(function(obj){
        obj.fn.call(obj.context, arg);
    });
    return this;
};
Publisher.prototype.remove = function(type, method, context){
    method = (typeof method === 'function') ? method : context[method];
    var typeArr = this.subscribers[type];
    var leng = typeArr ? typeArr.length : 0;
    this.subscribers[type] = typeArr.filter(function(obj){
        return !(obj.fn===method && obj.context===context);
    });
    return this;
};
function RealPublisher(node){
    this.element = node;
    Publisher.call(this);
}
RealPublisher.prototype = new Publisher();
RealPublisher.prototype.constructor = RealPublisher;

var form = document.getElementsByTagName('form')[0];
var inputs = form.querySelectorAll('input');

var inputPublishers = Array.prototype.map.call(inputs, function(input){
    return new RealPublisher(input);
});

function Td(node, type){
    this.element = node;
    this.parent = this.element.parentNode;
    this.firstSibling = this.parent.children[0];
    this.preSibling = this.element.previousElementSibling;
    this.type = type;
}
Td.prototype.changeInnerHTML = changeTdHTML;
function changeTdHTML(){
    if(this.type === 'text'){
        if(this.firstSibling.innerHTML.match(/您的帐号/)){
            var regUsername = /^[a-zA-Z][@\w\-\.]{0,18}[\w]?$/i;
            regUsername.lastIndex = 0;
            if(regUsername.test(this.preSibling.children[0].value)){
                this.element.innerHTML = ' ^_^ OK!';
            }
            else{
                this.element.innerHTML = ' ~_~ NO!';
            }
        }
        else if(this.firstSibling.innerHTML.match(/安全验证/)){
            if(this.preSibling.children[0].value === this.preSibling.children[2].innerHTML){
                this.element.innerHTML = ' ^_^ OK!';
            }
            else{
                this.element.innerHTML = ' ~_~ NO!';
            }
        }
    }
    else if(this.type === 'password'){
        var regPassword = /^[a-zA-Z][\w\-\.]{5,19}$/;
        regPassword.lastIndex = 0;
        if(regPassword.test(this.preSibling.children[0].value)){
            this.element.innerHTML = ' ^_^ OK!';
        }
        else{
            this.element.innerHTML = ' ~_~ NO!';
        }
    }
    return this;
};
var checkcodeBtn = inputs[2].nextElementSibling;
var checkcodeSpan = inputs[2].nextElementSibling.nextElementSibling;
var span = new Td(checkcodeSpan, 'checkcode');
span.changeInnerHTML = function(){
    var codeLen = 4;
    var innerHTML = "";
    for(var i=0; i<codeLen; i++){
        innerHTML += String(parseInt(Math.random()*9.99));
    }
    this.element.innerHTML = innerHTML;
    return this;
};
var generalPublisher = new Publisher();
generalPublisher.on('getCheckcode', 'changeInnerHTML', span);
generalPublisher.publish('getCheckcode');
checkcodeBtn.onclick = function(){
    generalPublisher.publish('getCheckcode');
}
var td1 = new Td(inputs[0].parentNode.nextElementSibling, 'text');
var td2 = new Td(inputs[1].parentNode.nextElementSibling, 'password');
var td3 = new Td(inputs[2].parentNode.nextElementSibling, 'text');
var td4 = new Td(inputs[3].parentNode.nextElementSibling, 'submit');
td4.changeInnerHTML = function(){
    var users = [{name:'bailnl', password:'a000000'}, 
                      {name:'vojoy', password:'b111111'}, 
                      {name:'coxo', password:'c222222'}, 
                      {name:'bluesrocker', password:'d333333'}];
    var nameIsExist = users.some(function(userMsg, i, users){
        return userMsg.name === inputs[0].value;
    });
    var passwordIsTrue = users.some(function(userMsg, i, users){
        return (userMsg.name === inputs[0].value && userMsg.password === inputs[1].value);
    });
    var msgAllTrue = users.some(function(userMsg, i, users){
        return (userMsg.name === inputs[0].value && 
                      userMsg.password === inputs[1].value && 
                      checkcodeSpan.innerHTML === inputs[2].value);
    });
    if(!nameIsExist){
        this.element.innerHTML = '帐号不存在';
    }
    else if(!passwordIsTrue){
        this.element.innerHTML = '密码不正确';
    }
    else if(!(checkcodeSpan.innerHTML === inputs[2].value)){
        this.element.innerHTML = '验证码有误';
    }
    else if(msgAllTrue===true){
        this.element.innerHTML = '欢迎加入海天盛宴';
        //可正式转入登录后的页面;
    }
    return this;
};
var tds = [td1, td2, td3, td4];
for(var i=0, len=inputs.length; i<len-1; i++){
    inputPublishers[i].on('blur', 'changeInnerHTML', tds[i]);
    inputPublishers[i].element.onblur = (function(i){
        return function(){ inputPublishers[i].publish('blur'); }
    }(i));
}
inputPublishers[3].on('clickSubmit', 'changeInnerHTML', tds[3]);
inputPublishers[3].element.onclick = function(){
    inputPublishers[3].publish('clickSubmit');
}

<table id='userLoginT'>
<thead><tr><th colspan="2">敬请贵宾参加海天盛宴</th></tr></thead>
<tbody>
    <tr>
        <td>您的帐号:</td>
        <td><input type="text" name="username" id="username" value="" maxlength="20" autofocus /></td>
        <td></td>
    </tr>
    <tr>
        <td>您的密码:</td>
        <td><input type="password" name="userpassword" id="userpassword" value="" maxlength="20" /></td>
        <td></td>
    </tr>
    <tr>
        <td>安全验证:</td>
        <td>
            <input type="text" name="checkcode" id="checkcode" value="" />
            <button type="button">取验证码</button>
            <span></span>
        </td>
        <td></td>
    </tr>
    <tr>
        <td>请您点击:</td>
        <td><input type="button" value="请您入场" /></td><!--"submit" name="submit" id="submit"-->
        <td></td>
    </tr>
</tbody>
</table>

VaJoy commented 8 years ago

问题描述不够具体，也较重，不适合出在everycode，关闭