首页 > 代码库 > 前端工作中的点点滴滴（二）

前端工作中的点点滴滴（二）

2024-07-07 18:13:20   228人阅读

      最近做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大小即可。


联系
我们