最近2天研究了下騰訊發表微博的效果特此來分享下，效果如下：
在此分享前來談談本人寫程式的習慣，很多人會問我既然用的是jquery框架為什麼寫的元件不用Jquery那種形式？我當時回答的是：每個人寫程式都有每個人的習慣。但我更想表達的是：這種編碼個人覺得有一個很大的優點，我不是非常依賴Jquery框架，因為不同的公司有不同的框架比如在淘寶用的kissy框架在支付寶用的是支付寶框架在百度用的是百度框架在騰訊有騰訊的前端js框架假如我的編寫程式碼太依賴jquery那假如其他人想要用我代碼或我自己某一天去做騰訊項目了但是他們那邊要求我們只能用他們的JS框架且又有這樣的功能？那如果我完全依賴jquery那種形式編碼那現在我是不是要重新編碼呢？如果按照現在編碼方式去編碼最多只是用了下jquery選擇器而已那麼只要改下選擇器其他的代碼都可以直接拿來用，這樣的擴張性非常好！我個人覺得作為一個專業的前端開發，不僅僅只會一點點jquery做做東西，而更應該考慮編寫高質量的代碼，可能用jquery寫寫簡單的代碼同樣能做好某個東西，但是有沒有考慮到假如某一天需求增加了某某功能你是不是又要改程式碼？能不能在以前的基礎上重寫新的功能？而無需改程式碼！
何謂高品質的程式碼？
個人覺得必須滿足以下幾點：
1. 可擴展性。
2. 可維護性。
3. 可讀性,易使用性。
4. JS性能。
最主要滿足以上幾點。
好了廢話不多說了！轉主題，目前我做的這個發表微博效果只是簡單的當然騰訊發表微博有一些複雜的功能比如說下面有添加表情等等功能，目前沒有做成那樣的(工作量比較大)。
下面我寫的這個JS程式碼要注意2點：
1.每次發表下後大家在說列表會加一條，目前沒有發ajax請求後台沒有記錄所以刷新頁面會清掉。
2. 時間是用的是客戶端時間假如客戶端時間錯誤的話那麼時間也會受影響。
其實思路很簡單看上面的效果就懂所以思路在這邊不多說了！或者我下面會提供壓縮demo 可以自己下載下來看看效果就ok了！每次發表一次後都提供了回呼作為擴展吧！當然滑鼠移到某一項時候會出現刪除按鈕同時可以任意刪除某一項。直接貼程式碼吧也沒有什麼好說的！
HTML程式碼如下：
複製代碼代碼如下:
<div id="msgBox">
<form>
<h2>來, 說說你在做什麼, 想什麼</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>還能輸入</span><strong>140</strong><span>字</span>
<input id="sendBtn" type="button" value="" />
</p>
</div>
</form>
<div>
<h3><span>大家在說</span></h3>
<ul id="list-msg"></ul>
</div>
</div>
CSS程式碼如下：
複製代碼代碼如下:
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 bottom;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;}
JS程式碼如下：
複製代碼代碼如下:
/**
* 仿騰訊發表微博的效果
* 1.目前沒有發ajax請求後台沒有記錄所以刷新頁面會清除掉
* 2. 時間是用的是客戶端時間假如客戶端時間錯誤的話那麼時間也會受影響。
* 目前就這樣互動具體的思路不太複雜如果專案中用到這樣的可以根據具體的需求更改
* @constructor Microblog
* @date 2013-12-23
* @author tugenhua
* @email [email protected]
*/
function Microblog(options) {
this.config = {
maxNum : 140, // 最大的字元數
targetElem : '.f-text', // 輸入框或文字域的class名
maxNumElem : '.maxNum', // 還能輸入多少字容器
sendBtn : '#sendBtn', // 廣播按鈕
face : '#face', // 表情容器
activeCls : 'active', // 滑鼠點選輸入框add類
currentCls : 'current', // 滑鼠點選face頭像時增加的類別名稱
inputID : '#userName', // 輸入框ID
textareaId : '#conBox', // 文字域ID
list : '#list-msg', // 大家在說的容器
callback : null // 動態廣播完後的回呼函數
};
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);
});
});
// 廣播按鈕hover事件
$(_config.sendBtn).hover(function(){
!$(this).hasClass('hover') && $(this).addClass('hover');
},function(){
$(this).hasClass('hover') && $(this).removeClass('hover');
})
// 綁定事件
self._bindEnv();
},
/*
* 計算字元的長度包括中文數字英文等等
* @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();
// 點選廣播按鈕事件
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);
});
},
/*
* 點擊廣播按鈕事件
*/
_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 = '<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);
}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({});
});
原始碼下載：http://xiazai.VeVB.COm//201312/yuanma/wb(VeVB.COm).rar