JS 仿騰訊發表微博的效果
最近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" class="f-text" value="" /> <p id="face"> <img src="img/face1.gif" class="current" /> <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" class="f-text"></textarea> </div> <div class="tr"> <p> <span class="countTxt">還能輸入</span><strong class="maxNum">140</strong><span>個字</span> <input id="sendBtn" type="button" value="" title="快捷鍵 Ctrl+Enter" /> </p> </div> </form> <div class="list"> <h3><span>大家在說</span></h3> <ul id="list-msg"></ul> </div> </div>
CSS程式碼如下:
![](https://i.iter01.com/images/86153736c3d440f2e7d2df2432d97112d2ef05f0cb7522cf2307c3de9447249a.gif)
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程式碼如下:
![](https://i.iter01.com/images/86153736c3d440f2e7d2df2432d97112d2ef05f0cb7522cf2307c3de9447249a.gif)
/** * 仿騰訊發表微博的效果 * 1.目前沒有發ajax請求 後臺沒有記錄 所以重新整理頁面 會清掉 * 2. 時間是用的是客戶端時間 假如客戶端時間錯誤的話 那麼時間也會受影響。 * 目前就這樣互動 具體的思路不太複雜 如果專案中用到這樣的 可以根據具體的需求更改 * @constructor Microblog * @date 2013-12-23 * @author tugenhua * @email 879083421@qq.com */ 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 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(); }, /* * 格式化時間, 如果為一位數時補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({}); });
今天是平安夜 最後祝福大家平安夜快樂!