In den letzten zwei Tagen habe ich die Auswirkungen der Weibo-Beiträge von Tencent untersucht und möchte sie mit Ihnen teilen. Die Auswirkungen sind wie folgt:
Bevor ich es hier teile, möchte ich über meine Codierungsgewohnheiten sprechen. Viele Leute werden mich fragen, warum ich Komponenten nicht in Form von JQuery schreibe, da ich das JQuery-Framework verwende. Meine damalige Antwort war: Jeder hat seine eigenen Gewohnheiten beim Schreiben von Code. Was ich aber noch mehr zum Ausdruck bringen möchte, ist: Ich persönlich bin der Meinung, dass diese Art der Codierung einen großen Vorteil hat, da verschiedene Unternehmen unterschiedliche Frameworks haben, die beispielsweise in Taobao verwendet werden Das in Alipay Baidu verwendete Alipay-Framework verwendet das Baidu-Framework und Tencent verfügt über das Front-End-JS-Framework von Tencent, wenn mein Code zu sehr von JQuery abhängt Was ist, wenn andere Leute meinen Code verwenden möchten oder ich eines Tages an einem Tencent-Projekt arbeiten möchte, sie jedoch verlangen, dass wir nur ihr JS-Framework verwenden und über eine solche Funktion verfügen? Wenn ich mich also vollständig auf die Codierungsform von jquery verlasse, muss ich sie dann jetzt neu codieren? Wenn Sie gemäß der aktuellen Codierungsmethode codieren, verwenden Sie nur den JQuery-Selektor. Solange Sie den Selektor ändern, können andere Codes direkt verwendet werden. Ich persönlich bin der Meinung, dass Sie als professioneller Front-End-Entwickler nicht nur ein wenig JQuery kennen sollten, um Dinge zu erstellen, sondern auch darüber nachdenken sollten, qualitativ hochwertigen Code zu schreiben. Vielleicht kann das Schreiben von einfachem Code mit JQuery auch etwas Gutes bewirken, ist es aber Gibt es Überlegungen, ob Sie den Code erneut ändern müssen, wenn eines Tages eine bestimmte Funktion zur Nachfrage hinzugefügt wird? Können wir neue Funktionen basierend auf den vorherigen neu schreiben? Der Code muss nicht geändert werden!
Was ist hochwertiger Code?
Persönlich denke ich, dass folgende Punkte erfüllt sein müssen:
1. Skalierbarkeit.
2. Wartbarkeit.
3. Lesbarkeit und Benutzerfreundlichkeit.
4. JS-Leistung.
Das Wichtigste ist, die oben genannten Punkte zu erfüllen.
Okay, kein Unsinn mehr! Wenn Sie das Thema ändern, ist der Effekt des Postens auf Weibo einfach. Natürlich verfügt Tencent über einige komplexe Funktionen zum Posten auf Weibo, z. B. das Hinzufügen von Emoticons usw., aber dies ist derzeit nicht der Fall (der Arbeitsaufwand ist relativ). groß).
Der JS-Code, den ich unten geschrieben habe, muss zwei Punkte beachten:
1. Jeder sagt, dass nach jeder Veröffentlichung ein Element zur Liste hinzugefügt wird. Derzeit wird keine Ajax-Anfrage gesendet und es gibt keinen Datensatz im Hintergrund, sodass er durch Aktualisieren der Seite gelöscht wird.
2. Die Zeit basiert auf der Zeit des Kunden. Wenn die Zeit des Kunden falsch ist, wird die Zeit ebenfalls beeinflusst.
Tatsächlich ist die Idee sehr einfach, Sie können sie verstehen, wenn Sie sich den obigen Effekt ansehen, daher werde ich hier nicht auf Details eingehen! Oder ich stelle unten eine komprimierte Demo zur Verfügung. Sie können sie selbst herunterladen und den Effekt sehen! Als Nachtrag erfolgt nach jeder Veröffentlichung ein Rückruf! Wenn sich die Maus über ein Element bewegt, erscheint natürlich eine Schaltfläche zum Löschen, und ein Element kann nach Belieben gelöscht werden. Es gibt nicht viel zu sagen, wenn Sie den Code direkt posten!
Der HTML-Code lautet wie folgt:
Kopieren Sie den Codecode wie folgt:
<div id="msgBox">
<Formular>
<h2>Komm, sag mir, was du tust und was du denkst</h2>
<div>
<input id="userName" value="" />
<p id="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>Kann auch</span><strong>140</strong><span> Zeichen eingeben</span>
<input id="sendBtn" type="button" value="" />
</p>
</div>
</form>
<div>
<h3><span>Alle reden</span></h3>
<ul id="list-msg"></ul>
</div>
</div>
Der CSS-Code lautet wie folgt:
Kopieren Sie den Codecode wie folgt:
body,div,h2,h3,ul,li,p{margin:0;padding:0;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
ul{list-style-type:none;}
body{color:#333;background:#3c3a3b;font:12px/1.5 /5b8b/4f53;}
#msgBox{width:500px;background:#fff;border-radius:5px;margin:10px auto;padding-top:10px;}
#msgBox form h2{font-weight:400;font:400 18px/1.5 /5fae/8f6f/96c5/9ed1;}
#msgBox form{background:url(img/boxBG.jpg) repeat-x 0 unten;padding:0 20px 15px;}
#userName,#conBox{color:#777;border:1px solid #d0d0d0;border-radius:6px;background:#fff url(img/inputBG.png) repeat-x;padding:3px 5px;font:14px/1.5 arial;}
#userName.active,#conBox.active{border:1px solid #7abb2c;}
#userName{height:20px;}
#conBox{width:448px;resize:none;height:65px;overflow:auto;}
#msgBox form div{position:relative;color:#999;margin-top:10px;}
#msgBox img{border-radius:3px;}
#face{position:absolute;top:0;left: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 Georgia, Tahoma, Arial;padding:0 5px;}
#msgBox .list{padding:10px;}
#msgBox .list h3{position:relative;height: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{overflow:hidden;zoom:1;}
.tr p{float:right;line-height:30px;}
.tr *{float:left;}
.hidden {display:none;}
Der JS-Code lautet wie folgt:
Kopieren Sie den Codecode wie folgt:
/**
*Imitieren Sie die Wirkung der Tencent-Veröffentlichung auf Weibo
* 1. Derzeit wird keine Ajax-Anfrage gesendet und es gibt keinen Datensatz im Hintergrund, daher wird er durch Aktualisieren der Seite gelöscht.
* 2. Die Zeit basiert auf der Kundenzeit. Wenn die Kundenzeit falsch ist, wird auch die Zeit beeinflusst.
* Derzeit ist die konkrete Idee einer solchen Interaktion nicht allzu kompliziert. Wenn sie im Projekt verwendet wird, kann sie je nach spezifischem Bedarf geändert werden.
* @constructor Microblog
* @Datum 23.12.2013
* @author tugenhua
* @email [email protected]
*/
Funktion Microblog(Optionen) {
this.config = {
maxNum: 140, // Maximale Anzahl von Zeichen
targetElem: '.f-text', // Der Klassenname des Eingabefelds oder Textfelds
maxNumElem: '.maxNum', // Wie viele weitere Wortcontainer können eingegeben werden
sendBtn: '#sendBtn', // Broadcast-Schaltfläche
face: '#face', // Emoticon-Container
activeCls: 'active', //Mausklick-Eingabefeld zum Hinzufügen einer Klasse
currentCls: 'current', // Der Klassenname, der hinzugefügt wird, wenn die Maus auf den Gesichtsavatar klickt
inputID: '#userName', //Eingabefeld-ID
textareaId: '#conBox', // Textbereichs-ID
list: '#list-msg', // Der Container, über den alle reden
Rückruf: null // Rückruffunktion nach dynamischer Übertragung
};
this.cache = {};
this.init(optionen);
}
Microblog.prototype = {
Konstruktor:Microblog,
init: Funktion(Optionen) {
this.config = $.extend(this.config,options || {});
var self = dies,
_config = self.config,
_cache = self.cache;
// Klicken Sie auf das Eingabefeld und ändern Sie den Textbereich des Eingabetextbereichs
$(_config.targetElem).each(function(index,item){
$(item).unbind('focus');
$(item).bind('focus',function(e){
!$(this).hasClass(_config.activeCls) && $(this).addClass(_config.activeCls);
});
$(item).unbind('blur');
$(item).bind('blur',function(e){
$(this).hasClass(_config.activeCls) && $(this).removeClass(_config.activeCls);
});
});
// Klicken Sie auf den Gesichts-Avatar, um den Klassennamen hinzuzufügen
var faceImg = $('img',$(_config.face));
$(faceImg).each(function(index,item){
$(item).unbind('click');
$(item).bind('click',function(e){
$(this).addClass(_config.currentCls).siblings().removeClass(_config.currentCls);
});
});
//Schaltflächen-Hover-Ereignis übertragen
$(_config.sendBtn).hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover');
},Funktion(){
$(this).hasClass('hover') && $(this).removeClass('hover');
})
//Ereignis binden
self._bindEnv();
},
/*
* Berechnen Sie die Länge von Zeichen, einschließlich chinesischer Zahlen, Englisch usw.
* @param str
* @return die Länge der Zeichenfolge
*/
_countCharacters: function(str) {
var totalCount = 0;
for (var i=0; i<str.length; i++) {
var c = str.charCodeAt(i);
if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
totalCount++;
}anders {
totalCount+=2;
}
}
return totalCount;
},
/*
* Alle verbindlichen Ereignisse
*/
_bindEnv: function() {
var self = dies,
_config = self.config,
_cache = self.cache;
//Textfeld-Keyup-Ereignis
self._keyUp();
// Klicken Sie auf das Broadcast-Button-Ereignis
self._clickBtn();
},
/*
* Textfeld-Keyup-Ereignis
*/
_keyUp: function() {
var self = dies,
_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;
}anders {
html = _config.maxNum * 1 - len * 1;
}
$(_config.maxNumElem).html(html);
$(_config.maxNumElem).attr('data-html',html);
});
},
/*
* Klicken Sie auf das Broadcast-Button-Ereignis
*/
_clickBtn: function() {
var self = dies,
_config = self.config,
_cache = self.cache;
var reg = /^/s*$/g;
$(_config.sendBtn).unbind('click');
$(_config.sendBtn).bind('click',function(){
var inputVal = $(_config.inputID).val(),
textVal = $(_config.textareaId).val(),
maxNum = $(_config.maxNumElem).attr('data-html');
if(reg.test(inputVal)) {
Alert('Bitte geben Sie Ihren Namen ein');
zurückkehren;
}else if(reg.test(textVal)) {
alarm("Sag einfach etwas!");
zurückkehren;
}
if(maxNum * 1 < 0) {
Alert('Die Zeichen überschreiten das Limit, bitte reduzieren Sie die Anzahl der Zeichen.');
zurückkehren;
}
// Ursprünglich wollten wir eine Ajax-Anfrage senden, aber hier findet keine Hintergrundverarbeitung statt, daher rendern wir die Seite derzeit nur auf der Clientseite.
self._renderHTML(inputVal,textVal);
});
},
/*
* Rendern Sie die HTML-Struktur
*/
_renderHTML: function(inputVal,textVal) {
var self = dies,
_config = self.config,
_cache = self.cache;
var oLi = document.createElement("li"),
oDate = neues Datum();
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:;">Löschen</a>'+
'</div>' +
'</div>';
//Element einfügen
if($(_config.list + " li").length > 0) {
$(oLi).insertBefore($(_config.list + " li")[0]);
self._animate(oLi);
}anders {
$(_config.list).append(oLi);
self._animate(oLi);
}
_config.callback && $.isFunction(_config.callback) && _config.callback();
//Löschen Sie den Wert des Eingabefeld-Textfelds
self._clearVal();
//Hover-Ereignis
self._hover();
},
/*
* Formatieren Sie die Zeit. Wenn es sich um eine einzelne Ziffer handelt, fügen Sie 0 hinzu
*/
_format: function(str){
return str.toString().replace(/^(/d)$/,"0$1");
},
/*
* Src abrufen
* @return src
*/
_getSrc: function() {
var self = dies,
_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');
brechen;
}
}
},
/*
* Klarer Wert
*/
_clearVal: function() {
var self = dies,
_config = self.config,
_cache = self.cache;
$(_config.inputID) && $(_config.inputID).val('');
$(_config.textareaId) && $(_config.textareaId).val('');
},
/*
* Hover-Ereignis
*/
_hover: function() {
var self = dies,
_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 $that = $(this);
// Ereignis löschen
$('.del',$that).unbind('click');
$('.del',$that).bind('click',function(){
$($that).animate({
'Deckkraft': 0
},500,function(){
$that.remove();
});
});
},Funktion(){
$(this).hasClass('hover') && $(this).removeClass('hover');
!$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).addClass('hidden');
});
},
/*
*Höhe
*/
_animate: function(oLi) {
var self = this;
var iHeight = $(oLi).height(),
alpha = 0,
Timer,
Anzahl = 0;
$(oLi).css({"opacity" : "0", "height" : "0"});
Timer && clearInterval(timer);
timer = setInterval(function (){
$(oLi).css({"display" : "block", "opacity" : "0", "height" : (count += 8) + "px"});
if (count > iHeight){
clearInterval(timer);
$(oLi).css({ "height" : iHeight + "px"});
timer = setInterval(function (){
$(oLi).css({"opacity" : alpah += 10});
alpah > 100 && (clearInterval(timer), $(oLi).css({"opacity":100}));
},30);
}
},30);
}
};
// Initialisierungscode
$(Funktion(){
neues Microblog({});
});
Download des Quellcodes: http://xiazai.VeVB.COm//201312/yuanma/wb(VeVB.COm).rar