最近2天研究了下 騰訊發(fā)表微博的效果 特此來分享下，效果如下：
在此分享前 來談?wù)劚救司帉懘a的習(xí)慣，很多人會問我既然用的是jquery框架 為什么寫的組件不用Jquery那種形式？我當(dāng)時回答的是：每個人編寫代碼有每個人的習(xí)慣。但是我更想表達(dá)的是：這種編碼個人覺得 有一個很大的優(yōu)點(diǎn)，我不是非常依賴于Jquery框架，因?yàn)椴煌墓居胁煌目蚣?比如在淘寶用的kissy框架 在支付寶用的是支付寶框架 在百度用的是百度框架 在騰訊有騰訊的前端js框架 假如我的編寫代碼太依賴于jquery 那假如其他人想要用我代碼或者我自己某一天去做騰訊項(xiàng)目了 但是他們那邊要求我們只能用他們的JS框架 且又有這樣的功能？那如果我完全依賴jquery那種形式編碼 那現(xiàn)在我是不是要重新編碼呢？如果按照現(xiàn)在編碼方式去編碼 最多只是用了下jquery選擇器而已 那么只要改下選擇器 其他的代碼都可以直接拿來用，這樣的擴(kuò)張性非常好！我個人覺得作為一個專業(yè)的前端開發(fā)，不僅僅只會一點(diǎn)點(diǎn)jquery做做東西，而更應(yīng)該考慮編寫高質(zhì)量的代碼，可能用jquery寫寫簡單的代碼同樣能做好某個東西，但是有沒有考慮到假如某一天需求增加了某某功能 你是不是又要改代碼？能不能在以前的基礎(chǔ)上重新寫新的功能？而無需改代碼！
何謂高質(zhì)量的代碼？
個人覺得必須滿足以下幾點(diǎn)：
1. 可擴(kuò)展性。
2. 可維護(hù)性。
3. 可讀性,易使用性。
4. JS性能。
最主要滿足以上幾點(diǎn)。
好了 廢話不多說了！轉(zhuǎn)主題，目前我做的這個發(fā)表微博效果 只是簡單的 當(dāng)然騰訊發(fā)表微博有一些復(fù)雜的功能 比如說下面有添加表情等等功能，目前沒有做成那樣的(工作量比較大)。
下面我寫的這個JS代碼需要注意2點(diǎn)：
1.每次發(fā)表下后 大家在說列表會添加一條，目前沒有發(fā)ajax請求 后臺沒有記錄 所以刷新頁面 會清掉。
2. 時間是用的是客戶端時間 假如客戶端時間錯誤的話 那么時間也會受影響。
其實(shí)思路很簡單 看上面的效果就明白 所以思路在這邊不多說了！或者我下面會提供壓縮demo 可以自己下載下來看看效果就ok了！每次發(fā)表一次后 都提供了回調(diào) 作為擴(kuò)展吧！當(dāng)然鼠標(biāo)移到某一項(xiàng)時候 會出現(xiàn)刪除按鈕 同時可以任意刪除某一項(xiàng)。直接貼代碼吧 也沒有什么好說的！
HTML代碼如下：
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;
// 點(diǎn)擊輸入框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);
});
});
// 點(diǎn)擊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);
});
});
// 廣播按鈕hover事件
$(_config.sendBtn).hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover');
},function(){
$(this).hasClass('hover') && $(this).removeClass('hover');
})
// 綁定事件
self._bindEnv();
},
/*
* 計(jì)算字符的長度 包括中文 數(shù)字 英文等等
* @param str
* @return 字符串的長度
*/
_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++;
}else {
totalCount+=2;
}
}
return totalCount;
},
/*
* 所有的綁定事件
*/
_bindEnv: function() {
var self = this,
_config = self.config,
_cache = self.cache;
// 文本域keyup事件
self._keyUp();
// 點(diǎn)擊廣播按鈕事件
self._clickBtn();
},
/*
* 文本域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) {
html = _config.maxNum * 1 - len * 1;
}else {
html = _config.maxNum * 1 - len * 1;
}
$(_config.maxNumElem).html(html);
$(_config.maxNumElem).attr('data-html',html);
});
},
/*
* 點(diǎn)擊廣播按鈕事件
*/
_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("隨便說點(diǎn)什么吧!");
return;
}
if(maxNum * 1 < 0) {
alert('字符超過限制 請縮減字');
return;
}
// 本來是要發(fā)ajax請求的 但是這邊沒有后臺處理 所以目前只是客戶端渲染頁面
self._renderHTML(inputVal,textVal);
});
},
/*
* 把html結(jié)構(gòu)渲染出來
*/
_renderHTML: function(inputVal,textVal) {
var self = this,
_config = self.config,
_cache = self.cache;
var oLi = document.createElement("li"),
oDate = new Date();
oLi.innerHTML = '<div class="userPic">' +
'<img src="'+self._getSrc()+'" />'+
'</div>' +
'<div class="content">' +
'<div class="userName"><a href="javascript:;">'+inputVal+'</a>:</div>' +
'<div class="msgInfo">'+textVal+'</div>' +
'<div class="times">'+
'<span>'+self._format(oDate.getMonth() + 1) + "/u6708" + self._format(oDate.getDate()) + "/u65e5 " + self._format(oDate.getHours()) + ":" + self._format(oDate.getMinutes())+'</span>'+
'<a class="del hidden" href="javascript:;">刪除</a>'+
'</div>' +
'</div>';
// 插入元素
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();
},
/*
* 格式化時間, 如果為一位數(shù)時補(bǔ)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({});
});
新聞熱點(diǎn)
疑難解答
