Au cours des deux derniers jours, j'ai étudié les effets des publications Weibo de Tencent et j'aimerais les partager. Les effets sont les suivants :
Avant de partager ici, j'aimerais parler de mes habitudes de codage. Beaucoup de gens me demanderont pourquoi je n'écris pas de composants sous forme de Jquery puisque j'utilise le framework jquery ? Ma réponse à l'époque était : chacun a ses propres habitudes lorsqu'il écrit du code. Mais ce que je veux exprimer davantage, c'est : personnellement, je pense que ce type de codage a un gros avantage. Je ne suis pas très dépendant du framework Jquery, car différentes entreprises ont des frameworks différents, par exemple le framework kissy utilisé dans Taobao. Le framework Alipay utilisé dans Alipay Baidu utilise le framework Baidu et Tencent dispose du framework js frontal de Tencent Si mon code est trop dépendant de jquery. Que se passe-t-il si d'autres personnes souhaitent utiliser mon code ou si je souhaite un jour travailler sur un projet Tencent, mais qu'elles exigent que nous utilisions uniquement leur framework JS et disposions d'une telle fonction ? Donc, si je compte entièrement sur la forme d'encodage de jquery, dois-je le ré-encoder maintenant ? Si vous codez selon la méthode de codage actuelle, vous n'utiliserez que le sélecteur jquery. Ensuite, tant que vous changez le sélecteur, d'autres codes peuvent être utilisés directement. Ce type d'évolutivité est très bon ! Personnellement, je pense qu'en tant que développeur front-end professionnel, vous devez non seulement connaître un peu jquery pour créer des choses, mais également envisager d'écrire du code de haute qualité. Peut-être qu'écrire du code simple avec jquery peut également faire quelque chose de bien, mais c'est le cas. y en a-t-il Considérant que si une certaine fonction est ajoutée un jour à la demande, devrez-vous changer à nouveau le code ? Pouvons-nous réécrire de nouvelles fonctions basées sur les précédentes ? Pas besoin de changer le code !
Qu’est-ce qu’un code de haute qualité ?
Personnellement, je pense que les points suivants doivent être respectés :
1. Évolutivité.
2. Maintenabilité.
3. Lisibilité et facilité d’utilisation.
4. Performances JS.
Le plus important est de respecter les points ci-dessus.
Bon, plus de bêtises ! En changeant de sujet, l'effet de la publication sur Weibo est tout simplement simple. Bien sûr, Tencent a des fonctions complexes pour publier sur Weibo, comme l'ajout d'émoticônes, etc., mais cela n'a pas été fait comme ça pour le moment (la charge de travail est relativement importante). grand).
Le code JS que j'ai écrit ci-dessous doit prêter attention à deux points :
1. Tout le monde dit qu'un élément sera ajouté à la liste après chaque publication. Actuellement, aucune requête ajax n'est envoyée et il n'y a aucun enregistrement en arrière-plan, donc l'actualisation de la page l'effacera.
2. L'heure est basée sur l'heure du client. Si l'heure du client est erronée, l'heure sera également affectée.
En fait, l’idée est très simple, vous pouvez la comprendre simplement en regardant l’effet ci-dessus, je n’entrerai donc pas dans les détails ici ! Ou je vous fournirai une démo compressée ci-dessous. Vous pouvez la télécharger vous-même et voir l'effet ! Un rappel est prévu en extension après chaque publication ! Bien entendu, lorsque la souris se déplace sur un élément, un bouton de suppression apparaîtra et un élément pourra être supprimé à volonté. Il n'y a pas grand chose à dire si vous postez le code directement !
Le code HTML est le suivant :
Copiez le code comme suit :
<div id="msgBox">
<formulaire>
<h2>Viens, dis-moi ce que tu fais et ce que tu penses</h2>
<div>
<input id="userName" value="" />
<pid="face">
<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>Peut également saisir</span><strong>140</strong><span> caractères</span>
<input id="sendBtn" type="bouton" value="" />
</p>
</div>
</form>
<div>
<h3><span>Tout le monde parle</span></h3>
<ul id="list-msg"></ul>
</div>
</div>
Le code CSS est le suivant :
Copiez le code comme suit :
corps,div,h2,h3,ul,li,p{marge:0;padding:0;}
une{text-decoration:aucun;}
a: survol{text-decoration:underline;}
ul{list-style-type:aucun;}
corps{couleur :#333;arrière-plan :#3c3a3b;police :12px/1.5 /5b8b/4f53;}
#msgBox{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;}
#msgBox formulaire h2{font-weight:400;font:400 18px/1.5 /5fae/8f6f/96c5/9ed1;}
Formulaire #msgBox{background:url(img/boxBG.jpg) répétition-x 0 bottom;padding:0 20px 15px;}
#userName,#conBox{color:#777;border:1px solid #d0d0d0;border-radius:6px;background:#fff url(img/inputBG.png) répéter-x;padding:3px 5px;police:14px/1.5 aérien ;}
#userName.active,#conBox.active{border:1px solid #7abb2c;}
#nomutilisateur{hauteur :20px;}
#conBox{largeur:448px;resize:aucun;hauteur:65px;débordement:auto;}
#msgBox formulaire div{position:relative;color:#999;margin-top:10px;}
#msgBox img{border-radius:3px;}
#face{position:absolue;top:0;gauche: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{width:28px;height:28px;border:1px solid #f60;opacity:1;filter:alpha(opacity=100);}
#sendBtn{border:0;width:112px;height:30px;cursor:pointer;margin-left:10px;background:url(img/btn.png) no-repeat;}
#sendBtn.hover{background-position:0 -30px;}
#msgBox form .maxNum{font:26px/30px Géorgie, Tahoma, Arial;padding:0 5px;}
#msgBox .list{padding:10px;}
#msgBox .list h3{position:relative;hauteur:33px;font-size:14px;font-weight:400;background:#e3eaec;border:1px solid #dee4e7;}
#msgBox .list h3 span{position:absolute;left:6px;top:6px;background:#fff;line-height: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 dashed #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{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 .times a{float:right;color:#889db6;}
.tr{débordement:caché;zoom:1;}
.tr p{float:right;line-height:30px;}
.tr *{float:gauche;}
.hidden {affichage : aucun ;}
Le code JS est le suivant :
Copiez le code comme suit :
/**
*Imitez l'effet de la publication Tencent sur Weibo
* 1. Actuellement, aucune requête ajax n'est envoyée et il n'y a aucun enregistrement en arrière-plan, donc l'actualisation de la page l'effacera.
* 2. L'heure est basée sur l'heure du client. Si l'heure du client est erronée, l'heure sera également affectée.
* À l'heure actuelle, l'idée spécifique d'interagir ainsi n'est pas trop compliquée. Si elle est utilisée dans le projet, elle peut être modifiée en fonction des besoins spécifiques.
* Microblog @constructor
* @date 2013-12-23
* @auteur tugenhua
* @email [email protected]
*/
fonction Microblog(options) {
ceci.config = {
maxNum : 140, // Nombre maximum de caractères
targetElem : '.f-text', // Le nom de classe de la zone de saisie ou du champ de texte
maxNumElem : '.maxNum', // Combien de conteneurs de mots supplémentaires peuvent être saisis
sendBtn : '#sendBtn', // Bouton de diffusion
face : '#face', // conteneur d'émoticônes
activeCls : 'active', //Clic de souris sur la zone de saisie pour ajouter une classe
currentCls : 'current', // Le nom de la classe ajouté lorsque la souris clique sur le visage de l'avatar
inputID : '#userName', //ID de la zone de saisie
textareaId : '#conBox', // ID de la zone de texte
list : '#list-msg', // Le conteneur dont tout le monde parle
callback: null // fonction de rappel après diffusion dynamique
} ;
this.cache = {};
this.init(options);
}
Microblog.prototype = {
constructeur:Microblog,
init : fonction (options) {
this.config = $.extend(this.config,options || {});
var soi = ceci,
_config = self.config,
_cache = self.cache;
// Cliquez sur la zone de saisie de la zone de texte, la bordure de la zone de texte change
$(_config.targetElem).each(function(index,item){
$(item).unbind('focus');
$(item).bind('focus',function(e){
!$(this).hasClass(_config.activeCls) && $(this).addClass(_config.activeCls);
});
$(item).unbind('flou');
$(item).bind('flou',function(e){
$(this).hasClass(_config.activeCls) && $(this).removeClass(_config.activeCls);
});
});
// Cliquez sur l'avatar du visage pour ajouter (ajouter) le nom de la classe
var faceImg = $('img',$(_config.face));
$(faceImg).each(function(index,item){
$(item).unbind('clic');
$(item).bind('clic',function(e){
$(this).addClass(_config.currentCls).siblings().removeClass(_config.currentCls);
});
});
//Événement de survol du bouton de diffusion
$(_config.sendBtn).hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover');
},fonction(){
$(this).hasClass('hover') && $(this).removeClass('hover');
})
//Événement de liaison
self._bindEnv();
},
/*
* Calculez la longueur des caractères, y compris les chiffres chinois, anglais, etc.
* @param chaîne
* @renvoie la longueur de la chaîne
*/
_countCharacters : function(str) {
var totalCount = 0 ;
pour (var i=0; i<str.length; i++) {
var c = str.charCodeAt(i);
si ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
totalCount++;
}autre {
totalCount+=2 ;
}
}
renvoie totalCount ;
},
/*
* Tous les événements contraignants
*/
_bindEnv : fonction() {
var soi = ceci,
_config = self.config,
_cache = self.cache;
//Événement de saisie du champ de texte
self._keyUp();
// Cliquez sur l'événement du bouton de diffusion
self._clickBtn();
},
/*
* Événement de saisie du champ de texte
*/
_keyUp : fonction() {
var soi = ceci,
_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 ;
}autre {
html = _config.maxNum * 1 - len * 1 ;
}
$(_config.maxNumElem).html(html);
$(_config.maxNumElem).attr('data-html',html);
});
},
/*
* Cliquez sur l'événement du bouton de diffusion
*/
_clickBtn : fonction() {
var soi = ceci,
_config = self.config,
_cache = self.cache;
var reg = /^/s*$/g;
$(_config.sendBtn).unbind('clic');
$(_config.sendBtn).bind('clic',function(){
var inputVal = $(_config.inputID).val(),
textVal = $(_config.textareaId).val(),
maxNum = $(_config.maxNumElem).attr('data-html');
si(reg.test(inputVal)) {
alert('Veuillez entrer votre nom');
retour;
}sinon if(reg.test(textVal)) {
alert("Dis juste quelque chose !");
retour;
}
si (numéromax * 1 < 0) {
alert('Les caractères dépassent la limite, veuillez réduire le nombre de caractères');
retour;
}
// À l'origine, nous allions envoyer une requête ajax, mais il n'y a pas de traitement en arrière-plan ici, donc actuellement nous rendons simplement la page côté client.
self._renderHTML(inputVal,textVal);
});
},
/*
* Rendre la structure HTML
*/
_renderHTML : fonction (inputVal, textVal) {
var soi = ceci,
_config = self.config,
_cache = self.cache;
var oLi = document.createElement("li"),
oDate = nouvelle Date();
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:;">Supprimer</a>'+
'</div>' +
'</div>';
//Insérer un élément
if($(_config.list + " li").length > 0) {
$(oLi).insertBefore($(_config.list + " li")[0]);
self._animate(oLi);
}autre {
$(_config.list).append(oLi);
self._animate(oLi);
}
_config.callback && $.isFunction(_config.callback) && _config.callback();
//Efface la valeur du champ de texte de la zone de saisie
self._clearVal();
//événement de survol
self._hover();
},
/*
* Formatez l'heure, s'il s'agit d'un seul chiffre, ajoutez 0
*/
_format : fonction(str){
return str.toString().replace(/^(/d)$/,"0$1");
},
/*
* Obtenir src
* @retour src
*/
_getSrc : fonction() {
var soi = ceci,
_config = self.config,
_cache = self.cache;
var faceImg = $('img',$(_config.face));
pour(var je = 0; je < faceImg.length; i++) {
if($(faceImg[i]).hasClass(_config.currentCls)) {
return $(faceImg[i]).attr('src');
casser;
}
}
},
/*
* Effacer la valeur
*/
_clearVal : fonction() {
var soi = ceci,
_config = self.config,
_cache = self.cache;
$(_config.inputID) && $(_config.inputID).val('');
$(_config.textareaId) && $(_config.textareaId).val('');
},
/*
* événement de survol
*/
_hover : fonction() {
var soi = ceci,
_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 $ça = $(ce);
// supprime l'événement
$('.del',$that).unbind('click');
$('.del',$that).bind('click',function(){
$($que).animer({
'opacité' : 0
},500,fonction(){
$that.remove();
});
});
},fonction(){
$(this).hasClass('hover') && $(this).removeClass('hover');
!$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).addClass('hidden');
});
},
/*
*hauteur
*/
_animer : fonction (oLi) {
var soi = ceci ;
var iHauteur = $(oLi).hauteur(),
alpha = 0,
minuteur,
compte = 0 ;
$(oLi).css({"opacité" : "0", "hauteur" : "0"});
minuterie && clearInterval(minuterie);
minuterie = setInterval(fonction (){
$(oLi).css({"display" : "block", "opacity" : "0", "height" : (count += 8) + "px"});
si (nombre > iHauteur){
clearInterval (minuterie);
$(oLi).css({ "hauteur" : iHauteur + "px"});
minuterie = setInterval(fonction (){
$(oLi).css({"opacité" : alpah += 10});
alpah > 100 && (clearInterval(timer), $(oLi).css({"opacity":100}));
},30);
}
},30);
}
} ;
// code d'initialisation
$(fonction(){
nouveau microblog({});
});
Téléchargement du code source : http://xiazai.VeVB.COm//201312/yuanma/wb(VeVB.COm).rar