За последние два дня я изучал влияние публикаций Tencent на Weibo и хотел бы поделиться ими. Эффекты следующие:
Прежде чем поделиться здесь, я хотел бы поговорить о своих привычках в кодировании. Многие люди спросят меня, почему я не пишу компоненты в форме Jquery, если я использую фреймворк jquery. Мой ответ тогда был таков: у каждого свои привычки при написании кода. Но я хочу сказать больше: лично я считаю, что этот вид кодирования имеет большое преимущество. Я не очень зависим от фреймворка Jquery, потому что у разных компаний разные фреймворки. Например, фреймворк Kissy, используемый в Taobao и в других компаниях. Платформа Alipay, используемая в Alipay, Baidu использует платформу Baidu, а у Tencent есть интерфейсная платформа js Tencent. Если мой код слишком зависит от jquery. Что, если другие люди захотят использовать мой код или я однажды захочу поработать над проектом Tencent, но они потребуют, чтобы мы использовали только их JS-фреймворк и имели такую функцию? Итак, если я полностью полагаюсь на форму кодирования jquery, нужно ли мне сейчас перекодировать ее? Если вы кодируете в соответствии с текущим методом кодирования, вы будете использовать только селектор jquery. Затем, пока вы меняете селектор, другие коды можно использовать напрямую. Такая масштабируемость очень хороша! Лично я считаю, что, будучи профессиональным интерфейсным разработчиком, вы должны не только немного знать jquery, чтобы что-то делать, но и подумать о написании высококачественного кода. Возможно, написание простого кода с помощью jquery также может дать что-то хорошее, но это не так. есть ли? Учитывая, что если однажды в требование добавят определенную функцию, придется ли вам снова менять код? Можем ли мы переписать новые функции на основе предыдущих? Код менять не нужно!
Что такое качественный код?
Лично я считаю, что должны быть соблюдены следующие пункты:
1. Масштабируемость.
2. Ремонтопригодность.
3. Читабельность и простота использования.
4. Производительность JS.
Самое главное – соблюсти вышеперечисленные пункты.
Ладно, хватит глупостей! При смене темы эффект от публикации на Weibo просто простой. Конечно, у Tencent есть некоторые сложные функции для публикации на Weibo, такие как добавление смайлов и т. д., но такого пока не сделано (нагруженность относительно большая). большой).
В коде JS, который я написал ниже, необходимо обратить внимание на два момента:
1. Все говорят, что элемент будет добавляться в список после каждой публикации. В настоящее время не отправляется ajax-запрос и нет записи в фоновом режиме, поэтому обновление страницы очистит его.
2. Время зависит от времени клиента. Если время клиента неверное, это также повлияет на время.
На самом деле идея очень проста. Вы можете понять ее, просто взглянув на эффект выше, поэтому я не буду здесь вдаваться в подробности! Или я предоставлю сжатую демо-версию ниже. Вы можете скачать ее самостоятельно и увидеть эффект! Обратный звонок предоставляется в виде расширения после каждой публикации! Конечно, когда мышь перемещается на элемент, появляется кнопка удаления, и элемент можно удалить по своему желанию. Если вы опубликуете код напрямую, сказать особо нечего!
HTML-код выглядит следующим образом:
Скопируйте код кода следующим образом:
<div id="msgBox">
<форма>
<h2>Подойди, расскажи мне, что ты делаешь и о чем думаешь</h2>
<дел>
<input id="userName" value="" />
<p id="лицо">
<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>
<дел>
<textarea id="conBox"></textarea>
</div>
<дел>
<р>
<span>Можно также ввести</span><strong>140</strong><span> символов</span>
<input id="sendBtn" type="button" value="" />
</p>
</div>
</форма>
<дел>
<h3><span>Все говорят</span></h3>
<ul id="list-msg"></ul>
</div>
</div>
CSS-код выглядит следующим образом:
Скопируйте код кода следующим образом:
body,div,h2,h3,ul,li,p{маржа:0;padding:0;}
а {текст-декорация: нет;}
а:hover{текст-декорация:подчеркивание;}
ul {тип списка-стиля: нет;}
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) повтор-x 0 внизу;padding:0 20px 15px;}
#userName,#conBox{color:#777;border:1px Solid #d0d0d0;border-radius:6px;background:#fff url(img/inputBG.png) повтор-x;padding:3px 5px;font:14px/1.5 Ариал;}
#userName.active,#conBox.active{border:1px сплошной #7abb2c;}
#userName{высота:20 пикселей;}
#conBox{ширина: 448 пикселей; изменение размера: нет; высота: 65 пикселей; переполнение: авто;}
#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 {граница: 0; ширина: 112 пикселей; высота: 30 пикселей; курсор: указатель; поле слева: 10 пикселей; фон: URL (img/btn.png) без повтора;}
#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 пунктирный #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{переполнение:скрытый;масштаб:1;}
.tr p{float:right;line-height:30px;}
.tr *{float:left;}
.скрытый {дисплей: нет;}
JS-код выглядит следующим образом:
Скопируйте код кода следующим образом:
/**
*Имитируйте эффект публикации Tencent на Weibo.
* 1. В настоящее время ajax-запрос не отправлен и в фоновом режиме нет записи, поэтому обновление страницы очистит ее.
* 2. Время зависит от времени клиента. Если время клиента указано неправильно, это также повлияет на время.
* В настоящее время конкретная идея такого взаимодействия не слишком сложна. Если она используется в проекте, ее можно изменить в соответствии с конкретными потребностями.
* @constructor Микроблог
* @дата 23 декабря 2013 г.
* @author тугенхуа
* @электронная почта [email protected]
*/
функция Микроблог (варианты) {
this.config = {
maxNum : 140, // Максимальное количество символов
targetElem: '.f-text', // Имя класса поля ввода или текстового поля
maxNumElem: '.maxNum', // Сколько еще контейнеров слов можно ввести
sendBtn : '#sendBtn', // кнопка трансляции
face : '#face', // контейнер смайликов
activeCls: 'active', //Поле ввода щелчком мыши добавить класс
currentCls: 'current', // Имя класса, добавляемое при щелчке мышью по лицу аватара
inputID : '#userName', //Идентификатор поля ввода
textareaId : '#conBox', // Идентификатор текстовой области
list : '#list-msg', // Контейнер, о котором все говорят
callback: null // функция обратного вызова после динамической трансляции
};
this.cache = {};
this.init(опции);
}
Микроблог.прототип = {
конструктор:Микроблог,
инициализация: функция (опции) {
this.config = $.extend(this.config,options || {});
вар self = это,
_config = self.config,
_cache = self.cache;
// Щелкните поле ввода. Ввод текстовой области. Изменение границы текстовой области.
$(_config.targetElem).each(function(index,item){
$(пункт).unbind('фокус');
$(item).bind('focus',function(e){
!$(this).hasClass(_config.activeCls) && $(this).addClass(_config.activeCls);
});
$(пункт).unbind('размытие');
$(item).bind('blur',function(e){
$(this).hasClass(_config.activeCls) && $(this).removeClass(_config.activeCls);
});
});
// Нажмите на аватарку лица, чтобы добавить (добавить) имя класса
var faceImg = $('img',$(_config.face));
$(faceImg).each(функция(индекс,элемент){
$(пункт).unbind('клик');
$(item).bind('click',function(e){
$(this).addClass(_config.currentCls).siblings().removeClass(_config.currentCls);
});
});
//Трансляция события наведения кнопки
$(_config.sendBtn).hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover');
},функция(){
$(this).hasClass('hover') && $(this).removeClass('hover');
})
//Привязываем событие
self._bindEnv();
},
/*
* Рассчитать длину символов, включая китайские цифры, английские и т. д.
* @param ул
* @return длину строки
*/
_countCharacters: функция (строка) {
вар TotalCount = 0;
for (var i=0; i<str.length; i++) {
вар c = str.charCodeAt(i);
if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
общее количество++;
}еще {
общее количество+=2;
}
}
вернуть общее количество;
},
/*
* Все обязательные события
*/
_bindEnv: функция() {
вар self = это,
_config = self.config,
_cache = self.cache;
//Событие нажатия клавиши текстового поля
self._keyUp();
// Нажмите кнопку трансляции события
self._clickBtn();
},
/*
* Событие нажатия клавиши текстового поля
*/
_keyUp: функция() {
вар self = это,
_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 - длина * 1;
}еще {
html = _config.maxNum * 1 - длина * 1;
}
$(_config.maxNumElem).html(html);
$(_config.maxNumElem).attr('data-html',html);
});
},
/*
* Нажмите кнопку трансляции события
*/
_clickBtn: функция() {
вар self = это,
_config = self.config,
_cache = self.cache;
вар reg = /^/s*$/g;
$(_config.sendBtn).unbind('клик');
$(_config.sendBtn).bind('click',function(){
вар inputVal = $(_config.inputID).val(),
textVal = $(_config.textareaId).val(),
maxNum = $(_config.maxNumElem).attr('data-html');
если (reg.test(inputVal)) {
alert('Пожалуйста, введите свое имя');
возвращаться;
}иначе если(reg.test(textVal)) {
alert("Просто скажи что-нибудь!");
возвращаться;
}
если (maxNum * 1 <0) {
alert('Количество символов превышает лимит, пожалуйста, уменьшите количество символов');
возвращаться;
}
// Изначально мы собирались отправить ajax-запрос, но здесь нет фоновой обработки, поэтому сейчас мы просто рендерим страницу на стороне клиента.
self._renderHTML(inputVal,textVal);
});
},
/*
* Отображение структуры HTML
*/
_renderHTML: функция (inputVal, textVal) {
вар self = это,
_config = self.config,
_cache = self.cache;
var oLi = document.createElement("li"),
oDate = новая дата();
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:;">Удалить</a>'+
'</div>' +
'</div>';
//Вставляем элемент
if($(_config.list + "li").length > 0) {
$(oLi).insertBefore($(_config.list + " li")[0]);
self._animate(oLi);
}еще {
$(_config.list).append(oLi);
self._animate(oLi);
}
_config.callback && $.isFunction(_config.callback) && _config.callback();
//Очистить значение текстового поля поля ввода
self._clearVal();
//событие наведения
self._hover();
},
/*
* Отформатируйте время, если оно однозначное, добавьте 0
*/
_format: функция(строка){
return str.toString().replace(/^(/d)$/,"0$1");
},
/*
* Получение источника
* @return источник
*/
_getSrc: функция() {
вар self = это,
_config = self.config,
_cache = self.cache;
var faceImg = $('img',$(_config.face));
for(var я = 0; я <faceImg.length; я++) {
if($(faceImg[i]).hasClass(_config.currentCls)) {
вернуть $(faceImg[i]).attr('src');
перерыв;
}
}
},
/*
* Очистить значение
*/
_clearVal: функция() {
вар self = это,
_config = self.config,
_cache = self.cache;
$(_config.inputID) && $(_config.inputID).val('');
$(_config.textareaId) && $(_config.textareaId).val('');
},
/*
* событие наведения
*/
_hover: функция() {
вар self = это,
_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');
вар $это = $(это);
// удаляем событие
$('.del',$that).unbind('клик');
$('.del',$that).bind('click',function(){
$($that).animate({
'непрозрачность': 0
},500,функция(){
$that.remove();
});
});
},функция(){
$(this).hasClass('hover') && $(this).removeClass('hover');
!$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).addClass('hidden');
});
},
/*
*высота
*/
_animate: function(oLi) {
вар сам = это;
вар iHeight = $(oLi).height(),
альпа = 0,
таймер,
счет = 0;
$(oLi).css({"непрозрачность": "0", "высота": "0"});
таймер && ClearInterval (таймер);
таймер = setInterval(функция (){
$(oLi).css({"display": "block", "opacity": "0", "height": (count += 8) + "px"});
если (количество > iHeight){
ClearInterval (таймер);
$(oLi).css({ "высота": iHeight + "px"});
таймер = setInterval(функция (){
$(oLi).css({"непрозрачность": альпа += 10});
alpah > 100 && (clearInterval(timer), $(oLi).css({"opacity":100}));
},30);
}
},30);
}
};
// код инициализации
$(функция(){
новый микроблог({});
});
Загрузка исходного кода: http://xiazai.VeVB.COm//201312/yuanma/wb(VeVB.COm).rar