Nos últimos dois dias, estudei os efeitos das postagens do Weibo da Tencent e gostaria de compartilhá-los.
Antes de compartilhar aqui, gostaria de falar sobre meus hábitos de codificação. Muitas pessoas me perguntarão por que não escrevo componentes na forma de Jquery, já que uso o framework jquery. Minha resposta na época foi: todo mundo tem seus próprios hábitos ao escrever código. Mas o que quero expressar mais é: pessoalmente, sinto que esse tipo de codificação tem uma grande vantagem. Não sou muito dependente do framework Jquery, porque empresas diferentes têm frameworks diferentes. Por exemplo, o framework Kissy usado no Taobao. A estrutura Alipay usada no Alipay Baidu usa a estrutura Baidu e a Tencent possui a estrutura js front-end da Tencent se meu código for muito dependente de jquery. E se outras pessoas quiserem usar meu código ou eu quiser trabalhar em um projeto Tencent um dia, mas elas exigirem que usemos apenas sua estrutura JS e tenhamos essa função? Então, se eu confiar totalmente na forma de codificação do jquery, preciso codificá-la novamente agora? Se você codificar de acordo com o método de codificação atual, usará apenas o seletor jquery. Contanto que você altere o seletor, outros códigos poderão ser usados diretamente. Pessoalmente, sinto que, como desenvolvedor front-end profissional, você não deve apenas saber um pouco de jquery para fazer coisas, mas também considerar escrever código de alta qualidade. Talvez escrever código simples com jquery também possa fazer algo bem, mas é. existe alguma Considerando que se um dia uma determinada função for adicionada à demanda, você terá que alterar o código novamente? Podemos reescrever novas funções com base nas anteriores? Não há necessidade de alterar o código!
O que é código de alta qualidade?
Pessoalmente, acho que os seguintes pontos devem ser atendidos:
1. Escalabilidade.
2. Capacidade de manutenção.
3. Legibilidade e facilidade de uso.
4. Desempenho JS.
O mais importante é atender aos pontos acima.
Ok, chega de bobagens! Mudando de assunto, o efeito de postar no Weibo é simples. Claro, o Tencent tem algumas funções complexas para postar no Weibo, como adicionar emoticons, etc., mas não foi feito assim no momento (a carga de trabalho é relativamente). grande).
O código JS que escrevi abaixo precisa prestar atenção em dois pontos:
1. Todo mundo está dizendo que um item será adicionado à lista após cada publicação. Atualmente, não há solicitação ajax enviada e não há registro em segundo plano, portanto, atualizar a página irá limpá-la.
2. O horário é baseado no horário do cliente. Se o horário do cliente estiver errado, o horário também será afetado.
Na verdade, a ideia é muito simples. Você pode entender apenas olhando o efeito acima, então não vou entrar em detalhes aqui! Ou fornecerei uma demonstração compactada abaixo. Você mesmo pode baixá-la e ver o efeito! Um retorno de chamada é fornecido como extensão após cada publicação! Claro, quando o mouse se move para um item, um botão de exclusão aparecerá e um item poderá ser excluído à vontade. Não há muito a dizer se você postar o código diretamente!
O código HTML é o seguinte:
Copie o código do código da seguinte forma:
<div id="msgBox">
<formulário>
<h2>Venha, me diga o que você está fazendo e o que está pensando</h2>
<div>
<input id="nomedeusuário" valor="" />
<p id="cara">
<img src="img/face1.gif" />
<img src="img/face2.gif" />
<img src="img/face3.gif" />
<img src="img/face4.gif" />
<img src="img/face5.gif" />
<img src="img/face6.gif" />
<img src="img/face7.gif" />
<img src="img/face8.gif" />
</p>
</div>
<div>
<textarea id="conBox"></textarea>
</div>
<div>
<p>
<span>Também é possível inserir</span><strong>140</strong><span> caracteres</span>
<input id="sendBtn" type="button" value="" />
</p>
</div>
</form>
<div>
<h3><span>Todo mundo está falando</span></h3>
<ul id="lista-msg"></ul>
</div>
</div>
O código CSS é o seguinte:
Copie o código do código da seguinte forma:
corpo,div,h2,h3,ul,li,p{margem:0;preenchimento:0;}
a{decoração de texto:none;}
a:hover{text-decoration:underline;}
ul{tipo de estilo de lista:none;}
corpo{cor:#333;fundo:#3c3a3b;fonte:12px/1.5 /5b8b/4f53;}
#msgBox{largura:500px;fundo:#fff;raio da borda:5px;margem:10px automático;padding-top:10px;}
#msgFormulário da caixa h2{peso da fonte:400;fonte:400 18px/1.5 /5fae/8f6f/96c5/9ed1;}
#msgFormulário da caixa{fundo:url(img/boxBG.jpg) repita-x 0 inferior;preenchimento:0 20px 15px;}
#userName,#conBox{cor:#777;borda:1px sólido #d0d0d0;raio da borda:6px;fundo:#fff url(img/inputBG.png) repetição-x;preenchimento:3px 5px;fonte:14px/1.5 arial;}
#userName.active,#conBox.active{borda:1px sólido #7abb2c;}
#userName{altura:20px;}
#conBox{largura:448px;redimensionar:nenhum;altura:65px;overflow:auto;}
#msgFormulário Box div{posição:relativa;cor:#999;margem superior:10px;}
#msgBox img{raio da borda:3px;}
#face{posição:absoluta;topo:0;esquerda:172px;}
#face img{float:esquerda;display:inline;largura:30px;altura:30px;cursor:ponteiro;margem direita:6px;opacidade:0,5;filtro:alfa(opacidade=50);}
#face img.hover,#face img.current{largura:28px;altura:28px;borda:1px sólido #f60;opacidade:1;filtro:alfa(opacidade=100);}
#sendBtn{borda:0;largura:112px;altura:30px;cursor:ponteiro;margem esquerda:10px;fundo:url(img/btn.png) no-repeat;}
#sendBtn.hover{posição de fundo:0 -30px;}
#msgBox form .maxNum{fonte:26px/30px Georgia, Tahoma, Arial;preenchimento:0 5px;}
#msgBox .list{padding:10px;}
#msgBox .list h3{posição:relativa;altura:33px;tamanho da fonte:14px;peso da fonte:400;fundo:#e3eaec;borda:1px sólido #dee4e7;}
#msgBox .list h3 span{posição:absoluta;esquerda:6px;topo:6px;fundo:#fff;altura da linha:28px;display:bloco embutido;preenchimento:0 15px;}
#msgBox .list ul{overflow:hidden;zoom:1;}
#msgBox .list ul li{float:left;clear:both;width:100%;border-bottom:1px tracejado #d8d8d8;padding:10px 0;background:#fff;overflow:hidden;}
#msgBox .list ul li.hover{background:#f5f5f5;}
#msgBox .list .userPic{float:left;width:50px;height:50px;display:inline;margin-left:10px;border:1px solid #ccc;border-radius:3px;}
#msgBox .list .content{float:left;width:400px;font-size:14px;margin-left:10px;font-family:arial;word-wrap:break-word;}
#msgBox .list .userName{display:inline;padding-right:5px;}
#msgBox .list .userName a{cor:#2b4a78;}
#msgBox .list .msgInfo{display:inline;quebra de palavra:quebra de palavra;}
#msgBox .list .times{color:#889db6;font:12px/18px arial;margin-top:5px;overflow:hidden;zoom:1;}
#msgBox .list .times span{float:left;}
#msgBox .list .times a{float:right;color:#889db6;}
.tr{overflow:oculto;zoom:1;}
.tr p{float:direita;altura da linha:30px;}
.tr *{float:esquerda;}
.oculto {exibição: nenhum;}
O código JS é o seguinte:
Copie o código do código da seguinte forma:
/**
*Imite o efeito da publicação da Tencent no Weibo
* 1. Atualmente não há solicitação ajax enviada e não há registro em segundo plano, portanto, atualizar a página irá limpá-la.
* 2. O horário é baseado no horário do cliente. Se o horário do cliente estiver errado, o horário também será afetado.
* Atualmente, a ideia específica de interagir assim não é muito complicada. Se for utilizada no projeto, pode ser alterada de acordo com necessidades específicas.
* @construtor Microblog
* @data 23/12/2013
* @autor tugenhua
* @e-mail [email protected]
*/
function Microblog(opções) {
isto.config={
maxNum: 140, // Número máximo de caracteres
targetElem: '.f-text', // O nome da classe da caixa de entrada ou campo de texto
maxNumElem: '.maxNum', // Quantos contêineres de palavras a mais podem ser inseridos
sendBtn : '#sendBtn', // botão de transmissão
face : '#face', // contêiner de emoticons
activeCls: 'active', //clique do mouse na caixa de entrada adicionar classe
currentCls: 'current', // O nome da classe adicionado quando o mouse clica no avatar facial
inputID : '#userName', //ID da caixa de entrada
textareaId : '#conBox', // ID da área de texto
list : '#list-msg', // O contêiner sobre o qual todos estão falando
callback: null // função de retorno de chamada após transmissão dinâmica
};
este.cache = {};
this.init(opções);
}
Microblog.prototype = {
construtor:Microblog,
init: função(opções) {
this.config = $.extend(this.config,options || {});
var self = isso,
_config = self.config,
_cache = self.cache;
// Clique na caixa de entrada para inserir a área de texto na borda da área de texto muda
$(_config.targetElem).each(function(index,item){
$(item).unbind('foco');
$(item).bind('foco',função(e){
!$(this).hasClass(_config.activeCls) && $(this).addClass(_config.activeCls);
});
$(item).unbind('desfoque');
$(item).bind('desfoque',function(e){
$(this).hasClass(_config.activeCls) && $(this).removeClass(_config.activeCls);
});
});
// Clique no avatar facial para adicionar (adicionar) o nome da classe
var faceImg = $('img',$(_config.face));
$(faceImg).each(função(índice,item){
$(item).unbind('clique');
$(item).bind('clique',function(e){
$(this).addClass(_config.currentCls).siblings().removeClass(_config.currentCls);
});
});
//Evento de foco do botão de transmissão
$(_config.sendBtn).hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover');
},função(){
$(this).hasClass('hover') && $(this).removeClass('hover');
})
//Evento de vinculação
self._bindEnv();
},
/*
* Calcule o comprimento dos caracteres, incluindo números chineses, ingleses, etc.
* @paramstr
* @return o comprimento da string
*/
_contar caracteres: function(str) {
var contagem total = 0;
for (var i=0; i<str.comprimento; i++) {
var c = str.charCodeAt(i);
if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
contagem total++;
}outro {
Contagem total+=2;
}
}
retornar contagem total;
},
/*
* Todos os eventos vinculativos
*/
_bindEnv: função() {
var self = isso,
_config = self.config,
_cache = self.cache;
//Evento de keyup do campo de texto
self._keyUp();
//Clique no evento do botão de transmissão
self._clickBtn();
},
/*
* Evento de digitação de campo de texto
*/
_keyUp: função() {
var self = isso,
_config = self.config,
_cache = self.cache;
$(_config.textareaId).unbind('keyup');
$(_config.textareaId).bind('keyup',function(){
var len = self._countCharacters($(this).val()),
HTML;
if(_config.maxNum * 1 >= len * 1) {
html = _config.maxNum * 1 - len * 1;
}outro {
html = _config.maxNum * 1 - len * 1;
}
$(_config.maxNumElem).html(html);
$(_config.maxNumElem).attr('data-html',html);
});
},
/*
* Clique no evento do botão de transmissão
*/
_clickBtn: função() {
var self = isso,
_config = self.config,
_cache = self.cache;
var reg = /^/s*$/g;
$(_config.sendBtn).unbind('clique');
$(_config.sendBtn).bind('clique',function(){
var inputVal = $(_config.inputID).val(),
textVal = $(_config.textareaId).val(),
maxNum = $(_config.maxNumElem).attr('data-html');
if(reg.test(inputVal)) {
alerta('Digite seu nome');
retornar;
}else if(reg.test(textVal)) {
alert("Apenas diga alguma coisa!");
retornar;
}
if(Númeromáx * 1 < 0) {
alert('Os caracteres excedem o limite, reduza os caracteres');
retornar;
}
// Originalmente, enviaríamos uma solicitação ajax, mas não há processamento em segundo plano aqui, então atualmente estamos apenas renderizando a página no lado do cliente.
self._renderHTML(inputVal,textVal);
});
},
/*
* Renderize a estrutura HTML
*/
_renderHTML: função(inputVal,textVal) {
var self = isso,
_config = self.config,
_cache = self.cache;
var oLi = document.createElement("li"),
oData = new Data();
oLi.innerHTML = '<div>' +
'<img src="'+self._getSrc()+'" />'+
'</div>' +
'<div>' +
'<div><a href="javascript:;">'+inputVal+'</a>:</div>' +
'<div>'+textVal+'</div>' +
'<div>'+
'<span>'+self._format(oDate.getMonth() + 1) + "/u6708" + self._format(oDate.getDate()) + "/u65e5 " + self._format(oDate.getHours()) + ":" + self._format(oDate.getMinutes())+'</span>'+
'<a href="javascript:;">Excluir</a>'+
'</div>' +
'</div>';
//Inserir elemento
if($(_config.list + " li").length > 0) {
$(oLi).insertBefore($(_config.list + " li")[0]);
self._animate(oLi);
}outro {
$(_config.list).append(oLi);
self._animate(oLi);
}
_config.callback && $.isFunction(_config.callback) && _config.callback();
//Limpa o valor do campo de texto da caixa de entrada
self._clearVal();
//evento de foco
self._hover();
},
/*
*Formate a hora, se for um único dígito, adicione 0
*/
_formato: função(str){
return str.toString().replace(/^(/d)$/,"0$1");
},
/*
* Obtendo src
* @return src
*/
_getSrc: função() {
var self = isso,
_config = self.config,
_cache = self.cache;
var faceImg = $('img',$(_config.face));
for(var i = 0; i < faceImg.length; i++) {
if($(faceImg[i]).hasClass(_config.currentCls)) {
return $(faceImg[i]).attr('src');
quebrar;
}
}
},
/*
*Limpar valor
*/
_clearVal: função() {
var self = isso,
_config = self.config,
_cache = self.cache;
$(_config.inputID) && $(_config.inputID).val('');
$(_config.textareaId) && $(_config.textareaId).val('');
},
/*
* evento flutuante
*/
_hover: função() {
var self = isso,
_config = self.config,
_cache = self.cache;
$(_config.list + 'li').hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover').siblings().removeClass('hover');
$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).removeClass('hidden');
var $isso = $(este);
//exclui evento
$('.del',$that).unbind('clique');
$('.del',$that).bind('click',function(){
$($isso).animate({
'opacidade': 0
},500,função(){
$that.remove();
});
});
},função(){
$(this).hasClass('hover') && $(this).removeClass('hover');
!$('.del',$(este)).hasClass('oculto') && $('.del',$(este)).addClass('oculto');
});
},
/*
*altura
*/
_animar: função(oLi) {
var self = isto;
var iAltura = $(oLi).altura(),
alfa = 0,
temporizador,
contagem = 0;
$(oLi).css({"opacidade" : "0", "altura" : "0"});
temporizador && clearInterval(temporizador);
temporizador = setInterval(função(){
$(oLi).css({"display" : "block", "opacity" : "0", "height" : (count += 8) + "px"});
if (contagem > iAltura){
clearInterval(temporizador);
$(oLi).css({ "altura": iHeight + "px"});
temporizador = setInterval(função(){
$(oLi).css({"opacidade" : alpah += 10});
alpah > 100 && (clearInterval(timer), $(oLi).css({"opacity":100}));
},30);
}
},30);
}
};
//código de inicialização
$(função(){
novo Microblog({});
});
Download do código-fonte: http://xiazai.VeVB.COm//201312/yuanma/wb(VeVB.COm).rar