In the past two days, I have studied the effect of Tencent’s Weibo release. I would like to share it. The effect is as follows:
Before sharing here, let me talk about my coding habits. Many people will ask me why I don’t write components in the form of Jquery since I use the jquery framework? My answer at the time was: Everyone has their own habits when writing code. But what I want to express more is: I personally feel that this kind of coding has a big advantage. I am not very dependent on the Jquery framework, because different companies have different frameworks. For example, the kissy framework used in Taobao and the Alipay framework used in Alipay Baidu uses the Baidu framework, and Tencent has Tencent's front-end js framework. If my writing code relies too much on jquery, what if other people want to use my code or I will work on Tencent projects one day, but they require us to only Can I use their JS framework and have such a function? So if I completely rely on jquery's form of encoding, do I have to re-encode it now? If you code according to the current coding method, you will only use the jquery selector at most. Then as long as you change the selector, other codes can be used directly. This kind of scalability is very good! I personally feel that as a professional front-end developer, you should not only know a little bit of jquery to make things, but should also consider writing high-quality code. Maybe writing simple code with jquery can also do something well, but is there any Considering that if a certain function is added to the demand one day, will you have to change the code again? Can we rewrite new functions based on the previous ones? No need to change the code!
What is high-quality code?
Personally, I think the following points must be met:
1. Scalability.
2. Maintainability.
3. Readability and ease of use.
4. JS performance.
The most important thing is to meet the above points.
Okay, no more nonsense! Changing the topic, the effect of posting on Weibo that I am currently doing is just simple. Of course, Tencent has some complex functions for posting on Weibo, such as adding emoticons and other functions, but it has not been made like that at the moment (the workload is relatively large).
The JS code I wrote below needs to pay attention to two points:
1. After each publication, everyone is saying that an item will be added to the list. Currently, no ajax request has been sent and there is no record in the background, so refreshing the page will clear it.
2. The time is based on the client time. If the client time is wrong, the time will also be affected.
In fact, the idea is very simple. You can understand it by looking at the effect above, so I won’t go into details here! Or I will provide a compressed demo below. You can download it yourself and see the effect! After each publication, a callback is provided as an extension! Of course, when the mouse moves to an item, a delete button will appear and an item can be deleted at will. Just post the code, there’s nothing to say!
The HTML code is as follows:
CSS代码如下：
JS代码如下：
this.cache = {};
this.init(options);
}
Microblog.prototype = {
constructor: Microblog,
init: function(options) {
this.config = $.extend(this.config,options || {});
var self = this,
_config = self.config,
_cache = self.cache;
// 点击输入框input 文本域 textarea 边框的变化
$(_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);
});
});
// 点击face头像 add(增加)类名
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);
});
});
// Broadcast button hover event
$(_config.sendBtn).hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover ');
},function(){
} $(this).hasClass('hover') && $(this).removeClass('hover');
})
// Binding event
return The length of the string
*/
_countCharacters: function(str) {
var totalCount = 0;
for (var i=0; i
if ((c >= 0x0001 && c <= 0x007e) || (0xff60<=c && c<=0xff9f)) {
totalCount ;
/*
* All binding events
*/
_bindEnv: function() {
var self = this,
_config = self.config,
_cache = self.cache;
// Text field keyup event
self ._keyUp();
🎜> _keyUp: function() {
var self = this,
_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) {
* 1;
},
/*
* 点击广播按钮事件
*/
_clickBtn: function() {
var self = this,
_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('请输入你的姓名');
return;
}else if(reg.test(textVal)) {
alert("随便说点什么吧!");
return;
}
if(maxNum * 1 < 0) {
alert('字符超过限制 请缩减字');
return;
}
// 本来是要发ajax请求的 但是这边没有后台处理 所以目前只是客户端渲染页面
self._renderHTML(inputVal,textVal);
});
},
/*
* 把html结构渲染出来
*/
_renderHTML: function(inputVal,textVal) {
var self = this,
_config = self.config,
_cache = self.cache;
var oLi = document.createElement("li"),
oDate = new Date();
oLi.innerHTML = '' + ' +
''+
'
'' + ';
'' +
''+textVal+'' +
''+' +
''+self._format(oDate.getMonth() + 1) + "\u6708" + self._format(oDate.getDate()) + "\u65e5 " + self._format(oDate.getHours()) + ":" + self._format(oDate.getMinutes())+''+
''+
'
'
// 插入元素
if($(_config.list + " li").length > 0) {
$(oLi).insertBefore($(_config.list + " li")[0]);
self._animate(oLi);
}else {
$(_config.list).append(oLi);
self._animate(oLi);
}
_config.callback && $.isFunction(_config.callback) && _config.callback();
// 清空输入框 文本域的值
self._clearVal();
// hover事件
self._hover();
},
/*
* 格式化时间, 如果为一位数时补0
*/
_format: function(str){
return str.toString().replace(/^(\d)$/,"0$1");
},
/*
* 获取ing src
* @return src
*/
_getSrc: function() {
var self = this,
_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');
break;
}
}
},
/*
* 清空值
*/
_clearVal: function() {
var self = this,
_config = self.config,
_cache = self.cache;
$(_config.inputID) && $(_config.inputID).val('');
$(_config.textareaId) && $(_config.textareaId).val('');
},
/*
* hover事件
*/
_hover: function() {
var self = this,
_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);
// 删除事件
$('.del',$that).unbind('click');
$('.del',$that).bind('click',function(){
$($that).animate({
'opacity' : 0
},500,function(){
$that.remove();
});
});
},function(){
$(this).hasClass('hover') && $(this).removeClass('hover');
!$('.del',$(this)).hasClass('hidden') && $('.del',$(this)).addClass('hidden');
});
},
/*
* height
*/
_animate: function(oLi) {
var self = this;
var iHeight = $(oLi).height(),
alpah = 0,
timer,
count = 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);
}
};
// 初始化代码
$(function(){
new Microblog({});
});
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
