再說仿微博的發佈與刪除

　　好久以前閒着沒事仿照新浪微博的發佈與刪除，寫過一次代碼！那時主要是實現滑動的效果，不過代碼倒是很是的亂，html與css樣式混用等。但是這段代碼也沒怎麼用過，就一直在那扔着。點擊查看效果

　　直到昨天下午，有一妹子說她想實現那種跟新浪微博似的那種效果，我纔想起我原先也寫過這個東西，不過由於那時的代碼啊有段亂，也就沒給妹子推薦。而後晚上回到家後，就把我一年前寫的代碼從新設計了一下，相對來講結構更加清晰了一些！

　　新代碼和舊代碼都放在一個倉庫裏，不過這兩個沒有糾纏。舊代碼就一個文件：microblog.html，剩下的所有都是新代碼，若不想要舊的代碼，刪了這個文件就是。

　　放上代碼地址：github-microblog

　　說下此次的重構主要都進行了哪些工做：

• 更新了jQuery的版本：由1.7.1升級到了1.11.1，同時也廢除了live方法，改用on;
• 把html, css與js進行相互的分離，再也不集合到一個文件裏；
• 添加了字數的統計和限制，最多隻能輸入140個字；
• 添加了輸入框爲空或字符超過限制時的提示；
• 添加了表情的插入

　　此次重寫也學到了不少的東西，好比CSS3中的animation，字數的限制，表情的添加等。

　　點擊連接【新的效果頁面】，看看重構後的效果。

　　1. CSS3中的ANIMATION

　　在輸入框爲空時或者字數超過了限制，輸入框就是閃兩下進行提示，這是經過CSS3中的animation屬性實現的。關於animation更多的介紹，能夠參考這個連接，本文就不展開說明了，你能夠經過此連接【CSS3的animation】查看animation更多詳細的信息與使用，這裏簡單的介紹下animation的使用：

.send .warning{
    background: #fff;
    -webkit-animation:'wobble' 0.8s ease-in-out;
}
@-webkit-keyframes wobble{
    0%{background: #fff;}
    25%{background: #FFC0CB;}
    50%{background: #fff;}
    75%{background: #FFC0CB;}
    100%{background: #fff;}
}

　　animation中的參數分別表示：

• 'wobble' : 動畫的名稱，隨便定義
•  0.8s : 動畫執行的總時間
• ease-in-out : 動畫執行的方式

　　在wobble的結構體裏，有不少的百分比數字，這些就是在0.8s裏的執行時間裏的各個進度，咱們能夠定義每一個當前進度展現怎樣的屬性。

　　定義了樣式，還要肯定觸發點是什麼？當用戶點擊肯定「發佈」按鈕或者使用ctrl+enter組合鍵時進行信息的校驗，若是輸入框爲空或者字數超過了限制，那麼textarea標籤就添加warning類，執行完成後再去掉該類名。

timer : null,
warning : function(){
    $("#say").addClass( "warning" );

    this.timer && clearTimeout(this.timer);
    this.timer = setTimeout(function(){
        $("#say").removeClass( "warning" );
    }, 800);
}

　　2. 字數的限制

　　字數的限制，叫實時顯示剩餘字數更加確切一些。在這裏我是讓textarea標籤監聽keydown事件實現的，這裏爲何不選擇監聽keypress或keyup事件呢？由於：

keypress與keydown事件差很少，keydown是監聽按鍵按下事件，keypress是監聽按下與鬆開事件；可是keypress只能監聽單個按鍵事件，不能監聽組合按鍵。這裏使用到了ctrl+enter組合按鍵提交，所以就不能使用keypress了；關於keydown和keyup，假如在輸入英文字符或者數字時，雖然按鍵一直沒有鬆開，可是一直在進行輸入（沒有鬆開按鍵則表示keydown事件無限執行），那麼若是使用keyup事件來計算剩餘字數就不許確了。所以最終選擇了keydown事件

　　每次執行keydown事件時，均獲取textarea的值的長度，而後計算出剩餘的字數，若是剩餘字數爲0，則再也不讓用戶進行輸入。

　　3. 將內容添加到列表中

　　參考如今的html結構，每條留言都是一個li標籤，所以插入新留言時，也是要插入一個li標籤。正常狀況下，應該是：

1. 添加成爲ul標籤的第一個li標籤
2. 默認隱藏這個剛添加的li標籤
3. 使用slideDown()、fadeIn()等函數顯示出來

　　但是這裏，在個人代碼裏，有一個很難理解的問題：須要添加的li標籤必須添加成爲第二個li標籤，若是是添加成爲第一個li標籤，執行顯示動畫或者刪除該留言時，會閃動一下，也不知道爲何？ 不知有誰能解決下不？

var $ul = $("#talklist"),
    $one = $('<li class="item"><p>'+word+'</p><div class="info"><span class="datetime fl">'+datetime+'</span><div class="fr"><a class="delBtn" href="javascript:;"">刪除</a></div></div></li>');

$ul.find('.first').after($one);    // 添加到第一個標籤的後面
$one.hide().slideDown( 'slow' );

　　4. 表情的添加

　　這一次最大的變化就是可以插入表情了。由於輸入框爲textarea標籤，是不能直接顯示html元素的，只能顯示文本信息。所以咱們換個思路實現，當點擊表情圖片時，用某個字符表示這個表情。提交後，再把全部的字符轉換回表情連接。

　　表情的操做主要在js/express.js的文件中，expdata變量中存着全部能夠顯示的表情圖片連接，好比：

'摳鼻':'./img/express/kbsa_org.gif'

　　當點擊表情時，輸入框內顯示[摳鼻]，當用戶提交信息後，再把[摳鼻]字符轉換爲<img src="./img/express/kbsa_org.gif" alt="exp" />，這樣就能顯示圖片了。

　　這裏還有一個要注意的點：點擊表情按鈕彈出表情列表層後，點擊其餘地方也可以關閉這個層，所以須要在body的層級上綁定click事件，來隱藏掉這個表情列表層；不過不是點擊body上全部的地方都要隱藏的：一個是表情彈出按鈕，一個是表情列表層。咱們須要爲這兩個地方的click事件阻止事件冒泡：e.stopPropagation()。

 

$exp_list.delegate("li", "click", function(e){
    var title = '['+$(this).attr("title")+']';
    $("#say").val($("#say").val()+title);

    e.stopPropagation();
});
$("body").not('.express, .exp_list').on("click", function(e){
    $exp_list.fadeOut();
});

 

　　固然，依然還有不少的地方須要完善呢，期待大家的意見和建議。

　　原文地址：http://www.xiabingbao.com/javascript/2015/03/21/imitate-microblog/