En los últimos dos días, estudié los efectos de las publicaciones de Weibo de Tencent y me gustaría compartirlos. Los efectos son los siguientes:
Antes de compartir aquí, me gustaría hablar sobre mis hábitos de codificación. Mucha gente me preguntará por qué no escribo componentes en forma de Jquery ya que uso el marco jquery. Mi respuesta en ese momento fue: cada uno tiene sus propios hábitos al escribir código. Pero lo que quiero expresar más es: personalmente siento que este tipo de codificación tiene una gran ventaja. No dependo mucho del marco Jquery, porque diferentes empresas tienen marcos diferentes, como el marco Kissy utilizado en Taobao. El marco Alipay utilizado en Alipay Baidu usa el marco Baidu y Tencent tiene el marco js front-end de Tencent. Si mi código depende demasiado de jquery. ¿Qué pasa si otras personas quieren usar mi código o quiero trabajar en un proyecto de Tencent algún día, pero nos exigen que usemos solo su marco JS y tengamos esa función? Entonces, si confío completamente en la forma de codificación de jquery, ¿tengo que volver a codificarla ahora? Si codifica de acuerdo con el método de codificación actual, solo usará el selector jquery. Luego, siempre que cambie el selector, se pueden usar otros códigos directamente. ¡Este tipo de escalabilidad es muy buena! Personalmente, creo que, como desarrollador front-end profesional, no solo debes saber un poco de jquery para hacer cosas, sino que también debes considerar escribir código de alta calidad. Tal vez escribir código simple con jquery también pueda hacer algo bien, pero es así. ¿Hay alguna consideración de que si un día se agrega una determinada función a la demanda, tendrá que cambiar el código nuevamente? ¿Podemos reescribir nuevas funciones basadas en las anteriores? ¡No es necesario cambiar el código!
¿Qué es el código de alta calidad?
Personalmente creo que se deben cumplir los siguientes puntos:
1. Escalabilidad.
2. Mantenibilidad.
3. Legibilidad y facilidad de uso.
4. Rendimiento de JS.
Lo más importante es cumplir con los puntos anteriores.
¡Vale, no más tonterías! Cambiando de tema, el efecto de publicar en Weibo es simplemente simple. Por supuesto, Tencent tiene algunas funciones complejas para publicar en Weibo, como agregar emoticonos, etc., pero no se ha hecho así en este momento (la carga de trabajo es relativamente). grande).
El código JS que escribí a continuación debe prestar atención a dos puntos:
1. Todo el mundo dice que se agregará un elemento a la lista después de cada publicación. Actualmente, no se envía ninguna solicitud ajax y no hay ningún registro en segundo plano, por lo que actualizar la página lo borrará.
2. La hora se basa en la hora del cliente. Si la hora del cliente es incorrecta, la hora también se verá afectada.
De hecho, la idea es muy simple. Puedes entenderla con solo mirar el efecto anterior, ¡así que no entraré en detalles aquí! O le proporcionaré una demostración comprimida a continuación. ¡Puede descargarla usted mismo y ver el efecto! ¡Se proporciona una devolución de llamada como extensión después de cada publicación! Por supuesto, cuando el mouse se mueve hacia un elemento, aparecerá un botón de eliminación y el elemento se puede eliminar a voluntad. ¡No hay mucho que decir si publicas el código directamente!
El código HTML es el siguiente:
Copie el código de código de la siguiente manera:
<div id="msgBox">
<formulario>
<h2>Ven, cuéntame qué estás haciendo y qué estás pensando</h2>
<div>
<entrada id="nombre de usuario" 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>También puede ingresar</span><strong>140</strong><span> caracteres</span>
<entrada id="sendBtn" tipo="botón" valor="" />
</p>
</div>
</formulario>
<div>
<h3><span>Todos están hablando</span></h3>
<ul id="lista-msg"></ul>
</div>
</div>
El código CSS es el siguiente:
Copie el código de código de la siguiente manera:
cuerpo,div,h2,h3,ul,li,p{margen:0;relleno:0;}
a{texto-decoración:ninguno;}
a:hover{texto-decoración:subrayado;}
ul{tipo-estilo-lista:ninguno;}
cuerpo{color:#333;fondo:#3c3a3b;fuente:12px/1.5 /5b8b/4f53;}
#msgBox{ancho:500px;fondo:#fff;border-radius:5px;margen:10px auto;padding-top:10px;}
#msgBox formulario h2{font-weight:400;font:400 18px/1.5 /5fae/8f6f/96c5/9ed1;}
#msgBox formulario{fondo:url(img/boxBG.jpg) repetir-x 0 abajo;padding:0 20px 15px;}
#userName,#conBox{color:#777;borde:1px sólido #d0d0d0;border-radius:6px;fondo:#fff url(img/inputBG.png) repetir-x;padding:3px 5px;fuente:14px/1.5 antena;}
#userName.active,#conBox.active{borde:1px sólido #7abb2c;}
#nombredeusuario{altura:20px;}
#conBox{ancho:448px;redimensionar:ninguno;alto:65px;overflow:auto;}
#msgBox formulario div{posición:relativa;color:#999;margin-top:10px;}
#msgBox img{border-radius:3px;}
#cara{posición:absoluta;arriba:0;izquierda:172px;}
#face img{float:left;display:inline;width:30px;height:30px;cursor:pointer;margin-right:6px;opacity:0.5;filter:alpha(opacity=50);}
#face img.hover,#face img.current{ancho:28px;alto:28px;borde:1px sólido #f60;opacidad:1;filtro:alfa(opacidad=100);}
#sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(img/btn.png) no-repeat;}
#sendBtn.hover{posición-fondo:0 -30px;}
#msgBox formulario .maxNum{font:26px/30px Georgia, Tahoma, Arial;padding:0 5px;}
#msgBox .list{padding:10px;}
#msgBox .list h3{posición:relativa;altura:33px;tamaño de fuente:14px;peso de fuente:400;fondo:#e3eaec;borde:1px sólido #dee4e7;}
#msgBox .list h3 span{posición:absoluta;izquierda:6px;top:6px;fondo:#fff;altura de línea:28px;display:inline-block;padding:0 15px;}
#msgBox .list ul{overflow:hidden;zoom:1;}
#msgBox .list ul li{float:left;clear:both;width:100%;border-bottom:1px guión #d8d8d8;padding:10px 0;fondo:#fff;overflow:hidden;}
#msgBox .list ul li.hover{fondo:#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{color:#2b4a78;}
#msgBox .list .msgInfo{display:inline;word-wrap:break-word;}
#msgBox .list .times{color:#889db6;font:12px/18px arial;margin-top:5px;overflow:hidden;zoom:1;}
#msgBox .list .times span{float:left;}
#msgBox .list .veces a{float:right;color:#889db6;}
.tr{desbordamiento:oculto;zoom:1;}
.tr p{float:right;line-height:30px;}
.tr *{flotador:izquierda;}
.oculto {pantalla: ninguna;}
El código JS es el siguiente:
Copie el código de código de la siguiente manera:
/**
*Imita el efecto de la publicación de Tencent en Weibo.
* 1. Actualmente no se ha enviado ninguna solicitud ajax y no hay ningún registro en segundo plano, por lo que al actualizar la página se borrará.
* 2. La hora se basa en la hora del cliente. Si la hora del cliente es incorrecta, la hora también se verá afectada.
* En la actualidad, la idea específica de interactuar así no es demasiado complicada. Si se utiliza en el proyecto, se puede cambiar según las necesidades específicas.
* Microblog @constructor
* @fecha 2013-12-23
*@autor tugenhua
* @correo electrónico [email protected]
*/
función Microblog(opciones) {
this.config = {
maxNum: 140, // Número máximo de caracteres
targetElem: '.f-text', // El nombre de clase del cuadro de entrada o campo de texto
maxNumElem: '.maxNum', // ¿Cuántos contenedores de palabras más se pueden ingresar?
sendBtn: '#sendBtn', // Botón de transmisión
cara: '#cara', // contenedor de emoticones
activeCls: 'activo', //Haga clic con el mouse en el cuadro de entrada para agregar clase
currentCls: 'current', // El nombre de la clase agregada cuando el mouse hace clic en la cara del avatar
inputID: '#userName', //ID del cuadro de entrada
textareaId: '#conBox', // ID del área de texto
list : '#list-msg', // El contenedor del que todo el mundo habla
devolución de llamada: nulo // función de devolución de llamada después de la transmisión dinámica
};
this.cache = {};
this.init(opciones);
}
Microblog.prototipo = {
constructor:Microblog,
inicio: función (opciones) {
this.config = $.extend(this.config,opciones || {});
var yo = esto,
_config = self.config,
_cache = self.cache;
// Haga clic en el cuadro de entrada, ingrese el área de texto, cambie el borde del área de texto
$(_config.targetElem).cada(función(índice,elemento){
$(item).unbind('enfoque');
$(elemento).bind('enfoque',función(e){
!$(this).hasClass(_config.activeCls) && $(this).addClass(_config.activeCls);
});
$(item).unbind('desenfoque');
$(elemento).bind('desenfoque',función(e){
$(this).hasClass(_config.activeCls) && $(this).removeClass(_config.activeCls);
});
});
// Haga clic en el avatar de la cara para agregar (agregar) el nombre de la clase
var faceImg = $('img',$(_config.face));
$(faceImg).cada(función(índice,elemento){
$(elemento).unbind('hacer clic');
$(elemento).bind('clic',función(e){
$(this).addClass(_config.currentCls).siblings().removeClass(_config.currentCls);
});
});
//Evento de desplazamiento del botón de transmisión
$(_config.sendBtn).hover(función(){
!$(this).hasClass('hover') && $(this).addClass('hover');
},función(){
$(this).hasClass('hover') && $(this).removeClass('hover');
})
//Evento de enlace
self._bindEnv();
},
/*
* Calcula la longitud de los caracteres, incluidos los números chinos, ingleses, etc.
* @param str
* @return la longitud de la cadena
*/
_countCharacters: función(cadena) {
var cuentatotal = 0;
for (var i=0; i<str.length; i++) {
var c = str.charCodeAt(i);
si ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
totalCount++;
}demás {
totalCount+=2;
}
}
devolver totalCount;
},
/*
* Todos los eventos vinculantes
*/
_bindEnv: función() {
var yo = esto,
_config = self.config,
_cache = self.cache;
//Evento de teclado de campo de texto
self._keyUp();
// Haga clic en el evento del botón de transmisión
self._clickBtn();
},
/*
* Evento de teclado de campo de texto
*/
_keyUp: función() {
var yo = esto,
_config = self.config,
_cache = self.cache;
$(_config.textareaId).unbind('keyup');
$(_config.textareaId).bind('keyup',función(){
var len = self._countCharacters($(this).val()),
HTML;
if(_config.maxNum * 1 >= len * 1) {
html = _config.maxNum * 1 - len * 1;
}demás {
html = _config.maxNum * 1 - len * 1;
}
$(_config.maxNumElem).html(html);
$(_config.maxNumElem).attr('data-html',html);
});
},
/*
* Haga clic en el evento del botón de transmisión
*/
_clickBtn: función() {
var yo = esto,
_config = self.config,
_cache = self.cache;
var reg = /^/s*$/g;
$(_config.sendBtn).unbind('hacer clic');
$(_config.sendBtn).bind('hacer clic',función(){
var inputVal = $(_config.inputID).val(),
textVal = $(_config.textareaId).val(),
maxNum = $(_config.maxNumElem).attr('data-html');
si(reg.test(valorentrada)) {
alert('Por favor ingresa tu nombre');
devolver;
}si no (reg.test(textVal)) {
alert("¡Solo di algo!");
devolver;
}
si(Nummax * 1 < 0) {
alert('Los caracteres exceden el límite, reduzca los caracteres');
devolver;
}
// Originalmente íbamos a enviar una solicitud ajax, pero aquí no hay procesamiento en segundo plano, por lo que actualmente solo estamos representando la página en el lado del cliente.
self._renderHTML(inputVal,textVal);
});
},
/*
* Renderizar la estructura html
*/
_renderHTML: función(valorentrada,Valtexto) {
var yo = esto,
_config = self.config,
_cache = self.cache;
var oLi = document.createElement("li"),
oFecha = nueva fecha();
oLi.innerHTML = '<div>' +
'<img src="'+self._getSrc()+'" />'+
'</div>' +
'<div>' +
'<div><a href="javascript:;">'+inputVal+'</a>:</div>' +
'<div>'+Valtexto+'</div>' +
'<div>'+
'<lapso>'+self._format(oDate.getMonth() + 1) + "/u6708" + self._format(oDate.getDate()) + "/u65e5 " + self._format(oDate.getHours()) + ":" + self._format(oDate.getMinutes())+'</span>'+
'<a href="javascript:;">Eliminar</a>'+
'</div>' +
'</div>';
//Insertar elemento
if($(_config.list + " li").length > 0) {
$(oLi).insertBefore($(_config.list + " li")[0]);
self._animate(oLi);
}demás {
$(_config.list).append(oLi);
self._animate(oLi);
}
_config.callback && $.isFunction(_config.callback) && _config.callback();
//Borrar el valor del campo de texto del cuadro de entrada
self._clearVal();
//evento flotante
self._hover();
},
/*
* Formatear hora, si es de un solo dígito agregar 0
*/
_formato: función(cadena){
return str.toString().replace(/^(/d)$/,"0$1");
},
/*
* Obteniendo src
* @return src
*/
_getSrc: función() {
var yo = esto,
_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');
romper;
}
}
},
/*
* Valor claro
*/
_clearVal: función() {
var yo = esto,
_config = self.config,
_cache = self.cache;
$(_config.inputID) && $(_config.inputID).val('');
$(_config.textareaId) && $(_config.textareaId).val('');
},
/*
* evento flotante
*/
_hover: función() {
var yo = esto,
_config = self.config,
_cache = self.cache;
$(_config.list + 'li').hover(función(){
!$(this).hasClass('hover') && $(this).addClass('hover').siblings().removeClass('hover');
$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).removeClass('hidden');
var $eso = $(esto);
// eliminar evento
$('.del',$eso).unbind('hacer clic');
$('.del',$eso).bind('hacer clic',función(){
$($eso).animate({
'opacidad': 0
},500,función(){
$ese.remove();
});
});
},función(){
$(this).hasClass('hover') && $(this).removeClass('hover');
!$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).addClass('hidden');
});
},
/*
*altura
*/
_animar: función(oLi) {
var self = esto;
var iAltura = $(oLi).altura(),
alfa = 0,
minutero,
contar = 0;
$(oLi).css({"opacidad" : "0", "altura" : "0"});
temporizador && clearInterval(temporizador);
temporizador = setInterval(función (){
$(oLi).css({"display": "bloque", "opacidad": "0", "altura": (recuento += 8) + "px"});
si (cuenta > iAltura){
clearInterval(temporizador);
$(oLi).css({ "altura" : iAltura + "px"});
temporizador = setInterval(función (){
$(oLi).css({"opacidad" : alpah += 10});
alpah > 100 && (clearInterval(temporizador), $(oLi).css({"opacidad":100}));
},30);
}
},30);
}
};
// código de inicialización
$(función(){
nuevo Microblog({});
});
Descarga del código fuente: http://xiazai.VeVB.COm//201312/yuanma/wb(VeVB.COm).rar