再说仿微博的发布与删除-蚊子前端博客

很久之前闲着没事仿照新浪微博的发布与删除，写过一次代码！那时主要是实现滑动的效果，不过代码却是非常的乱，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;
  animation: "wobble" 0.8s ease-in-out;
}
@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 类，执行完成后再去掉该类名。

const obj = {
  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 标签。正常情况下，应该是：

添加成为 ul 标签的第一个 li 标签
默认隐藏这个刚添加的 li 标签
使用 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();
  });

当然，依然还有很多的地方需要完善呢，期待你们的意见和建议。