前端工作中的点点滴滴(二)

最近做web
app。项目要添加表情,对这个以前没关注过,所以研究了一下。我要做的是一个【消息盒子】,显示别人的回复以及我关注的事件的进展,这里面涉及到显示他人评论的问题,假如都是文字还好说,要是有表情呢?不好办~!

后台发给我的评论数据是字符串,表情也被例如“[撇嘴]”这样的字符串所替代,这里面首先涉及到的问题就是如何从字符串中筛选出合法的表情字符,比如像"[123]"这样的字符就是非法无效的,而且人家可能就是在评论里面写了中括号括起来的字符串,可不能给人家变成表情哈。

首先所有合法的表情字符都存储在一个数组里面,大概是这个样子:


1 var faceList = ["微笑", "撇嘴", "色", "发呆", "得意", "流泪", "害羞", "闭嘴", "睡", "大哭", "尴尬",
2 "发怒", "调皮", "呲牙", "惊讶", "难过", "酷", "冷汗", "抓狂", "吐", "偷笑", "愉快", "白眼",
3 "傲慢", "饥饿", "困", "惊恐", "流汗", "憨笑", "悠闲", "奋斗", "咒骂", "疑问", "嘘", "晕",
4 "疯了", "衰", "骷髅", "敲打", "再见", "擦汗", "抠鼻", "鼓掌", "糗大了", "坏笑", "左哼哼",
5 "右哼哼", "哈欠", "鄙视", "委屈", "快哭了", "阴险", "亲亲", "吓", "可怜", "菜刀", "西瓜",
6 "啤酒", "篮球", "乒乓", "咖啡", "饭", "猪头", "玫瑰", "凋谢", "嘴唇", "爱心", "心碎", "蛋糕",
7 "闪电", "炸弹", "刀", "足球", "瓢虫", "便便", "月亮", "太阳", "礼物", "拥抱", "强", "弱",
8 "握手", "胜利", "抱拳", "勾引", "拳头", "差劲", "爱你", "NO", "OK", "爱情", "飞吻", "跳跳",
9 "发抖", "怄火", "转圈", "磕头", "回头", "跳绳", "投降"];

  前端展示的时候,首先要把字符串里面的表情字符找出来,并生成对应的元素。

  首先把表情数组反向映射:

          // 反向映射
var faces = {};
Z.loopArray( faceList, function ( data, i ) {
faces[data] = i;
} );

  

  

  反向映射的结果放在faces数组里面,接着只要把合法的表情字符提取出来,就能得到它的编号,根据编号可以进行图片的选择,这里面图片的设计还是比较讲究的,排成一行

  每个表情的宽度和高度相同,得到表情的编号之后,设定background-position时候可以直接设定为:-标号*宽度px
0即可。接下来的工作就是生成了:


document.querySelector( ".text" ).innerHTML = data.text.replace( /\[([^\]]*)\]/g, function ( str ) {
var index = faces[RegExp.$1];
return index !== undefined ? Z.element( "span", {
classList : "face",
css : {
"background-position" : "-" + index * 20 + "px 0"
}
} ).outerHTML : str;
} );

  这里面的outerHTML可谓是点睛之笔。特别值得注意的是,这么写完了还有一处要注意,就是图片设定的是背景图,这里高度怎么设定?一般来说,设定为父节点的line-height大小即可。

时间: 2024-10-15 19:02:02

前端工作中的点点滴滴(二)的相关文章

前端工作中的点点滴滴(一)

验证一个css属性是否被支持,这算是一个比较基础的问题.另外一方面,我们不仅想知道一个属性是否被支持,还想知道某个属性的特定类型的值是否被支持.例如background-color可以有rgba类型的数值,但并不是所有浏览器都支持,如何确定一款浏览器支不支持rgba类型的值呢?我认为Modernizr这款库就为我们提供了一个很好的手段.Modernizr是如何做的呢?具体来说用到了[属性]这个概念,这个概念在C#中显得非常重要.只有当你输入的数值是合法的,才会继续后面的操作.也就是,对于浏览器来

知乎上关于前端工作中经常遇到的问题总结

有哪些经常被误用的 HTML.JavaScript.CSS 的元素.方法和属性? 以前想要把一个元素(input 之类的)设成只读的时候都是用 disabled,后来发现这是不对的. 因为在 HTML 里面,如果一个元素被设置成 disabled, 那么它的值就不会被发送到 server 端. 正确的做法应该是使用 readonly. 那么除了这个 disabled,在 Web 开发中还有哪些东西是经常被误用的? 添加评论分享 按票数排序 按时间排序 21 个回答 一丝,专业 CSS 吐槽,下面

前端工作中一些关于hosts的简单设置

hosts原理: hosts文件存放的就是一些常用的网站主机的域名和其对应的IP地址.当我们访问网络的时候,可是以用浏览器在地址栏中输入网站的域名并回车,也可以是PING一个网站的域名等,系统往往会首先检查本地的HOSTS表文件,看其中是否已经有相应的域名与IP地址的对应关系,如果有就会直接采用,如果没有,那么就得由DNS服务器进行域名解析完成域名与IP的转换工作. 使用场景: 1.加快域名解析 对于要经常访问的网站,我们可以通过在Hosts中配置域名和IP的映射关系,提高域名解析速度.由于有了

在前端工作中遇到的一些常见的兼容问题

1.图片下方3像素:在div中插如图片时,图片会将div下方撑大3px: 解决方案:(a)将<div>和<img>写在一行上(IE6.ie7); (b)将<img>转为块状元素,给<img>添加声明:display:block; (c)给<div>加overflow:hidden; 2.换行产生3像素: 解决方案:(a)不换行,将元素放在一行显示: (b)给元素加浮动: 3.鼠标指针bug:cursor属性的hand属性值只有IE浏览器识别,其他

前端工作中遇到的问题总结1

1.button里面,用letter-spacing调整中文字间距 问题描述:设置之后现代浏览器无法使文字水平居中,会偏右,原因:最后一个字后面也有间距存在解决方式:用空格解决;或者用paddding-left:2px解决 2.兼容ie6,7,8背景透明内容不透明解决方法: rgba(a,b,c,0.8); filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80); -ms-filter: "progid:DXImageTransfo

前端工作中遇到的问题总结

1.button里面,用letter-spacing调整中文字间距 问题描述:设置之后现代浏览器无法使文字水平居中,会偏右,原因:最后一个字后面也有间距存在解决方式:用空格解决;或者用paddding-left:2px解决 2.兼容ie6,7,8背景透明内容不透明解决方法: rgba(a,b,c,0.8);filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);-ms-filter: "progid:DXImageTransform

工作中的点点滴滴(一)

也许是真的运气好还是怎么回事,这事还是要到2周前的一台服务器说起,我们有一台托管的服务器(戴尔R420 机架式服务器),以前业务一直在正常运转,突然那天上级说,服务器怎么连接不上去,程序好像也假死了,我首先ping是正常的,尝试远程登录,连接被拒绝,还以为是之前交接的时候密码等信息错误(至今没搞清),反馈到领导,让联系机房重启,很不幸的是我们联系另一家机房,托管到宝山区纪蕴路世纪互联的机房,大概是1号线呼兰路吧.三方人员变动都很大,联系世纪华联,明明知道IP什么,服务器就在那边托管,但是就不重启

工作那些事(二十七)项目经理在项目中是什么角色?

项目经理在项目中是什么角色? 有人说,项目经理就是一个求人的差事,你是在求人帮你做事.这样的说法在中国特色下,有一定道理.可是,我不全然认同.我认为项目经理室一个为项目组人员服务的角色.更像是后勤保障部长的角色. 有人说.项目经理就是一个与人扯皮的差事,你要不断的与开发.产品.測试等之间沟通.协调. 有人说,有人的地方,就有江湖,有江湖的地方,就有规矩.确实,在做项目的时候,有的人是为了完毕功能,有的人是为了学到东西,有的人是为了混日子. 哪种人最适合你的项目?你的项目.有没有被所谓的专家坑过?

工作杂谈之说说工作中的二宗罪

博客开封了,有段时间没有写过技术文章了,前段时间工作太忙,几乎没有时间去反思工作,虽然搞的东西不是很困难,但是需要耗费很多时间去熟悉新的东西.主要是在工作中需要使用到微软开发的新框架SOLFramework,它是由微软为远洋地产量身定做的MVC框架,需要在该平台基础上开发导致了很多后续的麻烦. 先来说下最近的工作情况吧,最近一段时间在工作中不是很如意,很多事情没有按照自己的规划进行,其中最主要的表现是这段时间没有更新文章,无论是在技术上的文章还是工作上的学习都没有及时的去思考.反思,可能是跟自己